Hi,
Maybe this is not the correct sub-forum.
I've been trying to set up a baseline grid style and I've faced the problem of mixing, in the same line, different fonts. This results in lines that do not have the specified line-height, but a somewhat larger value depending on some font metrics (the Ascent and Descent values, see, for example, here and the CSS 2.1 spec).
After understanding the problem and also after many tries, I've found that setting "line-height: 0;" in all inline elements works nicely in PrinceXML (although not in browsers), provided that you have set "line-height: <your desired line height>;" on all their containing block elements. But I cannot understand why this solves the problem.
For example, the text:
is rendered by PrinceXML as:
Note that:
Browsers, instead, render this same text as:
which is what I expected in the first instance.
So, how does the line-height property work in PrinceXML? Is that the expected CSS behavior? Can I count on this behavior to be maintained in the future? Are these details stated somewhere in the docs?
Thanks a lot and regards.
Maybe this is not the correct sub-forum.
I've been trying to set up a baseline grid style and I've faced the problem of mixing, in the same line, different fonts. This results in lines that do not have the specified line-height, but a somewhat larger value depending on some font metrics (the Ascent and Descent values, see, for example, here and the CSS 2.1 spec).
After understanding the problem and also after many tries, I've found that setting "line-height: 0;" in all inline elements works nicely in PrinceXML (although not in browsers), provided that you have set "line-height: <your desired line height>;" on all their containing block elements. But I cannot understand why this solves the problem.
For example, the text:
<p style="line-height:16pt;"><span style="line-height:0">Normal <b>bold <i>bold italic </i></b><i>italic </i> <code>code </code> <span style="font-family:sans-serif;">sans serif </span>Lorem ipsum dolor sit amet,... </span></p>
<br><br>
<p style="line-height:16pt;">Normal <b>bold <i>bold italic </i></b><i>italic </i> <code>code </code> <span style="font-family:sans-serif;">sans serif </span>Lorem ipsum dolor sit amet,...</p>
is rendered by PrinceXML as:
Note that:
- The first line of the 2nd paragraph is higher that the others, as it contains various fonts, this amounts for 0.87pt of excess vertical space.
- The 1st paragraph does not show this excess space, the <span style="line-height:0"> fixed that, but the baselines are still 16pt apart because of the <p style="line-height:16pt;">.
Browsers, instead, render this same text as:
which is what I expected in the first instance.
So, how does the line-height property work in PrinceXML? Is that the expected CSS behavior? Can I count on this behavior to be maintained in the future? Are these details stated somewhere in the docs?
Thanks a lot and regards.
Edited by emece