layerchart
layerchart copied to clipboard
New Text component - Simplify, fix styled, support path, etc
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-anchor or dominant-baseline doesn't appear to affect the transform origin. Setting
transform-origin: center
doesn't appear to have any affect on Chrome or Safari.
- Using Safari, text-anchor or dominant-baseline doesn't appear to affect the transform origin. Setting
- [ ] Multiline
- [ ] Scale to fit
- [ ] Truncate
- Not currently supported by visx either, although some discussion / PRs
- https://github.com/airbnb/visx/pull/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
- https://svelte.dev/repl/0df811677d6641f99a7e07ad2e54ea2f?version=3.48.0
- https://observablehq.com/@jwolondon/curved-text-mark
- https://github.com/techniq/layerchart/issues/7
- Curved Text Mark
- https://d3og.com/mbostock/2565344/
- [ ] Truncate based on count, with support for
start
,end
ormiddle
ellipsis- https://svelte.dev/repl/71a447f941034923b47965c302b368d3?version=3.48.0
- https://svelte.dev/repl/7db6b074292842468eeda380d16106da?version=3.48.0
- https://svelte.dev/repl/28f1898c9aab465ba9c9a897bc41285d?version=3.48.0
- [ ] Background