bpmn-io/bpmn-js

Support RTL (right to left) languages

Open

#924 ouverte le 15 déc. 2018

Voir sur GitHub
 (18 commentaires) (0 réactions) (0 assignés)JavaScript (1 249 forks)batch import
backlogenhancementhelp wantedpr welcome

Métriques du dépôt

Stars
 (7 739 stars)
Métriques de merge PR
 (Merge moyen 17h 6m) (4 PRs mergées en 30 j)

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

Guide contributeur

Direction de recherche
Ce problème nécessite l'implémentation de la prise en charge RTL (de droite à gauche) pour le modélisateur BPMN. Le principal défi est que les éléments SVG supposent actuellement une direction LTR (de gauche à droite), ce qui entraîne un mauvais placement du texte lorsque la direction de la page est définie sur RTL. Examinez la discussion liée dans le problème #839 pour le contexte. Étudiez la modification de la logique de rendu pour respecter l'attribut direction de l'élément racine. Envisagez d'utiliser la propriété CSS 'direction' et l'attribut SVG 'text anchor' pour aligner correctement le texte. La solution doit fonctionner sans configuration supplémentaire, conformément au résultat souhaité.
Stack technique
javascript
Domaine
frontendaccessibility
Type d'issue
Fonctionnalité
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
3
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
1-2 jours
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
Active
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
Plutôt claire
Prérequis
CSS directionSVG text layoutJavaScript
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
40