4 ms·

Stop trying to enforce pixel perfect control. This is equivalent to old school Win32, VB6 GUIs with hardcoded pixel positioning of all controls designed to work

Stop trying to enforce pixel perfect control. This is equivalent to old school Win32, VB6 GUIs with hardcoded pixel positioning of all controls designed to work on a 640x480 screen. Web technologies are designed to accommodate flexible layout. Accepting font rendering differences is part of that.

bufferoverflow 4y ago
It's not even about being pixel perfect. I can't vertically align text with an image. If I align it with one font, the other one is misaligned. I need something like media query for fonts.
- kevin_thibedeau 4y ago
  You just need flexbox or construct an SVG. Let the divs size themselves to the font and allow the browser to put them where they're told to go.
  - bufferoverflow 4y ago
    I don't see how flexbox solves this problem. Just because you vertically center text, doesn't mean that the visible text is actually centered. It depends on the font.
  - bufferoverflow 4y ago
    Here's an example: https://jsfiddle.net/a3q87ucs/ https://jsfiddle.net/a3q87ucs/
- saadat 4y ago
  The CSS property leading-trim [1][2] is designed to solve this alignment problem (among others). However, it's still at the Working Draft stage, so it's going to take a while before browsers start supporting it. [1]: https://www.w3.org/TR/css-inline-3/#leading-trim https://www.w3.org/TR/css-inline-3/#leading-trim [2]: https://medium.com/microsoft-design/leading-trim-the-future-of-digital-typesetting-d082d84b202 https://medium.com/microsoft-design/leading-trim-the-future-...
jsjohnst 4y ago
> Stop trying to enforce pixel perfect control. Not the least of which because of text size zooming for accessibility. The web is not print!
tshaddox 4y ago
It’s not as petty as you make it sound. You don’t have to pixel peep to spot the differences. Switching to a different font can break basic stuff like text in a button being vertically centered, which can look broken or amateurish to normal site visitors.
- blep_ 4y ago
  Only if you're doing centering by hardcoded pixel offsets. Stop doing that.
  - thundermuffin 4y ago
    You can still have this problem apply even if you are using flex and aligning items to the center. If a font has some weird characteristic about it (for instance, the font itself has built in whitespace at the bottom or top of letters), you will not be able to center it vertically no matter what CSS magic you try to do except for doing some kind of translation on it; that translation doesn't have to be pixel-based either, but it will 100% have to happen until hopefully when the leading-trim property that saadat mentioned is widely available.
  - bufferoverflow 4y ago
    I don't think you understand the problem. Here, try to align these without changing individual p's CSS: https://jsfiddle.net/a3q87ucs/ https://jsfiddle.net/a3q87ucs/ You see how the second text is lower. That has to do with internal font settings that CSS has no control of. Not yet at least.
    - Hello71 4y ago
      this only looks terrible because you've forced a specific height in rem. https://jsfiddle.net/vbd3fok5/ https://jsfiddle.net/vbd3fok5/ looks fine to me. there is some extra space, but I assume that if the font designer added extra space on top of the text, they did it on purpose. if you insist on ignoring that, https://jsfiddle.net/qpb0d45n/ https://jsfiddle.net/qpb0d45n/ makes the text "visually continuous", at least for a non-Korean reader like myself. I would speculate that a Korean user might look at this and ask why the site designer ignored their font's preference for space above the text.

bufferoverflow 4y ago

It's not even about being pixel perfect. I can't vertically align text with an image. If I align it with one font, the other one is misaligned. I need something like media query for fonts.

kevin_thibedeau 4y ago
You just need flexbox or construct an SVG. Let the divs size themselves to the font and allow the browser to put them where they're told to go.
- bufferoverflow 4y ago
  I don't see how flexbox solves this problem. Just because you vertically center text, doesn't mean that the visible text is actually centered. It depends on the font.
- bufferoverflow 4y ago
  Here's an example: https://jsfiddle.net/a3q87ucs/ https://jsfiddle.net/a3q87ucs/
saadat 4y ago
The CSS property leading-trim [1][2] is designed to solve this alignment problem (among others). However, it's still at the Working Draft stage, so it's going to take a while before browsers start supporting it. [1]: https://www.w3.org/TR/css-inline-3/#leading-trim https://www.w3.org/TR/css-inline-3/#leading-trim [2]: https://medium.com/microsoft-design/leading-trim-the-future-of-digital-typesetting-d082d84b202 https://medium.com/microsoft-design/leading-trim-the-future-...

jsjohnst 4y ago

> Stop trying to enforce pixel perfect control. Not the least of which because of text size zooming for accessibility. The web is not print!

tshaddox 4y ago

It’s not as petty as you make it sound. You don’t have to pixel peep to spot the differences. Switching to a different font can break basic stuff like text in a button being vertically centered, which can look broken or amateurish to normal site visitors.

blep_ 4y ago
Only if you're doing centering by hardcoded pixel offsets. Stop doing that.
- thundermuffin 4y ago
  You can still have this problem apply even if you are using flex and aligning items to the center. If a font has some weird characteristic about it (for instance, the font itself has built in whitespace at the bottom or top of letters), you will not be able to center it vertically no matter what CSS magic you try to do except for doing some kind of translation on it; that translation doesn't have to be pixel-based either, but it will 100% have to happen until hopefully when the leading-trim property that saadat mentioned is widely available.
- bufferoverflow 4y ago
  I don't think you understand the problem. Here, try to align these without changing individual p's CSS: https://jsfiddle.net/a3q87ucs/ https://jsfiddle.net/a3q87ucs/ You see how the second text is lower. That has to do with internal font settings that CSS has no control of. Not yet at least.
  - Hello71 4y ago
    this only looks terrible because you've forced a specific height in rem. https://jsfiddle.net/vbd3fok5/ https://jsfiddle.net/vbd3fok5/ looks fine to me. there is some extra space, but I assume that if the font designer added extra space on top of the text, they did it on purpose. if you insist on ignoring that, https://jsfiddle.net/qpb0d45n/ https://jsfiddle.net/qpb0d45n/ makes the text "visually continuous", at least for a non-Korean reader like myself. I would speculate that a Korean user might look at this and ask why the site designer ignored their font's preference for space above the text.