Upgrading to 4.4 breaking RTL support

[ahmadazimi]

Recently I've upgraded to new version 4.4.2 and now I've faced two major problem:

First:
ol.style.Text now not support RTL text and render it in LTR style! In the previous 4.3.3 version I didn't have any problem with it. (see parentheses in the below image)

And this is correct one with 4.3.3 version:

Second:
When using placement: 'line' in ol.style.Text , it doesn't support RTL as well and text`s letters render splitted!

And this is correct one with 4.3.3 version:

[tschaub]

Thanks for the report @ahmadazimi. This should be something that can be addressed in an upcoming release. In the meantime, it sounds like you should stick with 4.3.3.

[ahocevar]

@ahmadazimi How did you set RTL in 4.3.3? Can you provide a CodePen with RTL labels?

[ahmadazimi]

@ahocevar I didn't do anything special thing! Because my html tag is RTL, I didn't need specify style or script to make labels RTL.
With the same code I've written, upgrading to 4.4 break that RTL and make labels LTR.
May be some changes in label`s rendering procedure cause this problem?

[gimerstedt]

my text styles disappeared completely with 4.4.2, changing back to 4.3.4 until this regression is fixed.

[ahocevar]

@gimerstedt Are you sure you're facing the same issue? Make sure to use all lowercase values for textAlign and textBaseline.

[gimerstedt]

@ahocevar i wasn't sure but it was the closest to my issue i could find and reverting solved it.
the issue was indeed a capital value of textAlign/textBaseline which is easily fixed but wouldn't that still be a regression? i guess it depends on your definition. either way, some kind of error when providing an erroneous value would've helped.

thanks.

[pedros007]

@ahocevar I had textBaseline="Bottom" which worked in v4.0.1. After upgrading to v4.6.4, my style disappeared unless I set used lowercase textBaseline="bottom". I didn't see anything on the releases page and had to spin my wheels a bit to find the regression in my code. I propose the release notes be updated to call out the use of lowercase values.

[ahocevar]

@pedros007 Mixed case only used to work by chance - the documented values were always lowercase.

[HarelM]

Any updates on this?
I'm having the same issue.
The value can be seen below - the text is rendered using html and rtl above the map which has the '?' in the right place, but on the map it is in the begging and not in the end:
https://stackblitz.com/edit/angular-openlayers-rtl-issue-7367?file=app%2Fapp.component.html

I can't use text style with Hebrew due to this bug...
Can I help out somehow? My only other options is to use overlays but this won't work (I guess) for mapbox vector tiles...

I also can't update to latest version (5.2) of openlayers due to the fact that I can't compile it with angular-cli as much as I tried (#8357).

Any help will be appreciated...

[ahocevar]

If you want to help, a better test case would help, i.e a text that consists of multiple words and punctuations, and a reference so we see what it should look like when rendered correctly. Feel free to provide that as comment or linked live examples in this ticket.

[HarelM]

Thanks for the quick response!
I've updated the link above with more examples - how it should look is positioned above the map itself using regular html.
https://stackblitz.com/edit/angular-openlayers-rtl-issue-7367
I tend to think the right solution will be to add a property to Text called direction or dir or something similar unless you have a better way to know how to write the text.
The subject itself is very complex so I'm not sure how you plan to solve it.
Some explanation can be seen here - note that not all browsers fully support this:
https://www.w3.org/International/articles/inline-bidi-markup/

[HarelM]

Added more cases, I think it cover most of what's needed.
I used dir="auto" in the HTML to show how HTML handles this which is the correct and expected behavior:

[HarelM]

Any updates on this?

[ahocevar]

I think this boils down to forcing LTR when creating pre-rendered images for all text (i.e. create the text canvas with setAttribute('direction', 'ltr') e.g. in ol/render/canvas/TextReplay, and using an external library like https://www.npmjs.com/package/@mapbox/mapbox-gl-rtl-text to prepare the text.

If anyone wants to work on this, we'd gladly accept a pull request.

[HarelM]

I'd be happy to help out, but this seems a bit too big for my understanding of OL in terms of coding this. I'll be happy to test a pre-release version assuming I can use it with ngx-openlayers.

[ahocevar]

For further testing, I updated the stackblitz from above to the latest ol package: https://stackblitz.com/edit/angular-openlayers-rtl-issue-7367-teebe5