Forum How do I...?

Exact y-positioning of text

twantzen
Hello together,

I want to start the versal height of the headline precisely at 18 mm from top. With this CSS:
@page {
    size: 210mm 297mm;
    margin: 18mm 18mm 17mm 18mm;
}
[...]
h1 {
	font-size: 30pt;
	line-height: 36pt;
}
h1::first-line {
	background-color: cmyk(0,0,0,0);
}


I get 21.25 mm (see screenshot attached).

How can I achieve this properly without changing line-height of h1 and without changing the @page margins?

Thanks
Tobias
  1. screenshot.png261.0 kB
mikeday
Perhaps you could add a few mm of negative margin-top to the h1?
twantzen
Thanks, Mike. This works. Can you explain, please, why the position of the first line of text does depend on the line-height?

Tobias
mikeday
It's a complicated topic In your example you measure 21.25mm to the top of the F, but the dot of the lowercase i and the lowercase l rise above this, and there may be much taller glyphs in the font like braces or the integral or square root sign. Normally people want to specify the vertical position of the first baseline of text, but unfortunately CSS makes this a bit tricky also.
twantzen
And what’s the best way to specify the first baseline of text? This does depend on what font-size (<p> or <h1> or ...) is at the top of the page ...