bpmn-io/bpmn-js

Support RTL (right to left) languages

Open

#924 opened on Dec 15, 2018

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

Description

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

Contributor guide

Tech stack
javascript
Domain
frontendaccessibility
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
CSS directionSVG text layoutJavaScript
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
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.