How to absolutely position the baseline of text in HTML
css, html
Solution
Hacky solution based on this blog post.
HTML:
<body>
<div id="text">css=powerful</div>
</body>
CSS:
body {
margin: 0;
}
#text {
font-size: 30px;
line-height: 0px;
margin-left: 100px;
}
#text:after {
content: "";
display: inline-block;
height: 120px;
}
JsFiddle. The basepoint is aligned to (100, 120).
Problem
I'm puzzled by the following problem. I wish to (absolutely) position the baseline of some piece of HTML text at a certain y-coordinate, while the text should be starting at a certain x-coordinate. The following diagram clearly demonstrates the issue. So I basically want to control where the point (x,y), henceforth called the "basepoint", in the diagram is located on the screen, relative to the top-left corner of the BODY of the document or some DIV. Important: I don't know beforehand what the font-family or font-size of the text is. This is important, because I don't want to change all the positions in my CSS whenever I change fonts. In the following code, I try to position the basepoint at (200,100), but instead it positions the top-left of the DIV at that point. ``` <html> <style> BODY { position: absolute; margin: 0px; } #text { position: absolute; top: 100px; left: 200px; font-family: helvetica, arial; /* may vary */ font-size: 80px; /* may vary */ } </style> <body> <div id="text">css=powerful</div> </body> </html> ``` So how should I modify this code? Should I use the vertical-align property of the enclosing DIV? (I tried, but couldn't get the desired result). Thanks for any useful replies.