4 ms·

A designer once advised me to align an icon with the "typographical center of gravity" - as in, of the "ink". This would make the location of an icon next to te

A designer once advised me to align an icon with the "typographical center of gravity" - as in, of the "ink". This would make the location of an icon next to text depend on the text itself, not just the font. Obviously, we compromised in practice :)

jrmg 2y ago
That’s actually arguably the source of the problem in a lot of these examples. In some of them, the bad alignment would look good if the text next to it contained more descenders. This could be compensated for, of course. For e.g. a single checkbox and text, move the text a bit lower if there are no descenders in it. But that doesn’t work if the text is user input, or if there are multiple text boxes in a list: it’s noticeable (and unpleasant) if the baselines of the text are in different places next to their individual checkboxes if - even if they’d all individually look best in that alignment viewed alone. And if the text is editable, it’s even worse. No-one wants their text to be jumping up and down while editing to maintain optical alignment. The problem gets even worse if you have mixed language support, and the text might be in languages with ‘tall’ characters (Thai, Arabic, sometimes Vietnamese - and a long list of others) or a different idea of ‘line height’. Compromises must be made, unfortunately. Of course, that doesn’t excuse a lot of the examples here, which are of specific designs - but it does mean that a lot more ‘design’ time is required, especially if there are multiple localisations, than feels at-all intuitive to anyone who has not done this.
- BlueFalconHD 2y ago
  Text based layouts should come back. Search "TextOS" on twitter for examples. If someone finds it, post a link below (responding on a Kindle Paperwhite, twitter won't run)
  - avandekleut 2y ago
    I had no idea hacker news was available on kindle paperwhite. I have one with the 3G networking and experimental browser. Is that what youre using?
    - echoangle 2y ago
      There’s a browser on any normal Kindle, I think. At least clicking links on my unmodified kindle opens the websites.
- bee_rider 2y ago
  > And if the text is editable, it’s even worse. No-one wants their text to be jumping up and down while editing to maintain optical alignment. I actually kinda want to see this just once. I think it would be terrible but I’m not convinced enough to write it off entirely.
- zeteo 2y ago
  Agreed about Vietnamese, which brings up another issue: diacritics. A word or phrase that is heavy on uppercase with diacritics ("BÁNH CUỐN") will look quite different in the vertical plane from one with a lot of descenders ("eggnog"). Even for developers who don't worry about Vietnamese, it is quite common in North America to require support for Spanish and/or French, which can also feature a lot of words with diacritics: "¿Ándale, vamos?"
lelanthran 2y ago
For most designs, the visual centre is different to the geometrically accurate center: https://www.lelanthran.com/chap8/content.html https://www.lelanthran.com/chap8/content.html Mostly, you want to visually nudge things in one direction of the other until it "looks correct".
mmis1000 2y ago
It's technically possible (although infeasible) with current web api though. You can draw texts to canvas, sample it, get the pixel value and find the true center yourself. But web also never guarantee that text on canvas is as the same as the one you see visually, so you can only find it out one by one.
- aldousd666 2y ago
  You can draw a whole span or div that is invisible with fonts in it and everything off screen measure it. Delete it or then show it or move it or whatever. But I've done this before with JavaScript.
  - mmis1000 2y ago
    That don't work for font that have bounding box disconnected to visual. Like the article just mentioned. Thus you need canvas if you absolutely need to figure out how bad is the bounding box of given font. Because it's the only way to get pixels in js.

jrmg 2y ago

That’s actually arguably the source of the problem in a lot of these examples. In some of them, the bad alignment would look good if the text next to it contained more descenders. This could be compensated for, of course. For e.g. a single checkbox and text, move the text a bit lower if there are no descenders in it. But that doesn’t work if the text is user input, or if there are multiple text boxes in a list: it’s noticeable (and unpleasant) if the baselines of the text are in different places next to their individual checkboxes if - even if they’d all individually look best in that alignment viewed alone. And if the text is editable, it’s even worse. No-one wants their text to be jumping up and down while editing to maintain optical alignment. The problem gets even worse if you have mixed language support, and the text might be in languages with ‘tall’ characters (Thai, Arabic, sometimes Vietnamese - and a long list of others) or a different idea of ‘line height’. Compromises must be made, unfortunately. Of course, that doesn’t excuse a lot of the examples here, which are of specific designs - but it does mean that a lot more ‘design’ time is required, especially if there are multiple localisations, than feels at-all intuitive to anyone who has not done this.

BlueFalconHD 2y ago
Text based layouts should come back. Search "TextOS" on twitter for examples. If someone finds it, post a link below (responding on a Kindle Paperwhite, twitter won't run)
- avandekleut 2y ago
  I had no idea hacker news was available on kindle paperwhite. I have one with the 3G networking and experimental browser. Is that what youre using?
  - echoangle 2y ago
    There’s a browser on any normal Kindle, I think. At least clicking links on my unmodified kindle opens the websites.
bee_rider 2y ago
> And if the text is editable, it’s even worse. No-one wants their text to be jumping up and down while editing to maintain optical alignment. I actually kinda want to see this just once. I think it would be terrible but I’m not convinced enough to write it off entirely.
zeteo 2y ago
Agreed about Vietnamese, which brings up another issue: diacritics. A word or phrase that is heavy on uppercase with diacritics ("BÁNH CUỐN") will look quite different in the vertical plane from one with a lot of descenders ("eggnog"). Even for developers who don't worry about Vietnamese, it is quite common in North America to require support for Spanish and/or French, which can also feature a lot of words with diacritics: "¿Ándale, vamos?"

lelanthran 2y ago

For most designs, the visual centre is different to the geometrically accurate center: https://www.lelanthran.com/chap8/content.html https://www.lelanthran.com/chap8/content.html Mostly, you want to visually nudge things in one direction of the other until it "looks correct".

mmis1000 2y ago

It's technically possible (although infeasible) with current web api though. You can draw texts to canvas, sample it, get the pixel value and find the true center yourself. But web also never guarantee that text on canvas is as the same as the one you see visually, so you can only find it out one by one.

aldousd666 2y ago
You can draw a whole span or div that is invisible with fonts in it and everything off screen measure it. Delete it or then show it or move it or whatever. But I've done this before with JavaScript.
- mmis1000 2y ago
  That don't work for font that have bounding box disconnected to visual. Like the article just mentioned. Thus you need canvas if you absolutely need to figure out how bad is the bounding box of given font. Because it's the only way to get pixels in js.