Support text-writing-mode property for line placement symbols

[zmiao]

Launch Checklist

The line labels now can be configured with text-writing-mode as the following JSON shows:

      {
        "id": "lines-symbol",
        "type": "symbol",
        "source": "mapbox",
        "layout": {
          "text-field": "新华路12号A栋",
          "symbol-placement": "line",
          "text-writing-mode":["vertical"]
        }
      }

The text-writing-mode configuration can be added as an array, whose values are enumeration values from a ( horizontal | vertical ) set.
To keep the previous rendering behavior as much as possible, the default text-writing-mode configuration for line label would be either:

"text-writing-mode": ["horizontal", "vertical"]
or
"text-writing-mode": ["vertical", "horizontal"]

It means for line labels, the order of the writing modes in the array doesn’t affect the rendering behavior if both writing modes are provided. The decision is based on the assumption that the default map text-rotation-alignment is applied for the line labels.

The rendering result will keep almost the same as previous except that for vertical line labels, non-CJK characters along with CJK characters will also be upright. The following table shows the rendering effects with different text-writing-mode configs, to be aware that vertical writing mode will only be effective for text that is verticalizable, for pure Latin/numbers, the text will still be rendered horizontally with vertical writing mode:

'text-writing-mode'	Effects
['horizontal']
['vertical']
default/['horizontal', 'veritcal']/['vertical', 'horizontal']

• briefly describe the changes in this PR
• include before/after visuals or gifs if this PR includes visual changes
• write tests for all new functionality
• document any changes to public APIs
• post benchmark scores
• manually test the debug page
• tagged @mapbox/map-design-team @mapbox/static-apis if this PR includes style spec API or visual changes
• tagged @mapbox/gl-native if this PR includes shader changes or needs a native port
• apply changelog label ('bug', 'feature', 'docs', etc) or use the label 'skip changelog'
• add an entry inside this element for inclusion in the mapbox-gl-js changelog: <changelog>Support 'text-writing-mode' property for line symbol-placement text labels. Note: This change will bring following changes for CJK text block: 1. For vertical CJK text, all the characters including Latin and Numbers will be vertically placed now. Previously, Latin and Numbers are horizontally placed. 2. For horizontal CJK text, it may have a slight horizontal shift due to the anchor shift.</changelog>

[zmiao]

Benchmark result:

[ansis]

Looks great! I asked a couple questions about things that were unclear to me but I didn't see any issues

[ansis]

This changed from !hasIconTextFit || !verticalPlacedIconSymbolIndex || !horizontalHidden to just !horizontalHidden. I understand why !verticalPlacedIconSymbolIndex would be dropped but I'm not sure about !hasIconTextFit. Do you know what the purpose of !hasIconTextFit was in the previous version?

[zmiao]

I am not quite sure why hiasIconTextFit is used for this case. I cross-compared with the gl-native parity code, it doesn't have this precondition. And one problem for only having useHorizontal check is it will disable either vertical or horizontal symbols, now this is not feasible for line label cases of having placedOrientation == undefined

const placedOrientation = this.placedOrientations[symbolInstance.crossTileID];  
const horizontalHidden = placedOrientation === WritingMode.vertical; 
const verticalHidden = placedOrientation === WritingMode.horizontal || placedOrientation === WritingMode.horizontalOnly;

[ansis]

Can you explain what this line is doing? especially the s - 1 part

[zmiao]

Yeah, it is a little confusing, I will add comment for it:

Normally, the 'Horizontal|Vertical' writing mode is followed by a 'Vertical' counterpart, 
this is not true for 'Vertical' only line labels. For this case, we'll have to overwrite the 
'useVertical' status before further checks.