search

bpmn-io / bpmn-js

A BPMN 2.0 rendering toolkit and web modeler.
https://bpmn.io/toolkit/bpmn-js/
Other
8.64k stars 1.33k forks source link

Support RTL (right to left) languages #924

Open 1994samaneh opened 5 years ago

1994samaneh commented 5 years ago

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

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

nikku commented 5 years ago

We appreciate contributions that improve our RTL support.

nikku commented 5 years ago

Related to https://github.com/bpmn-io/bpmn-js/issues/839.

1994samaneh commented 5 years ago

Related to #839.

Hello Nikku,

Thanks for your reply,

I already checked #839 and all related issues, but unfortunately could not find any solution! I see there are some ones which are interested to use Modeler in Right-To-Left Languages.

Do your team mind to fix this issue in Modeler and you are into support Right-To-Left Languages as good as Left-To-Right Languages? Note that with this view of text clearly no one for any Right-To-Left Language can not use Modeler.

Thanks and best fortune,

nikku commented 5 years ago

We continuously re-evaluate our backlog an issue priorities. Unfortunately we cannot address everything with high priority at the same time.

As an open source project we rely on your help. Maybe you know someone who is into RTL languages and able to investigate the situation? Ask her to have a look, investigate the situation and contribute back.

Varooneh commented 5 years ago

@nikku Hi nikku I've this problem and solve this by handle tspan tag, I put a sample tspan tag here, Just you need check page/div/container is rtl or add a new option like rtlEnabled and add two attribute to all tspan's.

Sample tspan tag:

<tspan direction="rtl" unicode-bidi="embed" x="90.359375" y="43.599999999999994">تست متن فارسی</tspan>

Attributes : direction unicode-bidi

rtlenabled

nikku commented 5 years ago

Just you need check page/div/container is rtl.

@Varooneh, thanks for letting us know. How to distinguish, whether use RTL or not? Is it exposed by the browser?

nikku commented 5 years ago

Let's clarify the actual use-case: You build a web-site in an RTL language (e.g. Arabic) and would like to embed a BPMN diagram / editor into it.

Depending on the answers we can decide what a proper improvement of the current situation looks like.

Varooneh commented 5 years ago

@nikku For RTL languages, Yes, We need this option and this is very useful for us and also browsers can expose this tspan attributes. I tested this solution on Edge, Safari, FF, Chrome and worked successfully. var modeler = new BpmnModeler({ container: 'body', rtlEnabled: true /* new option */ }); And if rtlEnabled option is true append direction="rtl" and unicode-bidi="embed" to tspan.

I hope it is useful for you.

nikku commented 5 years ago

@Varooneh Could you help me out with the questions I asked? I'd like to not add additional configuration options if it is possible to figure out whether we're in an RTL environment easily.

Varooneh commented 5 years ago

Let's clarify the actual use-case: You build a web-site in an RTL language (e.g. Arabic) and would like to embed a BPMN diagram / editor into it.

  • How do you mark the site as RTL?
  • Do you mix RTL and LTR text (i.e. Arabic + English)?

Depending on the answers we can decide what a proper improvement of the current situation looks like.

How do you mark the site as RTL? In css we set direction="rtl", browsers can detect this css config and show text correct.

Do you mix RTL and LTR text (i.e. Arabic + English)? Yes, many times, we need mix RTL and LTR languages .

Please see this link https://codepen.io/varooneh/pen/gqgRZO

and also float: right, text-align: right for right aligned languages

and But I think it's better to use Option over than a css style or etc ... 😉😉😉😉😉

Varooneh commented 5 years ago

@1994samaneh @nikku

سمانه فقط کافیه در صفحه ی مربوط به طراحی این استایل رو اضافه کنید، مشکل حل خواهد شد .

Samaneh, Just you need add this css to you modeler page to fix this problem without any changes on bpmn modeler

tspan { direction: rtl; unicode-bidi: embed; } @nikku Without any custom options, just I added above css to my designer page and fixed my problem. Please describe this solution in you documentation for rtl languages users.

nikku commented 5 years ago

@Varooneh I don't see how that improves the situation, maybe I'm doing something wrong?

I've put up the bpmn-js-rtl-example to show case our RTL capabilities (and styles you need to apply to get it working). Despite your css selectors added it still fails to properly display RTL layouted text:

image

Reproduce it by checking out the example and executing npm run dev.

Varooneh commented 5 years ago

@nikku Ok, I test it and fix and tell you about this subject.

Varooneh commented 5 years ago

@nikku Hummmmmmm, I test it, I think fix this problem is not simple. Test case: I removed direction from body css and page has default direction mode. In this state, when I double clicked on any element and type a sample text, if input value is multiple line, svg create multiple tspan per line. see picture 1

picture 1 ltr none change

In this mode, I've not any problem with LTR languages and all text is inside element area. But if set direction: rtl in body css, when I input value to element, svg can not create tspan for each line like picture 1 and all characters inside a one tspan. see picture 2

picture 2 rtl div

I tested in arabic and persian text and still this problem and now, I've questions.

karo2200 commented 1 year ago

@nikku Hummmmmmm, I test it, I think fix this problem is not simple. Test case: I removed direction from body css and page has default direction mode. In this state, when I double clicked on any element and type a sample text, if input value is multiple line, svg create multiple tspan per line. see picture 1

picture 1 ltr none change

In this mode, I've not any problem with LTR languages and all text is inside element area. But if set direction: rtl in body css, when I input value to element, svg can not create tspan for each line like picture 1 and all characters inside a one tspan. see picture 2

picture 2 rtl div

I tested in arabic and persian text and still this problem and now, I've questions.

  • What's differents between RTL and LTR for svg?
  • Can you check the direction or any options for create multiple tspan for all directions?

how to write right to left in camunda ? چطوری کاموندا رو راست چین کنیم؟

HakkaMc commented 1 month ago

I have found a quickwin. It consists of 2 steps.

1) Put CSS direction: ltr; to all the tspan elements in the SVG document, for example:

# CSS code
myClass { tspan { direction: ltr !important; } }

# HTML code
<div ref={myRef} className={styles.myClass}/>

2) Update a specific file in the diagram-js library Find node_modules/diagram-js/lib/util/Text.js file, find the function getTextBBox and change this:

# change this code
width: textBBox.width + textBBox.x * 2

# ...to this code
width: textBBox.width

Explanation

In my html code the main HTML element has attribute dir="rtl". With this setting the X axis is counted differently so the property textBBox.x has negative value instead of positive. But adding Math.abs(textBBox.x) is a nonsense also according to my testing. So the best quickwin solution is to return only textBBox.width.

How to use it permanently

Option 1 - Fixing diagram-js library

I don't know how the diagram-js works so I don't know why the textBBox.x is used so I can't create a bugfix branch to simply remove the textBBox.x from the width count. Maybe somebody who knows diagram-js better can help and find a right solution?

Option 2 - Local script in your project

The command npm install always replaces the Text.js file so the solution is to write a bash or node.js script which can replace the mentioned code every time after npm install or while starting your code assembling.

Cache Attention!!!

If you change something directly in the node_modules files then it’s necessary to delete the node_modules/.cache folder. If you use a monorepo with several workspaces/packages then don’t forget to delete the node_modules/.cache in all of those packages!