I am sure this has been asked before but I can't quite dig up the exact question that I'm interested in. Often times, in typography, font size and baseline space are denoted as 10/12 or similar, meaning that the type is 10 pt with a baseline spacing of 12 pt.

How does that translate to CSS? For example, mozilla.org suggests to use a notation that seems very similar to the above:

font: 10pt/1.2  Georgia,"Bitstream Charter",serif

However, the line-height property seems to refer to the height of the text box (the line) rather than the spacing of baselines. My question is: how do these two relate to each other?

The font property is a shorthand, so what you have specified is exactly equivalent to setting all of the individual properties:

font-family: Georgia, "Bitstream Charter", serif;
font-weight: normal;
font-style: normal;
font-stretch: normal;
font-variant: normal;
font-size: 10pt;
line-height: 1.2

The height of the line box is equivalent to the spacing of the baselines.

Thanks Mike.

So a typographic notation 10/12 is the same as a font-size of 10pt and a line-height of 12pt, just to make sure

Yep.

I found this interesting article on the subject:

• http://www.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/
• http://www.smashingmagazine.com/2011/03/14/technical-web-typography-guidelines-and-techniques/

Both posts have links to more interesting and related sites

Edited 3 May 2014 by _savage

I still don't quite understand this: if I was to specify 10/12 then this would render 10pt character sizes on baselines spaced 12pt. In CSS, however, I can only specify a line height (in this example 12pt) and a character size of 10pt, but it does not specify within that line height the baseline runs.

Or what am I missing here?

It guarantees that the baselines will be on a 12pt grid, spaced 12pt apart, but it does not specify the exact location of the first baseline in the block.

I think the above needs a little clarification. The 10/12 declaration from the example specifies a line-height grid, it does not seem to specify a baseline grid. I think that by using the same typeface in the same height the line-height grid implies a baseline grid, but it doesn’t explicitly define one.

Things become difficult when I would like to work with an actual baseline grid on my page. Trying to align different sizes or, even more difficult: different typefaces, on the same baseline grid just doesn’t work in CSS when there is no notion of a typeface’s baseline in the first place.

For example, I can’t seem to put a 14pt baseline grid on my page, and then align text and headers on that same baseline grid when they are of different sizes and typefaces.

Or can I?

Edited 25 Aug 2014 by _savage

It's being worked on by the CSS Working Group:

http://dev.w3.org/csswg/css-line-grid/

If you're really brave, this describes how CSS deals with inline formatting, and why the line-height might not behave the way you expect:

http://meyerweb.com/eric/css/inline-format.html

Thank you, the CSS proposal looks like it addresses my head-scratchings

Mike, are these features on the event horizon for Prince?

We do have plans for baseline alignment features, yes.

Good news, Mike May I ask if there's already a timeline or Prince version that might implement this?

Edited 28 Aug 2014 by _savage

If you check other issues on the forum, you will find that my timeline predictions have been extremely optimistic. So I am reluctant to make predictions at this point. Usually by the time we know how long it is going to take, we have finished doing it.

Schnufte, very much looking forward to the feature! (And the margin kerning, and new spelling, and the rest of the endless list of goodness...)

I have seen the latest working CSS draft here

http://dev.w3.org/csswg/css-line-grid/

and it would be just wonderful if Prince could implement those 'line-grid', 'line-snap' and 'box-snap' properties.
We are very much in doing printed books with XHTML/CSS and those of the line grid and the bottom aligment of lines are the main issues so far, if you compare the results with what you achieve with the usual InDesign workflow.

Is there any news about this? Are you guys already working on this?

All the best!!

We are planning on this, yes. Please email me (mikeday@yeslogic.com) if you are interested in testing upcoming builds.

For headings, it's common to choose heading sizes & spacing such that things usually work out as a whole number of lines without further help. In CSS, some relevant properties are line-height, margin and padding. Some cases to keep in mind are long headings that fill more than one line, and headings that happen to fall at the top of a page (without being forced there with page-break-before), which are usually pushed to the top of the page. (In CSS, the margin-top is treated as zero in this situation.) So consider making margin-top be a whole number of body-text lines (supplementing with padding-top if necessary) for the case that it happens to fall at the top of a page, and consider making the heading's line-height equal or be some other multiple of the body text's line-height for the case that the heading fills more than one line. When a whole number of lines isn't practical for the design, there's still some value in using simple fractions like half a line or 1.5 lines.

The 'line-stacking-strategy' property (http://www.w3.org/TR/css3-linebox/#line-stacking-strategy) might be useful for some of these needs, though I don't have experience with that.

@pablonolla: Do you have examples of what you're trying to achieve, perhaps a pdf you've previously done with InDesign? I'm trying to work out what order to work on things.

Any updates on the baseline grid features or the aforementioned CSS line grid in Prince 10? Just asking...

Not in Prince 10, but it's still on the roadmap, and we'll get there.

hello,

a page wide baseline grid is definitely a must have to take the next step towards high quality print PDF documents.
is this a feature, that you are actively working on? if so, can we support you in any way with it, like testing?

greetings,
John

The CSS Working Group is pursuing various alternatives to help with baseline-grid. Stay tuned!

Hello dauwhe,

yeah, as _savage mentioned, the draft can be found here: http://dev.w3.org/csswg/css-line-grid/. But does this mean, that it will still take a while until Prince will adopt this feature?

For this reason I have been asking, if it is already in development or if they are waiting for the draft to be more or less final/stable.

John

Edited 8 Jun 2016 by John

Yes it will still take a while I'm afraid, other developments have taken more of our time. We hope to release Prince 11 before the end of the year, then we may be able to look further ahead.

All right, thanks for the info

Pleased to see your progress. Happy that we can do SO much already. Keep on working.

Jim Albright
Wycliffe Bible Translators

There are two possibly competing proposals in CSS right now. In addition to the CSS line grid mentioned above, there's a CSS step sizing proposal https://drafts.csswg.org/css-step-sizing/. Some of us think there may be other options; hopefully there will be another proposal in a month or two.