Merge pull request #11722 from ahocevar/text-align-rtl

Correct meaning of 'start' and 'end' text align for LTR text

rendering/cases/rtl-text-align/main.js

@@ -0,0 +1,94 @@
+import CircleStyle from '../../../src/ol/style/Circle.js';
+import Feature from '../../../src/ol/Feature.js';
+import Fill from '../../../src/ol/style/Fill.js';
+import Map from '../../../src/ol/Map.js';
+import Point from '../../../src/ol/geom/Point.js';
+import Stroke from '../../../src/ol/style/Stroke.js';
+import Style from '../../../src/ol/style/Style.js';
+import Text from '../../../src/ol/style/Text.js';
+import VectorLayer from '../../../src/ol/layer/Vector.js';
+import VectorSource from '../../../src/ol/source/Vector.js';
+import View from '../../../src/ol/View.js';
+
+const vectorSource = new VectorSource({
+  features: [
+    // Latin - end (right)
+    new Feature({
+      geometry: new Point([-10, 50]),
+      text: 'Latin',
+      textAlign: 'end',
+    }),
+
+    // Hebrew - start (right)
+    new Feature({
+      geometry: new Point([-10, 0]),
+      text: 'עִברִית',
+      textAlign: 'start',
+    }),
+
+    // Arabic - start (right)
+    new Feature({
+      geometry: new Point([-10, -50]),
+      text: 'عربى',
+      textAlign: 'start',
+    }),
+
+    // Latin - start (left)
+    new Feature({
+      geometry: new Point([10, 50]),
+      text: 'Latin',
+      textAlign: 'start',
+    }),
+
+    // Hebrew - end (left)
+    new Feature({
+      geometry: new Point([10, 0]),
+      text: 'עִברִית',
+      textAlign: 'end',
+    }),
+
+    // Arabic - end (left)
+    new Feature({
+      geometry: new Point([10, -50]),
+      text: 'عربى',
+      textAlign: 'end',
+    }),
+  ],
+});
+
+new Map({
+  pixelRatio: 1,
+  layers: [
+    new VectorLayer({
+      source: vectorSource,
+      style: function (feature) {
+        return new Style({
+          text: new Text({
+            text: feature.get('text'),
+            font: '24px Ubuntu',
+            textAlign: feature.get('textAlign'),
+            fill: new Fill({
+              color: 'black',
+            }),
+            stroke: new Stroke({
+              color: 'white',
+            }),
+          }),
+          image: new CircleStyle({
+            radius: 10,
+            fill: new Fill({
+              color: 'cyan',
+            }),
+          }),
+        });
+      },
+    }),
+  ],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    resolution: 1,
+  }),
+});
+
+render({tolerance: 0.01});

rendering/cases/text-style-linestring-nice/main.js

@@ -114,7 +114,7 @@ feature4.setStyle(
       text: 'negative offsetX',
       font: 'normal 400 10px/1 Ubuntu',
       offsetX: -10,
-      textAlign: 'start',
+      textAlign: 'end',
       textBaseline: 'top',
       placement: 'line',
     }),
@@ -133,7 +133,7 @@ feature5.setStyle(
       font: '10px Ubuntu',
       offsetY: 5,
       scale: 0.7,
-      textAlign: 'end',
+      textAlign: 'start',
       placement: 'line',
     }),
   })

src/ol/render/canvas/Executor.js

@@ -75,6 +75,30 @@ function getDeclutterBox(replayImageOrLabelArgs) {
   return replayImageOrLabelArgs[3].declutterBox;
 }
 
+const rtlRegEx = new RegExp(
+  /* eslint-disable prettier/prettier */
+  '[' +
+    String.fromCharCode(0x00591) + '-' + String.fromCharCode(0x008ff) +
+    String.fromCharCode(0x0fb1d) + '-' + String.fromCharCode(0x0fdff) +
+    String.fromCharCode(0x0fe70) + '-' + String.fromCharCode(0x0fefc) +
+    String.fromCharCode(0x10800) + '-' + String.fromCharCode(0x10fff) +
+    String.fromCharCode(0x1e800) + '-' + String.fromCharCode(0x1efff) +
+  ']'
+  /* eslint-enable prettier/prettier */
+);
+
+/**
+ * @param {string} text Text.
+ * @param {string} align Alignment.
+ * @return {number} Text alignment.
+ */
+function horizontalTextAlign(text, align) {
+  if ((align === 'start' || align === 'end') && !rtlRegEx.test(text)) {
+    align = align === 'start' ? 'left' : 'right';
+  }
+  return TEXT_ALIGN[align];
+}
+
 class Executor {
   /**
    * @param {number} resolution Resolution.
@@ -205,7 +229,10 @@ class Executor {
       textState.scale[0] * pixelRatio,
       textState.scale[1] * pixelRatio,
     ];
-    const align = TEXT_ALIGN[textState.textAlign || defaultTextAlign];
+    const align = horizontalTextAlign(
+      text,
+      textState.textAlign || defaultTextAlign
+    );
     const strokeWidth =
       strokeKey && strokeState.lineWidth ? strokeState.lineWidth : 0;
 
@@ -541,7 +568,10 @@ class Executor {
 
     const strokeState = this.strokeStates[strokeKey];
     const pixelRatio = this.pixelRatio;
-    const align = TEXT_ALIGN[textState.textAlign || defaultTextAlign];
+    const align = horizontalTextAlign(
+      text,
+      textState.textAlign || defaultTextAlign
+    );
     const baseline = TEXT_ALIGN[textState.textBaseline || defaultTextBaseline];
     const strokeWidth =
       strokeState && strokeState.lineWidth ? strokeState.lineWidth : 0;