4 ms·

Only if you're doing centering by hardcoded pixel offsets. Stop doing that.

by blep_ 4y ago

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
    > https://jsfiddle.net/vbd3fok5/ https://jsfiddle.net/vbd3fok5/ looks fine to me No, it doesn't. Here's the screenshot with a line I added: https://i.imgur.com/6pLiasn.png https://i.imgur.com/6pLiasn.png > if you insist on ignoring that, https://jsfiddle.net/qpb0d45n/ https://jsfiddle.net/qpb0d45n/ And now you have blocks of different heights. Which cause other issues.

Only if you're doing centering by hardcoded pixel offsets. Stop doing that.

by blep_ 4y ago

Only if you're doing centering by hardcoded pixel offsets. Stop doing that.

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
  > https://jsfiddle.net/vbd3fok5/ https://jsfiddle.net/vbd3fok5/ looks fine to me No, it doesn't. Here's the screenshot with a line I added: https://i.imgur.com/6pLiasn.png https://i.imgur.com/6pLiasn.png > if you insist on ignoring that, https://jsfiddle.net/qpb0d45n/ https://jsfiddle.net/qpb0d45n/ And now you have blocks of different heights. Which cause other issues.