layerchart

layerchart copied to clipboard

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.
• [ ] 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/
  • Canvas
    • https://observablehq.com/@esperanc/text-along-a-bezier-curve
    • https://stackoverflow.com/questions/8974364/how-can-i-draw-a-text-along-arc-path-with-html-5-canvas
• [ ] Truncate based on count, with support for start, end or middle 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
  • SVG text with rect backgrounds
  • SVG text solid background -

Would be nice if HtmlText or similar was available with similar features/api (rotate, truncate, etc). Some features like text path would not be possible though.