I have a <canvas> on which I want to render right-to-left strings (e.g. Hebrew sentence with some English words somewhere in the middle).

For the whole canvas, a dir attribute may be specified. So, in my example I'd use <canvas dir="rtl />.

Unfortunately, this solution is far from being plete. I have some sentences in the same application that are LTR (for example, English only, or English with some Hebrew at the middle, but not the opposite).

• Is there any way to specify dir per string basis, without using two or more <canvas>es?

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>

I have a <canvas> on which I want to render right-to-left strings (e.g. Hebrew sentence with some English words somewhere in the middle).

For the whole canvas, a dir attribute may be specified. So, in my example I'd use <canvas dir="rtl />.

Unfortunately, this solution is far from being plete. I have some sentences in the same application that are LTR (for example, English only, or English with some Hebrew at the middle, but not the opposite).

• Is there any way to specify dir per string basis, without using two or more <canvas>es?

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>

• javascript
• html
• canvas
• bidi

Share Improve this question Follow edited Mar 2, 2020 at 17:32 matan129 asked Nov 26, 2017 at 20:53 matan129matan129 1,71722 gold badges2323 silver badges3434 bronze badges 7

• Can you try and wrap each Hebrew string in a span and then add it a class with a style of direction: rtl; ? – DSCH Commented Nov 26, 2017 at 20:57
• It's canvas. There is no DOM. There are no spans (or CSS, etc.) – matan129 Commented Nov 26, 2017 at 20:58
• Can you please try and add a code snippet? – DSCH Commented Nov 26, 2017 at 21:23
• It'd be pointless. I'm asking about features of canvas, not about troubleshooting some specific piece of code. – matan129 Commented Nov 26, 2017 at 21:26
• 1 I only found developer.mozilla/en-US/docs/Web/API/… which I assumed you tried. In case you haven't maybe it can help. You can change the value before every text you draw. Hope it helps. – DSCH Commented Nov 26, 2017 at 21:39

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 7

You can control the direction per string by changing the dir attribute programmatically as needed:

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>