New Text component - Simplify, fix styled, support path, etc #5
Description
Currently Text is a partial port of Text from visx, although it might be overkill unless multiline is needed, and currently needs improved to handle styled text, etc (measurement needs to be down offscreen).
I recently learned of alignment-baseline and dominant-baseline which appears to align vertically, although I'm currently uncertain the uses for each (need to read up more) and the browser support in Safari / Firefox compared to Chrome.
I setup a REPL to feel things out, and there is also an observable notebook with more ideas including support for multiline. When testing the notebook in Safari and Firefox, I noticed some differences and unsupported features.
Features
- Horizontal / Vertical aligning (left, center, right)
- Rotate
- Using Safari,
text-anchorordominant-baselinedoesn't appear to affect the transform origin. Settingtransform-origin: centerdoesn't appear to have any affect on Chrome or Safari.
- Using Safari,
- Multiline
- Scale to fit
- Truncate
- Not currently supported by visx either, although some discussion / PRs
- Add vx text truncation airbnb/visx#447
- https://codesandbox.io/s/3v3rn68mj6?file=/src/vxtext/util/getStringWidth.js:0-38
- https://stackoverflow.com/questions/9241315/trimming-text-to-a-given-pixel-width-in-svg/24120935
- Text path
- Truncate based on count, with support for
start,endormiddleellipsis - Background