Forum Bugs

Text alignment problem in table header


I think I found a bug in Prince XML 7.0.

I create a table where the first row is a header specified as <tr align="left">

In Opera or Firefox, the header text is left-aligned as I would expect.

In Prince XML, the header text is centered.

Is this a bug or did I overlook something?

Complete HTML file below.

Thank you for your help.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "">
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<table style="width: 100%;" border="1" cellpadding="2" cellspacing="2">
<tr align="left">
<td>text text text text text text text text text text text text </td>
<td>text text text text text text text text text </td>
This is because the Prince default style sheet for HTML applies "text-align: center" to <th> elements, and this is overriding the inherited alignment from the <tr> element. There are several ways to fix this:

- move the align="left" attribute to the <th> elements

- use CSS to inherit the alignment: th { text-align: inherit }

- specify an explicit alignment: th { text-align: left }

Thank you for your answser.

When I had noticed the problem, I had moved the alignment directive from <tr> to <th> (as in your first suggestion).

But I am still a bit confused about what shoud the result be in a standard-conforming way.

It is confusing that printing with Prince is different that printing with Firefox/Opera.

What is true?
1) My code is not standards compliant
2) My code is standards compliant and standards allows multiple interpretations
3) Firefox/Opera are wrong
4) Prince is wrong
5) Other?

Best regards

Marc-Etienne Vargenau
Prince is wrong. The relevant spec is HTML 4.01, section 11.3.2: Tables, Horizontal and vertical alignment. The align attribute specified on the <tr> should be "inherited" by the <th> given that no other align attribute intervenes.

The reason I put "inherited" in quotes is that this inheritance concept relates to HTML attributes, and is entirely different to the concept of inheritance in CSS, which applies to CSS properties like text-align, which is similar but not identical to the HTML align attribute. There is an awkward mismatch here, where the HTML and CSS table models are slightly different, and Prince doesn't yet implement all of the HTML-specific features, although we try. Usually switching to CSS will result in the desired layout rendering identically in Prince and the browsers.

Historically, browsers implemented HTML first, and later added CSS on top. Prince was developed later, more or less the other way around, with CSS being the foundation and HTML-specific rules and attributes added on top. However, compatibility with browsers is definitely a priority for us as it makes life much easier for everyone, so I'll add this HTML alignment issue to our development roadmap and see if we can sort it out in a future release.

Sorry for the length of this response, but I wanted to let you know where we stand, why things are the way they are, and what we plan to do about it. :)
Thank you very much for your detailed answser.
It confirms what I thought.
I hope you can fix it, I have a number of documents that depend on that.

Best regards,

Marc-Etienne Vargenau
A quick fix is to add this CSS rule to your style sheets, or even paste it in to one of the Prince default style sheets if you're feeling bold:
tr[align="left"] > th:not([align]) { text-align: left }
tr[align="right"] > th:not([align]) { text-align: right }

This should propagate the alignment from table rows to <th> elements that don't have an align attribute themselves. It isn't necessary to do this for <td> elements, as they have no specified alignment in the default style sheets.
Works great.

Thank you very much.

Best regards,

Marc-Etienne Vargenau
These rules have been added to the HTML style sheets in Prince 7.0, so things should work correctly by default now.
Thank you.

Great news that 7.0 is out.

I am using PRINCE version 8, but still I am facing alignment issue while creating PDF.
The alignment moves towards right side.

So is there a way to handle this from code ? or else we need to change huge HTML templates.
Please post a short example of your HTML/CSS, perhaps in a new topic, since it is not related to the align attribute on <tr> elements.