HTML5 Canvas RTL для отдельных текстов

1

У меня есть <canvas> на котором я хочу отображать строки справа налево (например, ивритское предложение с некоторыми английскими словами где-то посередине).

Для всего холста может быть указан атрибут dir. Итак, в моем примере я использовал бы <canvas dir="rtl/>.

К сожалению, это решение далека от завершения. У меня есть некоторые предложения в том же приложении, что и LTR (например, только на английском языке или английский с некоторым ивритом в середине, но не наоборот).

  • Есть ли способ указать dir на строку, без использования двух или более <canvas> es?

Здесь наивный пример того, как атрибут dir работает так, что canvas обрабатывает двунаправленные строки:

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 letters are swapped</p>
  <canvas id="ltr-canvas" dir="ltr" width=300 height=100/>
</div>
  • 0
    Можете ли вы попробовать обернуть каждую строку на иврите в промежуток, а затем добавить класс со стилем direction: rtl; ?
  • 0
    Это canvas . Там нет DOM. Там нет span s (или CSS, и т. Д.)
Показать ещё 5 комментариев
Теги:
canvas
bidi

1 ответ

3
Лучший ответ

Вы можете управлять направлением на строку, изменяя атрибут 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>
  • 0
    как обосновать?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню