bpmn-io/bpmn-js

Support RTL (right to left) languages

Open

#924 opened on 2018年12月15日

GitHub で見る
 (18 comments) (0 reactions) (0 assignees)JavaScript (7,739 stars) (1,249 forks)batch import
backlogenhancementhelp wantedpr welcome

説明

Is your feature request related to a problem? Please describe.

As a user I'd like to be able to model in RTL (right to left) languages.

Describe the solution you'd like

Modeler works in both, RTL and LTR environments without additional configuration.

Describe alternatives you've considered

  • Users must specify on modeler instantiation, whether they would like to run it in RTL or LTR (default) mode.

Additional context

In all right to left languages, text inside Text Elements is in wrong position:

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

The created diagram would be something like below:

lllllllllllllllllllllllllllllllllll

As soon as you change the page direction to rtl via <body direction="rtl"> you'll see labels breaking:

qqqqqqqqqqqqwwwwwwwwwwwwwwww

Context RTL in SVG

コントリビューターガイド

技術スタック
javascript
領域
frontendaccessibility
Issue 種別
feature
難度新しい貢献者にとっての実装難度です。1 は非常に小さな変更、5 は専門的な作業です。
3
推定時間経験ある貢献者が調査、実装、テスト、pull request 準備にかけるおおよその時間範囲です。
1-2 days
活動状況Issue が今どれだけ取り組みやすいかを示します。新しい、活発、古い、ブロック中、またはメンテナー入力待ちなどです。
active
明確さ期待される変更、受け入れ条件、次の手順がどれだけ明確かを示します。
mostly clear
前提条件
CSS directionSVG text layoutJavaScript
初心者向け度初回貢献者にどれだけ取り組みやすいかを 1-100 で推定したスコアです。
40
調査方針
This issue requires implementing RTL support for the BPMN modeler. The main challenge is that SVG elements currently assume LTR direction, causing text misplacement when the page direction is set to RTL. Investigate the linked discussion in issue #839 for context. Look into modifying the rendering logic to respect the direction attribute of the root element. Consider using CSS 'direction' property and SVG 'text anchor' to align text correctly. The solution should work without additional configuration, as per the desired outcome.