Hacker News new | ask | show | jobs
by amelius 3729 days ago
I'm still wondering if anybody has an elegant solution to this (seemingly simple) text positioning problem:

http://stackoverflow.com/questions/20443220/how-to-absolutel...

3 comments

There's no easy solution to this. Mainly because CSS barely knows what a baseline is and there's very little in CSS that affects the baseline or something to that effect. What we call baseline can vary from font-to-font, browser-to-browser, platform-to-platform; all affecting how the font gets rendered.

Plus, based on the description and requirements of the problem it's likely to not be solved because the font-size is an unknown variable in the equation. If it was known how the font-size is determined and applied then maybe something could be leveraged to adjust for the problem.

The easy solution, knowing the font size, is to position a parent element at the coordinate and then move a child element containing the text upward an amount based on the font-size. That way the first line of text in the child element sits on the top line of the parent element, more or less. But we don't know the font-size and it is easily broken if the site is constantly being changed code-wise. In fact, a badly thought out line-height may break it as well.

I'm puzzled to try and figure out when and where you would need to do something like this. OP notes, "This is important, because I don't want to change all the positions in my CSS whenever I change fonts."

Which leads me to ask how frequently and where he's changing his fonts. My design specs are usually pretty simple and consistent and would never require something like this.

Well, sometimes the UX designer wants to change all the fonts in the interface at once (perhaps to a slightly different font). It is cumbersome to have to reposition all the texts in those cases, because many fonts have their baselines defined in a different way.

At other times, we may want the user to define/select the font, and keep the baselines at the same position.

It's possible using nested elements and transform: translate(0, -100%) on the inner element. It's elegant enough for CSS, I suppose. (I'd make an example if I wasn't on my mobile atm.)