News for hackers. Stuff that matters.
Re:Aligning Text Smartly in CSS by amelius on Thursday April 07, 2016 @05:23AM (#11445912)
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...

Re:Aligning Text Smartly in CSS by talmand on Thursday April 07, 2016 @11:06AM (#11447811)
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.

Re:Aligning Text Smartly in CSS by at-fates-hands on Thursday April 07, 2016 @10:14AM (#11447384)
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.

Re:Aligning Text Smartly in CSS by amelius on Thursday April 07, 2016 @10:44AM (#11447633)
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.

Re:Aligning Text Smartly in CSS by mariusasdf on Thursday April 07, 2016 @12:47PM (#11448693)
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.)