Implement text justify within the label box

See: https://github.com/openlayers/openlayers/issues/13481

src/ol/render/canvas.js

@@ -56,6 +56,7 @@ import {getFontParameters} from '../css.js';
  * @typedef {Object} TextState
  * @property {string} font Font.
  * @property {string} [textAlign] TextAlign.
+ * @property {string} [justify] Justify.
  * @property {string} textBaseline TextBaseline.
  * @property {string} [placement] Placement.
  * @property {number} [maxAngle] MaxAngle.

src/ol/render/canvas/Executor.js

@@ -239,10 +239,13 @@ class Executor {
       textState.scale[1] * pixelRatio,
     ];
     const textIsArray = Array.isArray(text);
-    const align = horizontalTextAlign(
-      textIsArray ? text[0] : text,
-      textState.textAlign || defaultTextAlign
-    );
+    // See: https://github.com/openlayers/openlayers/issues/13481
+    const align = textState.justify
+      ? TEXT_ALIGN[textState.justify]
+      : horizontalTextAlign(
+          Array.isArray(text) ? text[0] : text,
+          textState.textAlign || defaultTextAlign
+        );
     const strokeWidth =
       strokeKey && strokeState.lineWidth ? strokeState.lineWidth : 0;
 

src/ol/render/canvas/Immediate.js

@@ -946,6 +946,7 @@ class CanvasImmediateRenderer extends VectorContext {
     const textAlign = textState.textAlign
       ? textState.textAlign
       : defaultTextAlign;
+    // Ignore justification here, since rich-text and also `'\n'` make less sense for line placement.
     if (!contextTextState) {
       context.font = textState.font;
       context.textAlign = /** @type {CanvasTextAlign} */ (textAlign);

src/ol/render/canvas/TextBuilder.js

@@ -211,6 +211,7 @@ class CanvasTextBuilder extends CanvasBuilder {
       }
       this.beginGeometry(geometry, feature);
       const textAlign = textState.textAlign;
+      // Ignore justification here, since rich-text and also `'\n'` make less sense for line placement.
       let flatOffset = 0;
       let flatEnd;
       for (let o = 0, oo = ends.length; o < oo; ++o) {
@@ -449,6 +450,7 @@ class CanvasTextBuilder extends CanvasBuilder {
       this.textStates[textKey] = {
         font: textState.font,
         textAlign: textState.textAlign || defaultTextAlign,
+        justify: textState.justify,
         textBaseline: textState.textBaseline || defaultTextBaseline,
         scale: textState.scale,
       };
@@ -581,6 +583,7 @@ class CanvasTextBuilder extends CanvasBuilder {
       textState.maxAngle = textStyle.getMaxAngle();
       textState.placement = textStyle.getPlacement();
       textState.textAlign = textStyle.getTextAlign();
+      textState.justify = textStyle.getJustify();
       textState.textBaseline =
         textStyle.getTextBaseline() || defaultTextBaseline;
       textState.backgroundFill = textStyle.getBackgroundFill();
@@ -617,6 +620,7 @@ class CanvasTextBuilder extends CanvasBuilder {
         textState.font +
         textState.scale +
         (textState.textAlign || '?') +
+        (textState.justify || '?') +
         (textState.textBaseline || '?');
       this.fillKey_ = fillState
         ? typeof fillState.fillStyle == 'string'