3 ms·

Sure, if you put things too close together they will intersect/overlap. This isn't an inherent problem of the technique though. You should be giving things eno

by n0w 5y ago

Sure, if you put things too close together they will intersect/overlap. This isn't an inherent problem of the technique though. You should be giving things enough space so that this kind of thing doesn't happen. It should be pretty simple to check that the smallest unit of space used anywhere isn't smaller than the amount being trimmed from the top/bottom of the text box.

lelandfe 5y ago
This is trading typographical consistency issues, then. In this described setup, you'll have glyphs poking into the margin and padding between elements – which is what the existing bounding boxes work to prevent. Here's an editable interface from that talk: https://seek-oss.github.io/braid-design-system/playroom/#?code=N4Igxg9gJgpiBcIA8BhAhgJygPgDoDsACQpAZQBc0wBrQgZwAcqYBeXEADy7oFs0AbfuzxFiJACowO5bAAkYgiIQDuEDPyhIA9JOkixEqTMBUcIHI4QIxwxwChwgVjhAUHCAmOFOAhOECkcIEA4bbpkFi2ilTUItroWCIgAL5AA https://seek-oss.github.io/braid-design-system/playroom/#?co... You can see the issues when we write Hello World in Thai: https://i.imgur.com/MaHfPr3.png https://i.imgur.com/MaHfPr3.png
- tshaddox 5y ago
  You're wrapping your two Text components with a Stack component which lays out its children vertically, and you're explicitly specifying that Stack uses zero space between each of its children. This doesn't have anything to do with Thai characters specifically. The glyphs already overlap with common English characters like "j" and punctuation like commas. Moreover, you can get glyphs to overlap between two lines of a normal HTML element with line-height: 1 (and obviously even more easily with line-height less than 1).
tshaddox 5y ago
> It should be pretty simple to check that the smallest unit of space used anywhere isn't smaller than the amount being trimmed from the top/bottom of the text box. It might be worth doing that, but note that there is still no guarantee of any reasonable upper bound on the vertical dimensions text will render within. Zalgo text is a famous example that very clearly illustrates this state of affairs [0]. The fact is that no current web design can guarantee that no text glyphs will overlap, short of using some non-standard font that prevents it, or perhaps by greatly restricting the usable Unicode characters. [0] https://en.wikipedia.org/wiki/Zalgo_text https://en.wikipedia.org/wiki/Zalgo_text

by n0w 5y ago

lelandfe 5y ago

This is trading typographical consistency issues, then. In this described setup, you'll have glyphs poking into the margin and padding between elements – which is what the existing bounding boxes work to prevent. Here's an editable interface from that talk: https://seek-oss.github.io/braid-design-system/playroom/#?code=N4Igxg9gJgpiBcIA8BhAhgJygPgDoDsACQpAZQBc0wBrQgZwAcqYBeXEADy7oFs0AbfuzxFiJACowO5bAAkYgiIQDuEDPyhIA9JOkixEqTMBUcIHI4QIxwxwChwgVjhAUHCAmOFOAhOECkcIEA4bbpkFi2ilTUItroWCIgAL5AA https://seek-oss.github.io/braid-design-system/playroom/#?co... You can see the issues when we write Hello World in Thai: https://i.imgur.com/MaHfPr3.png https://i.imgur.com/MaHfPr3.png

tshaddox 5y ago
You're wrapping your two Text components with a Stack component which lays out its children vertically, and you're explicitly specifying that Stack uses zero space between each of its children. This doesn't have anything to do with Thai characters specifically. The glyphs already overlap with common English characters like "j" and punctuation like commas. Moreover, you can get glyphs to overlap between two lines of a normal HTML element with line-height: 1 (and obviously even more easily with line-height less than 1).

tshaddox 5y ago

> It should be pretty simple to check that the smallest unit of space used anywhere isn't smaller than the amount being trimmed from the top/bottom of the text box. It might be worth doing that, but note that there is still no guarantee of any reasonable upper bound on the vertical dimensions text will render within. Zalgo text is a famous example that very clearly illustrates this state of affairs [0]. The fact is that no current web design can guarantee that no text glyphs will overlap, short of using some non-standard font that prevents it, or perhaps by greatly restricting the usable Unicode characters. [0] https://en.wikipedia.org/wiki/Zalgo_text https://en.wikipedia.org/wiki/Zalgo_text