bpmn-io/bpmn-js

Support RTL (right to left) languages

Open

#924 aberto em 15 de dez. de 2018

Ver no GitHub
 (18 comments) (0 reactions) (0 assignees)JavaScript (1.249 forks)batch import
backlogenhancementhelp wantedpr welcome

Métricas do repositório

Stars
 (7.739 stars)
Métricas de merge de PR
 (Mesclagem média 17h 6m) (4 fundiu PRs em 30d)

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

Guia do colaborador

Direção de pesquisa
Esta issue requer a implementação de suporte RTL (da direita para a esquerda) para o modelador BPMN. O principal desafio é que os elementos SVG atualmente assumem a direção LTR (da esquerda para a direita), causando deslocamento incorreto do texto quando a direção da página é definida como RTL. Investigue a discussão vinculada na issue #839 para contexto. Analise a modificação da lógica de renderização para respeitar o atributo direction do elemento raiz. Considere usar a propriedade CSS 'direction' e o 'text anchor' do SVG para alinhar o texto corretamente. A solução deve funcionar sem configuração adicional, conforme o resultado desejado.
Pilha de tecnologia
javascript
Domain
frontendaccessibility
Tipo Issue
Funcionalidade
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
3
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
1-2 dias
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
Ativo
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
Principalmente claro
Prerequisites
CSS directionSVG text layoutJavaScript
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
40