HTML5画布对于单独文本的RTL（从右到左）支持

Question

我有一个<canvas>，我想在上面渲染从右到左的字符串（例如带有一些英文单词的希伯来语句子）。可以为整个画布指定一个dir属性。所以，在我的例子中，我会使用<canvas dir="rtl />。

不幸的是，这个解决方案远非完美。我有一些句子在同一个应用程序中，是从左到右的（例如，仅英文或英文中间带有一些希伯来语，但不是相反的）。

是否有任何方法可以基于每个字符串指定dir，而不使用两个或更多的<canvas>？

Here's a naive example of how the dir attribute chages that way the canvas handles bidirectional strings:

var text = 'קצת text בעברית'

var rtlCanvas = document.getElementById('rtl-canvas')
var rtlCtx = rtlCanvas.getContext('2d')
rtlCtx.font = '24px Arial'
rtlCtx.fillText(text, 250, 50)

var ltrCanvas = document.getElementById('ltr-canvas')
var ltrCtx = ltrCanvas.getContext('2d')
ltrCtx.font = '24px Arial'
ltrCtx.fillText(text, 0, 50)

<div>
  <p>Looking good with dir=rtl:</p>
  <canvas id="rtl-canvas" dir="rtl" width=300 height=100/>
</div>

<div>
  <p>With dir=ltr, first and last words are swapped</p>
  <canvas id="ltr-canvas" dir="ltr" width=300 height=100/>
</div>

- matan129

---

你能否尝试将每个希伯来字符串用span包裹起来，并为其添加一个样式为direction: rtl;的类？ - DSCH

请问您能否尝试添加一段代码片段？ - DSCH

这是没有意义的。我询问的是关于“画布”功能的特性，而不是有关某个具体代码故障排除的问题。 - matan129

然而，我做了一个例子来澄清事情。 - matan129

我只找到了https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/direction，我想你也尝试过了。如果你还没有尝试过，也许它可以帮助你。你可以在绘制每个文本之前更改值。希望能有所帮助。 - DSCH

Answer 1

您可以通过根据需要编程更改dir属性来控制每个字符串的方向：

var text = 'קצת text בעברית'
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')

ctx.font = '24px Arial'
ctx.fillText(text, 165, 50)

canvas.setAttribute('dir','ltr');
ctx.fillText(text, 0, 100)

   
<div>
  <canvas id="canvas" dir="rtl" width=300 height=300/>
</div>

- DSCH

---

如何对齐？ - amir22