visx
visx copied to clipboard
airbnb
feat(annotation): consider using <foreignObject> for text layout
From https://github.com/airbnb/visx/pull/1127#issuecomment-818538418
@williaster reading the discussion/problem statements here, I wonder if using <foreignObject> with HTML elements would help/simplify in some way? Could that offer automatic text reflow?
@felixfbecker that's an interesting idea, we haven't really used that in visx at all. For @visx/legend and @visx/tooltip we opted to make them HTML based to get layout for free, and we have @visx/text for cases where you really probably should use SVG
s. Annotations were initially implemented with SVG to get something out and usable, but we discussed having an HTML based variant as well at some point. <foreignObject> could be interesting to consider instead, though.
One consideration to bear in mind is that most non-browser SVG renderers will not render HTML <foreignObject>s. This means that if you produce charts with legends or axis labels which use <foreignObject>s in the browser and then try to copy/paste them into a document, those elements might simply not appear. Of course, you can always use screenshots instead, but particularly if there is any use case which involves tweaking of the vector graphics before onward use in presentations (which I think is a not-uncommon business use case), migrating to <foreignObject> could make visx unusable.
Interesting point @richsilv, perhaps it's worth noting that in the docs for the new label type. I think both svg + html would be supported so users could then make their own decision based on different use cases.
I used <foreignObject> as a way to get text to respect its parent boundaries. Everything looked great until we started looking at compatibility.
Safari does not support it – at all – while most browsers are quirky. Very poor documentation on how to use this right. This is probably going to be suddenly dumped by all browsers.
That besides all that @richsilv already mentioned. Non-browser support is null.
