Question

我有一个<canvas>，我想在其中呈现从右到左的字符串（例如希伯来语句子，中间某处有一些英文单词）。

对于整个画布，可以指定dir属性。因此，在我的示例中，我使用<canvas dir="rtl />。

不幸的是，这个解决方案还远未完成。我在同一个应用程序中有一些LTR句子（例如，只有英文，或者中间带有一些希伯来文的英文，但不是相反）。

有没有办法在每个字符串的基础上指定dir，而不使用两个或更多<canvas> es？

这是一个简单的示例，说明dir属性如何在canvas处理双向字符串的方式中变换：

＆＃13;

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)

＆＃13;

<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 letters are swapped</p>
  <canvas id="ltr-canvas" dir="ltr" width=300 height=100/>
</div>

＆＃13;

Answer 1

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

＆＃13;

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)

＆＃13;

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

＆＃13;

单个文本的HTML5 Canvas RTL

1 个答案: