[HN Gopher] The strangely difficult problem of drawing a box aro...
___________________________________________________________________
The strangely difficult problem of drawing a box around text
Author : pyrolistical
Score : 24 points
Date : 2021-10-25 16:56 UTC (6 hours ago)
(HTM) web link (blog.battlefy.com)
(TXT) w3m dump (blog.battlefy.com)
| bena wrote:
| I think this is more along the lines of redefining the bounds of
| text.
|
| Because even in his demo, you can see where he's not
| encapsulating all of the text space. The comma is cut. As would
| be any letter with a descender. Also any letter with an ascender
| or capital letter with a diacritic mark.
|
| Also, he has some space before the first "B", but not after the
| last "x". Why doe the first letter get leading space but the last
| not get an equal amount of trailing space? Or is the kerning of
| the letters just concerned with leading space?
| tshaddox wrote:
| For the web, I use Capsize to eliminate the extra vertical space.
| It's a huge hack, but it does seem to work well across modern
| browsers, and it certainly makes dealing with web design layouts
| a lot easier.
|
| https://seek-oss.github.io/capsize/
| Buttons840 wrote:
| This didn't even get into accents (I think they're called?)
| stacked to the moon:
|
| .
|
| L[?]i[?][?][?][?][?][?]k[?][?][?][?][?]e[?][?][?][?][?]
| [?][?][?][?][?]t[?][?]h[?]i[?][?][?][?][?]s[?]
|
| .
|
| Draw a box around this. Oh, and they're called diacritic marks.
| [deleted]
| formerly_proven wrote:
| When you put stuff like this in a JS alert() it just plainly
| clips out of the dialog box (at least in Firefox).
| reidjs wrote:
| The more valuable article linked from this article:
| https://iamvdo.me/en/blog/css-font-metrics-line-height-and-v...
| Puts wrote:
| Small caps are actually a solution to the problem of otherwise
| uneven proportions created by capital letters only occupying the
| upper half of the letters body and a good way of creating a
| "boxy" layout with text.
|
| Here's an example https://jsfiddle.net/y4uk07jL/1/
|
| If you want the box exactly like the author in the blog post
| (don't really know why anyone would want that?) you can do that
| by adjusting the line-height.
|
| I can recommend Ellen Luptons book Thinking with type. Turns out
| some typographic problems was actually solved long before CSS and
| even computers. :)
| tpmx wrote:
| This is primarily a recruitment ad. The poster has a uniform
| record of submitting similar stuff from this particular domain.
| rtomanek wrote:
| This is about CSS.
| mjevans wrote:
| It is also about pixel-perfect madness. Please just don't. Make
| things that scale, make things that adjust, and tolerate end
| users that have different fonts and size preferences.
| tudorw wrote:
| quite, we've been travelling backwards in accessibility terms
| for a while.
| AshleysBrain wrote:
| Unfortunately the HTML spec hasn't yet clearly defined how
| TextMetrics work, so you can end up with different text alignment
| and measurements between browsers. See this spec issue:
| https://github.com/whatwg/html/issues/6731
| DantesKite wrote:
| It's not just restricted to CSS either.
|
| I made an app that lets you highlight quotes on Apple devices and
| it was such a pain building it in Swift. Just highlighting so it
| would look absolutely beautiful took about a month (it was also
| my first time learning the language). I had to dig deep down into
| the way fonts worked. CGRect became my best friend.
|
| Fun project, but there's a reason why you don't see a lot of apps
| replicating Medium.com's highlighting feature. I also believe
| it's why highlighting text on iOS devices breaks every couple of
| months.
|
| It's literally built a top a mountain of chewing gum and sticks
| holding it together. It's a mess.
| Taniwha wrote:
| So I used to design graphic accelerators for Mac video cards, I
| made (among other things) cool hardware to speed up font
| rendering. While some of the stuff I did was great the font
| rendering was underwhelming, especially on the high end apps we
| were targeting ... I dug into what they were doing ....
|
| Pagemaker - invalidated the font cache at the drop of a hat,
| spent all its time rebuilding it.
|
| But Quark express was the hard one - it spent all its time
| multiplying (which was slowish on 680x0s) - turns out it used
| Adobe Type Manager (ATM) to render text and they had solved some
| pixel cruft problems by adding 2 spaces to the end of every
| string they rendered and clipping it to the desired space .... in
| other word they drew a box around it ... ATM solved this problem
| (clipping) by laying out a line (all those multiplications) and
| if it didn't fit it would split the line in two and try again -
| because of those 2 clipped spaces this resulted in N squared/2
| behaviour (24 char text would do 24->12 12-> 6 6-> 3 3-> 2 1) and
| as a result the code spent all its time laying out the text over
| and over again and comparatively none actually drawing
|
| So don't do that
___________________________________________________________________
(page generated 2021-10-25 23:01 UTC)