bpmn-io/bpmn-js

Support RTL (right to left) languages

Open

#924 aperta il 15 dic 2018

Vedi su GitHub
 (18 commenti) (0 reazioni) (0 assegnatari)JavaScript (1249 fork)batch import
backlogenhancementhelp wantedpr welcome

Metriche repository

Star
 (7739 star)
Metriche merge PR
 (Merge medio 17h 6m) (4 PR mergiate in 30 g)

Descrizione

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

Guida contributor

Direzione di ricerca
Questo problema richiede l'implementazione del supporto RTL (da destra a sinistra) per il modellatore BPMN. La sfida principale è che gli elementi SVG attualmente presuppongono la direzione LTR (da sinistra a destra), causando un posizionamento errato del testo quando la direzione della pagina è impostata su RTL. Esamina la discussione collegata nel problema #839 per il contesto. Indaga sulla modifica della logica di rendering per rispettare l'attributo direction dell'elemento radice. Considera l'uso della proprietà CSS 'direction' e di 'text anchor' di SVG per allineare correttamente il testo. La soluzione dovrebbe funzionare senza configurazione aggiuntiva, come da risultato desiderato.
Tech stack
javascript
Dominio
frontendaccessibility
Tipo issue
Funzionalità
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
3
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
1-2 giorni
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
Attiva
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
Abbastanza chiara
Prerequisiti
CSS directionSVG text layoutJavaScript
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
40