Font-weight and text-align- both in TD and TH cells

held1353 · September 26, 2016, 10:57am

When comparing Aspose.Cells 9.0.0.0 with 8.9.0.0, there is a difference in the styling of TH tags.

In 8.9.0.0, TH cells were rendered the same way as TD cells: not bold, left-aligned.
In 9.0.0.0, rendering of TH cells is in line with default styling proposed by W3 (https://www.w3.org/TR/html-markup/th.html): bold and centered.

This should be considered an improvement, but in our case, it works against us. Our stylesheet restyles TH, similar to this:

th { font-weight: regular; text-align: left; }

(The use of TH is a semantic choice; its style is a separate decision.)

Aspose.Cells ignores the CSS properties font-weight and text-align. There was a similar issue:

http://www.aspose.com/community/forums/771799/load-from-html-ignores-bold-style-from-style-block/showthread.aspx

I did some tests with version 9.0.5.0. Apparently you fixed 'font-weight' in TD cells, but not in TH cells. Also, text-align appears to be ignored.

Please make Aspose comply with font-weight and text-align, both in TD and TH cells (and anywhere else where appropriate).

Sample code:

using Aspose.Cells;
using System.IO;
using Microsoft.VisualStudio.TestTools.UnitTesting;
namespace AsposeColspan

{

[TestClass]

public class UnitTest1

{

[TestMethod]

public void TestTh()

{

using (var inputStream = new MemoryStream())

{

using (var writer = new StreamWriter(inputStream))

{

writer.WriteLine(“”);

writer.WriteLine(“”);

writer.WriteLine(“Test TH styling”);

writer.WriteLine(“”);

writer.WriteLine(“.CustomCss th, .CustomCss { font-weight: regular; text-align: left; }”);

writer.WriteLine(“”);

writer.WriteLine(“”);

writer.WriteLine(“”);
				writer.WriteLine(<span style="color: rgb(163, 21, 21);">"<table><tr>"</span>);
				writer.WriteLine(<span style="color: rgb(163, 21, 21);">"<th>Default = bold, centered</th>"</span>);
				writer.WriteLine(<span style="color: rgb(163, 21, 21);">"<th class=\"CustomCss\">Non-bold stylesheet</th>"</span>);
				writer.WriteLine(<span style="color: rgb(163, 21, 21);">"<th style=\"font-weight: regular; text-align: left;\">Non-bold inline style</th>"</span>);
				writer.WriteLine(<span style="color: rgb(163, 21, 21);">"</tr></table>"</span>);

				writer.WriteLine(<span style="color: rgb(163, 21, 21);">"<table class=\"CustomCss\"><tr>"</span>);
				writer.WriteLine(<span style="color: rgb(163, 21, 21);">"<th>Non-bold stylesheet from table</th>"</span>);
				writer.WriteLine(<span style="color: rgb(163, 21, 21);">"</tr></table>"</span>);

				writer.WriteLine(<span style="color: rgb(163, 21, 21);">"</body>"</span>);
				writer.WriteLine(<span style="color: rgb(163, 21, 21);">"</html>"</span>);
				writer.Flush();

				<span style="color: blue;">using</span> (<span style="color: blue;">var</span> workbook = <span style="color: blue;">new</span> <span style="color: rgb(43, 145, 175);">Workbook</span>(inputStream, <span style="color: blue;">new</span> <span style="color: rgb(43, 145, 175);">LoadOptions</span>(<span style="color: rgb(43, 145, 175);">LoadFormat</span>.Html)))
				{
					AssertCells_Desired(workbook);	<span style="color: green;">// would like to see this one succeed</span>
					<span style="color: green;">//AssertCells_9000(workbook);	// this one succeeds with Aspose.Cells 9.0.0.0 and 9.0.5.0</span>
					<span style="color: green;">//AssertCells_8900(workbook);	// this one succeeds with Aspose.Cells 8.9.0.0</span>
				}
			}
		}
	}

	<span style="color: blue;">private</span> <span style="color: blue;">void</span> AssertCells_Desired(<span style="color: rgb(43, 145, 175);">Workbook</span> workbook)
	{
		AssertCell(workbook, 0, <span style="color: rgb(163, 21, 21);">"A1"</span>, <span style="color: rgb(163, 21, 21);">"Default = bold, centered"</span>, <span style="color: blue;">true</span>, <span style="color: rgb(43, 145, 175);">TextAlignmentType</span>.Center);
		AssertCell(workbook, 0, <span style="color: rgb(163, 21, 21);">"B1"</span>, <span style="color: rgb(163, 21, 21);">"Non-bold stylesheet"</span>, <span style="color: blue;">false</span>, <span style="color: rgb(43, 145, 175);">TextAlignmentType</span>.Left);
		AssertCell(workbook, 0, <span style="color: rgb(163, 21, 21);">"C1"</span>, <span style="color: rgb(163, 21, 21);">"Non-bold inline style"</span>, <span style="color: blue;">false</span>, <span style="color: rgb(43, 145, 175);">TextAlignmentType</span>.Left);
		AssertCell(workbook, 0, <span style="color: rgb(163, 21, 21);">"A2"</span>, <span style="color: rgb(163, 21, 21);">"Non-bold stylesheet from table"</span>, <span style="color: blue;">false</span>, <span style="color: rgb(43, 145, 175);">TextAlignmentType</span>.Left);
	}

	<span style="color: blue;">private</span> <span style="color: blue;">void</span> AssertCells_9000(<span style="color: rgb(43, 145, 175);">Workbook</span> workbook)
	{
		AssertCell(workbook, 0, <span style="color: rgb(163, 21, 21);">"A1"</span>, <span style="color: rgb(163, 21, 21);">"Default = bold, centered"</span>, <span style="color: blue;">true</span>, <span style="color: rgb(43, 145, 175);">TextAlignmentType</span>.Center);
		AssertCell(workbook, 0, <span style="color: rgb(163, 21, 21);">"B1"</span>, <span style="color: rgb(163, 21, 21);">"Non-bold stylesheet"</span>, <span style="color: blue;">true</span>, <span style="color: rgb(43, 145, 175);">TextAlignmentType</span>.Center);
		AssertCell(workbook, 0, <span style="color: rgb(163, 21, 21);">"C1"</span>, <span style="color: rgb(163, 21, 21);">"Non-bold inline style"</span>, <span style="color: blue;">true</span>, <span style="color: rgb(43, 145, 175);">TextAlignmentType</span>.Center);
		AssertCell(workbook, 0, <span style="color: rgb(163, 21, 21);">"A2"</span>, <span style="color: rgb(163, 21, 21);">"Non-bold stylesheet from table"</span>, <span style="color: blue;">true</span>, <span style="color: rgb(43, 145, 175);">TextAlignmentType</span>.Center);
	}

	<span style="color: blue;">private</span> <span style="color: blue;">void</span> AssertCells_8900(<span style="color: rgb(43, 145, 175);">Workbook</span> workbook)
	{
		AssertCell(workbook, 0, <span style="color: rgb(163, 21, 21);">"A1"</span>, <span style="color: rgb(163, 21, 21);">"Default = bold, centered"</span>, <span style="color: blue;">false</span>, <span style="color: rgb(43, 145, 175);">TextAlignmentType</span>.General);
		AssertCell(workbook, 0, <span style="color: rgb(163, 21, 21);">"B1"</span>, <span style="color: rgb(163, 21, 21);">"Non-bold stylesheet"</span>, <span style="color: blue;">false</span>, <span style="color: rgb(43, 145, 175);">TextAlignmentType</span>.General);
		AssertCell(workbook, 0, <span style="color: rgb(163, 21, 21);">"C1"</span>, <span style="color: rgb(163, 21, 21);">"Non-bold inline style"</span>, <span style="color: blue;">false</span>, <span style="color: rgb(43, 145, 175);">TextAlignmentType</span>.Left);
		AssertCell(workbook, 0, <span style="color: rgb(163, 21, 21);">"A2"</span>, <span style="color: rgb(163, 21, 21);">"Non-bold stylesheet from table"</span>, <span style="color: blue;">false</span>, <span style="color: rgb(43, 145, 175);">TextAlignmentType</span>.General);
	}

	<span style="color: blue;">private</span> <span style="color: blue;">void</span> AssertCell(<span style="color: rgb(43, 145, 175);">Workbook</span> workbook, <span style="color: blue;">int</span> worksheetNum, <span style="color: blue;">string</span> cellPos, <span style="color: blue;">string</span> expectedStringValue, <span style="color: blue;">bool</span> expectedBoldness, <span style="color: rgb(43, 145, 175);">TextAlignmentType</span> expectedAlignment)
	{
		<span style="color: blue;">var</span> cell = workbook.Worksheets[worksheetNum].Cells[cellPos];
		<span style="color: blue;">string</span> description = <span style="color: blue;">string</span>.Format(<span style="color: rgb(163, 21, 21);">"Worksheet {0}, cell {1}: "</span>, worksheetNum, cellPos);
		<span style="color: rgb(43, 145, 175);">Assert</span>.AreEqual(<span style="color: rgb(43, 145, 175);">CellValueType</span>.IsString, cell.Type, description + <span style="color: rgb(163, 21, 21);">"Type."</span>);
		<span style="color: rgb(43, 145, 175);">Assert</span>.AreEqual(expectedStringValue, cell.StringValue, description + <span style="color: rgb(163, 21, 21);">"StringValue."</span>);
		<span style="color: rgb(43, 145, 175);">Assert</span>.AreEqual(expectedBoldness, cell.GetDisplayStyle().Font.IsBold, description + <span style="color: rgb(163, 21, 21);">"IsBold."</span>);
		<span style="color: rgb(43, 145, 175);">Assert</span>.AreEqual(expectedAlignment, cell.GetDisplayStyle().HorizontalAlignment, description + <span style="color: rgb(163, 21, 21);">"HorizontalAlignment."</span>);
	}
}

}

amjad.sahi · September 26, 2016, 1:32pm

Hi,

Thanks for providing us details and sample code snippet.

After an initial test, I observed the behavior as you mentioned but still not sure if this is an issue or not. I conducted the test cases you provided using your sample code in a simple unit test project and found the issue. I found rendering of TH cells is in line with default styling proposed: bold and centered. I have logged an investigation ticket with an id “CELLSNET-44786” for your issue. Our concerned developer will look into it and investigate if this is an issue or an expected results.

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

Thank you.

held1353 · September 27, 2016, 2:49am

Note: I accidentally used font-weight: regular, this should of course be font-weight: normal. It does not change anything about the issue; the property is still ignored by Aspose.Cells.

amjad.sahi · September 27, 2016, 3:06am

Hi,

Thanks for providing further details/findings.

Please spare us a little time to evaluate your issue precisely. We may get back to you soon with further updates.

Thank you.

held1353 · October 11, 2016, 3:06am

Sorry for bumping this, but do you have any idea how soon a solution could be rolled out? I don’t really mind in which direction; either roll back to the logic as it was in 8.9.0 (i.e. styling on TH identical to default styling on TD), or roll forward by implementing CSS styling on TH as you already did on TD. We would love to upgrade from 8.9.0 to 9.0.0, but the current situation is blocking that.

amjad.sahi · October 11, 2016, 4:28am

Hi,

Thanks for following up.

The product team has evaluated your issue. Well, the HTML uses TH tag to contain data, so the Font.IsBold is true. If you save the HTML to a file and open it with MS Excel, you will also discover the contents would be the same. It was actually a bug in v8.9.0.x. Regarding text-alignment issue, well, we can’t support the mixed use of the class attributes and TH tag for now. We have supported some part of free HTML. It is complex issue regarding mixed use of styles. We found the default style of TH tag is Font.IsBold = true. But the TD tag is Font.IsBold = false.

We can solve the text-align in B2 and C2 cells. But A2’s Style cannot be solved for now as we need to investigate it further. Once we fix this issue, we will let you know here immediately.

Thank you.

babar.raza · October 19, 2016, 2:46am

Hi again,

This is to update you that the ticket logged earlier as CELLSNET-44786 has been marked resolved. We will shortly share the fix here after ensuring the quality and incorporating other enhancements.

shakeel.faiz · October 20, 2016, 1:15am

Hi,

Thanks for using Aspose.Cells.

Please download and try the latest fix: Aspose.Cells for .NET v16.10.3.0 and let us know your feedback.

If you need .NET 4.0 dll, then please download the latest Aspose.Cells for .NET v16.10.3.0 (.NET 4.0) version.

held1353 · October 24, 2016, 9:30am

Thanks for the fast fix! I tested 16.10.3.0; TH cells now obey CSS text-align, but CSS font-weight is still ignored.

Please note that the situation was actually better in 8.9.0. Yes, the default style of TH was broken there, but there was a simple workaround. The magic was in this simple CSS rule:

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

Having that rule in the HTML input fixed the broken default style, and still gave me the opportunity to override it. The following example works in 8.9.0, but not in later versions:

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

.myclass { font-weight: regular; text-align: left; }

This cell is bold and centered.

This cell is not bold and left-aligned.

My suggestion to your developers would be to go back to the 8.9.0 approach (unless they feel something else was seriously broken there) and add an implicit CSS rule that acts as if it were part of the CSS block inlined in HTML.

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

Seems to me like a simple and maintainable approach. Only difficulty would be in resolving a conflict with an explicit CSS rule with the same selector (th); the explicit rule should always have to overrule the implicit rule.

shakeel.faiz · October 25, 2016, 1:29am

Hi,

Thanks for your feedback and using Aspose.Cells.

We will look into this issue further and update you asap.

shakeel.faiz · October 27, 2016, 7:01am

Hi,

Thanks for using Aspose.Cells.

About CSS font-weight, if you open the attachment named “a.html” using Browsers and MS-Excel, you will get the same result as Aspose.Cells output file.

We have tested this issue with the following sample code using the latest version: Aspose.Cells for .NET v16.10.4.0.

I have also attached the output excel file generated by the code for your reference.

C#

HTMLLoadOptions opts = new HTMLLoadOptions(LoadFormat.Html);

Workbook wb = new Workbook(“a.html”, opts);

wb.Worksheets[0].AutoFitColumn(0);

wb.Save(“out.xlsx”);

held1353 · November 2, 2016, 9:59am

Sorry, but your test is flawed, due to the fact that your CSS is not valid CSS. Which basically is my fault; I started mentioning font-weight:regular, which is wrong; this should have been font-weight:normal. Also, your HTML has no and no , though I don’t expect that to negatively affect the test.

Please repeat your test with the following HTML input. You will notice that Excel, as well as every web browser I tried (Chrome, Firefox, IE11, Edge), renders A1 bold, and B1 not bold. The same goes for Aspose 8.9.0.0.

More recent versions of Aspose (including 16.10.8.0) render both cells bold. This is not OK.

<html>

<head>

<title>Test</title>

<style>

th {

font-weight: bold;

text-align: center;

}
<span style="color:maroon;">.myclass</span> {
	<span style="color:red;">font-weight</span>: <span style="color:blue;">normal</span>;
	<span style="color:red;">text-align</span>: <span style="color:blue;">left</span>;
}

</style>

</head>

<body>

<table>

<tr>

<th>

This cell is bold and centered.

</th>

<th class=“myclass”>

This cell is not bold and left-aligned.

</th>

</tr>

</table>

</body>

</html>

babar.raza · November 2, 2016, 11:35pm

Hi Ruud,

Thank you for the clarification. I have retested the scenario with your provided sample HTML snippet, and I am able to notice the difference upon comparing the results with Excel. Based on these observations, I have reopened the previously logged ticket CELLSNET-44786 and have requested the concerned member of the product team to review the case. As soon as we get further updates, we will post here for your kind reference.

shakeel.faiz · November 9, 2016, 12:07am

Hi,

Thanks for using Aspose.Cells.

This is to inform you that we have fixed your issue CELLSNET-44786 now. We will soon provide the fix after performing QA and including other enhancements and fixes.

aspose.notifier · November 11, 2016, 4:56am

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

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

held1353 · November 25, 2016, 10:42am

Sorry for the late reply; I can confirm that the problem appears to be fixed in version 16.11.0.0. Thanks!

amjad.sahi · November 25, 2016, 11:22am

Hi,

Thanks for your feedback.

Good to know that your issue is sorted out by the latest version/fix, we have closed your ticket now. Feel free to contact us any time if you need further help or have some other issue or queries, we will be happy to assist you soon.

Thank you.