CSS does not cascade?

I am using Aspose.Cells 16.11.0 to convert HTML to XLSX. Recently you made it possible to override default styling of TH elements using CSS. There is a quirk in the implementation; it appears that when I override one of the style attributes of TH, this also affects defaulting of another style attribute of the same TH element. Example:

<html>
<head>
<title>Test</title>
<style type=“text/css”>
.leftaligned {
text-align: left;
}
	<span style="color:maroon;">.notbold</span> {
		<span style="color:red;">font-weight</span>: <span style="color:blue;">normal</span>;
	}
<span style="color:blue;"></</span><span style="color:maroon;">style</span><span style="color:blue;">></span>

</head>
<body>
<table>
<tr><th class=“leftaligned”>Should be left-aligned and bold.</th></tr>
<tr><th class=“notbold”>Should be centered and not bold.</th></tr>
</table>
</body>
</html>


In the first row, text-align has been overridden (made left-aligned instead of the default centered), but as a side effect, the text is no longer bold. Since there was no explicit font-weight for that cell, it should have been bold (the default for TH).

In the second row, font-weight has been overridden (made normal instead of the default bold), but as a side effect, the text is left-aligned. Since there was no explicit text-align for that cell, it should have been centered (the default for TH).

To see the correct behavior, please import the HTML straight into Excel.

Adding an explicit rule with TH’s default styling (something I had good experience with in version 8.9.0) does not solve the problem:

th {
font-weight: bold;
text-align: center;
}

Adding the tag name TH to the selectors causes Aspose to ignore the rules:

th.leftaligned {
text-align: left;
}

th.notbold {
font-weight: normal;
}


I hope I am doing something wrong myself, otherwise something is seriously broken in the CSS implementation.

Hi,


Thanks for providing details.

After an initial test, I am able to replicate the issue with the following sample code. I found an issue with overriding default styling of TH elements
e.g
Sample code:

string html = @"

Test

.leftaligned {
text-align: left;
}

.notbold {
font-weight: normal;
}




<th class=""leftaligned"">Should be left-aligned and bold.
<th class=""notbold"">Should be centered and not bold.


";

byte[] byteArray = Encoding.ASCII.GetBytes(html);
MemoryStream stream = new MemoryStream(byteArray);
Aspose.Cells.HTMLLoadOptions loadOptions = new Aspose.Cells.HTMLLoadOptions();
Workbook workbook = new Workbook(stream, loadOptions);

workbook.Save("e:\\test2\\out1.xlsx", SaveFormat.Xlsx);


I have logged a ticket with an id "CELLSNET-44982" for your issue. We will look into it soon.

Once we have an update on it, we will let you know here.

Thank you.

Hi,


This is to update you that we have fixed your issue logged earlier as “CELLSNET-44982” now. We will soon provide the fix after performing QA and incorporating other enhancements and fixes.

Thank you

Hi,


Please try our latest version/fix: Aspose.Cells for .NET v16.12.4 (attached):

Aspose.Cells for .NET v16.12.4 (.NET 2.0)
Aspose.Cells for .NET v16.12.4 (.NET 4.0)

(Note: please download any of the versions for your underlying .NET Framework version)

Let us know your feedback.

Thank you.

The problem appears to be fixed in my initial HTML sample, but I think you overlooked the bottom part of my question, starting from “Adding the tag name TH to the selectors causes Aspose to ignore the rules.” Styling is still ignored there. Honestly, even if I wouldn’t have mentioned it, such a case should have been covered when fixing and testing.

I entered a separate bug report with more possible CSS selectors. I hope you can take along the cascading issue when fixing that issue.
<a href="https://forum.aspose.com/t/21741

Hi,


Well, I tested your scenario/ case a bit. I write the following HTML in a file to save it (e.g to abc.html) manually and then open the file into the browser, it displays the same output (view) as per the output in MS Excel (when saving the HTML to XLSX by Aspose.Cells APIs). Both contents are centered and bold in the cell(s).
e.g
abc.html

Test
<style type="“text/css”">
th.leftaligned {
text-align: left;
}
th.notbold {
font-weight: normal;
}
<th class="“leftaligned”">Should be left-aligned and bold.
<th class="“notbold”">Should be centered and not bold.

Could you elaborate if I understand you correctly or I am missing something, so we could look into your issue precisely?

Thank you.

My apologies for insinuating you did not look at that last scenario; I was way too judgemental there.

I did some further investigations and it now starts dawning to me just how inconsistent Excel’s behavior is. Here is my HTML sample again:

<html>
<head>
<title>Test</title>
<style type=“text/css”>
th.leftaligned {
text-align: left;
}
	<span style="color:maroon;">th.notbold</span> {
		<span style="color:red;">font-weight</span>: <span style="color:blue;">normal</span>;
	}
<span style="color:blue;"></</span><span style="color:maroon;">style</span><span style="color:blue;">></span>

</head>
<body>
<table>
<tr><th class=“leftaligned”>Should be left-aligned and bold.</th></tr>
<tr><th class=“notbold”>Should be centered and not bold.</th></tr>
</table>
</body>
</html>

As you already noticed, the ‘th’ rules are ineffective in Excel. If I replace ‘th’ by ‘td’ in the CSS selectors, the rules do take effect. I see the same happen in scenarios without CSS classes. It is as if some preprocessor replaces every TH tag by TD, with the addition of the default styling typical for TH (i.e. bold and centered).

So far so good. But now, let’s make a small change. I am just adding one more CSS rule: ul li {color:blue}.
<html>
<head>
<title>Test</title>
<style type=“text/css”>
ul li {
color: blue;
}
	<span style="color:maroon;">th.leftaligned</span> {
		<span style="color:red;">text-align</span>: <span style="color:blue;">left</span>;
	}

	<span style="color:maroon;">th.notbold</span> {
		<span style="color:red;">font-weight</span>: <span style="color:blue;">normal</span>;
	}
<span style="color:blue;"></</span><span style="color:maroon;">style</span><span style="color:blue;">></span>

</head>
<body>
<table>
<tr><th class=“leftaligned”>Should be left-aligned and bold.</th></tr>
<tr><th class=“notbold”>Should be centered and not bold.</th></tr>
</table>
</body>
</html>

Since my HTML contains no
    or
  • tags, the additional rule should have no effect whatsoever. But suddenly, the ‘th’ rules start taking effect. Also, the earlier behavior of TH tags picking up CSS rules with ‘td’ selectors, has disappeared. It is as if the addition of one simple CSS rule (according to this post, it can be any descendant selector) has made Excel switch over to a more standards-compliant CSS engine.

    The behavior displayed by the second HTML sample would have my preference, because:
    1. it is standards-compliant
    2. the second stylesheet comes just a little bit closer to a real-life one; at least in size.
    But since not even Excel is consistent at this point, I will leave it up to your discretion. As for us, I think we’ll have to live with rewriting TH tags to TD, as these appear to be more reliable.

Hi,


Thanks for your continuous work and investigation to extract the issue.

I have tested your scenario/case as per second HTML and you are right. I am able to reproduce the issue as you mentioned by using the following sample code. I found that your the mixed Html/CSS style rule does not take into account when rendering the HTML to Excel via Aspose.Cells APIs. I then tried to test the scenario/case manually in MS Excel which works fine in it and as expected:
e.g
Sample code:

string html = @"

Test
<style type="“text/css”">
ul li {
color: blue;
}

th.leftaligned {
text-align: left;
}

th.notbold {
font-weight: normal;
}




<th class="“leftaligned”">Should be left-aligned and bold.
<th class="“notbold”">Should be centered and not bold.


";

byte[] byteArray = Encoding.ASCII.GetBytes(html);
MemoryStream stream = new MemoryStream(byteArray);
Aspose.Cells.HTMLLoadOptions loadOptions = new Aspose.Cells.HTMLLoadOptions();
Workbook workbook = new Workbook(stream, loadOptions);

workbook.Save(“e:\test2\out1.xlsx”, SaveFormat.Xlsx);

I have logged a separate ticket with an id “CELLSNET-45039” for your issue. We will look into it soon.

Once we have an update on it, we will let you know here.

Thank you.

Hi,


Thanks for using Aspose.Cells.

We are working over this issue and we are hopeful, this issue will be fixed soon. Once, there is some fix or other update available for you, we will let you know asap.

The issues you have found earlier (filed as CELLSNET-44982) have been fixed in this update.


This message was posted using Notification2Forum from Downloads module by Aspose Notifier.

Hi,

Thanks for using Aspose.Cells.

Please download and try the following latest fix

Aspose.Cells for .NET v17.1.4 (.NET 2.0) compiled in .NET Framework 2.0.
Aspose.Cells for .NET v17.1.4 (.NET 4.0) compiled in .NET Framework 4.0.

and let us know your feedback.

It fixes the following issue

  • CELLSNET-45039 - Mixed Html/CSS style rule does not take into account when rendering the HTML to Excel

The issues you have found earlier (filed as CELLSNET-45039) have been fixed in Aspose.Cells for .NET 17.2.0.


This message was posted using Notification2Forum from Downloads module by Aspose Notifier.