2 ms·

This is trading typographical consistency issues, then. In this described setup, you'll have glyphs poking into the margin and padding between elements – which

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).