ARTICLE AD BOX
i suspect this will be an unusual issue. i have a use-case where i need to be able to find the exact dimensions (height in particular) of each character as it is displayed. line-height and bounding boxes only give the size including whitespace but what i need is the size of the glyph itself.
here’s the background.
my use-case requires text to be able to be displayed horizontally or vertically. horizontally is easy because that’s what text display is expected to be in browsers and line-height aligns everything correctly.
when switching to vertical, however, a fixed line-height gives uneven spacing between letters. there is no out-of-the-box way to space letters evenly so the obvious solution is to strip them of their whitespace and add equal gaps between them vertically. to do that, however, means finding exactly how tall they are and ensuring they have no extra padding.
in other words, a word needs to be able to be displayed like
this
and like
t
h
i
s
interchangeably on the screen.
of course, this needs to be functional cross-browser (safari, chrome, edge) but i’m open to options on how to make it function. the text itself can change both in content and in font/size on the fly so any solution needs to be able to start from existing text without knowing the rest in advance.
thanks!
