This PR adds support for the right-to-left text direction to support languages like Arabic or Hebrew.
Details
Setting the dir attribute should be performed before the first graph.render() call, which is why I made this PR here on Graphin.
The added prop only includes values 'ltr' | 'rtl'. While the dir attribute in normal HTML nodes also supports 'auto', that option doesn't seem to work in canvas in the few examples I tried.
It's also not supported by <svg> nodes, which is a possible target for a G6 renderer if I get it right, see the direction attribute for SVG nodes.
Help required
I didn't try the case for SVG, since it's not in my particular use-case (I use canvas exclusively), so it would be good if someone could point me on how to test which attribute to use for each renderer (dir for canvas, direction for svg).
I could only change the documentation for the English language, as I don't know Chinese, so help here would be appreciated.
There was no unit test module for Grahpin.tsx, and I'd like to avoid building one from scratch, so help again would be good.
Example
LTR direction (normal):
RTL direction:
What's the weird artifact in the LTR case?
I think it's due to a bad bounding box calculation for the area to repaint, should be considered a separate issue.
Description
This PR adds support for the right-to-left text direction to support languages like Arabic or Hebrew.
Details
Setting the
dirattribute should be performed before the firstgraph.render()call, which is why I made this PR here on Graphin.The added prop only includes values
'ltr' | 'rtl'. While thedirattribute in normal HTML nodes also supports'auto', that option doesn't seem to work in canvas in the few examples I tried.It's also not supported by
<svg>nodes, which is a possible target for a G6 renderer if I get it right, see the direction attribute for SVG nodes.Help required
I didn't try the case for SVG, since it's not in my particular use-case (I use canvas exclusively), so it would be good if someone could point me on how to test which attribute to use for each renderer (
dirfor canvas,directionfor svg).I could only change the documentation for the English language, as I don't know Chinese, so help here would be appreciated.
There was no unit test module for
Grahpin.tsx, and I'd like to avoid building one from scratch, so help again would be good.Example
LTR direction (normal):
RTL direction:
What's the weird artifact in the LTR case?
I think it's due to a bad bounding box calculation for the area to repaint, should be considered a separate issue.
Expanded video: https://user-images.githubusercontent.com/16387428/182601923-d561e0d7-8de1-4a53-9f63-31992adb572e.mp4
Text being rendered, for reference: داستان SVG 1.1 SE طولا ني است.