Support for Displaying Japanese Long Vowel Mark (ー) in Vertical Layout

[chizutodesign]

User Story

• As a developer creating maps for Japanese users, I want the long vowel mark (ー) 'Chōonpu' and other symbols to use vertical-specific glyphs in vertical text layout, so that map labels adhere to standard Japanese typography and provide a better user experience.

Rationale

Why is this feature needed?

• In Japanese vertical text layout, certain symbols, such as the long vowel mark (ー), require vertical-specific glyphs. These glyphs are not simply rotated 90 degrees but are designed with different proportions and shapes to fit the vertical orientation aesthetically. Without this support, the text can look incorrect or unpolished to Japanese users.

What are some example use cases?

• Displaying vertical labels for landmarks like 東京タワー (Tokyo Tower) where the long vowel mark is essential for proper representation.
  
• Ensuring that Japanese text on maps adheres to proper typographic conventions for vertical text, enhancing both visual quality and readability.
• Supporting maps that require vertical text labels, such as historical maps or maps with limited space.

Can it be done today? Is there a workaround?

• Currently, there is no built-in support for rotating symbols or applying vertical-specific glyphs in MapLibre GL JS. Developers may use pre-rendered images or custom CSS, but these workarounds are inefficient and not scalable.

Impact

• Adding support for vertical-specific glyphs (e.g., via the OpenType vert feature) would enable accurate and professional display of Japanese vertical text, significantly improving the user experience for maps targeting Japanese-speaking audiences.
• Developers would save time and effort currently spent on creating workarounds, enabling them to focus on other features.
• While this feature may not impact all users, it is critical for projects that prioritize Japanese text and design accuracy.

Additional Context

Japanese fonts typically include vertical-specific glyphs to handle vertical typesetting properly. For example:

• The long vowel mark (ー) is not simply rotated 90 degrees; its shape and proportions are adjusted to fit the vertical layout.
• OpenType fonts support a feature called vert, which automatically switches to these vertical-specific glyphs when rendering vertical text.
  Supporting the vert feature in MapLibre GL JS would enable proper vertical text rendering without requiring manual adjustments or workarounds. This improvement aligns with the goal of providing high-quality map rendering for diverse languages and regions.

[HarelM]

Thanks for taking the time to open this PR.
CC: @wipfli, @1ec5.
Not sure I know how to support this request, but maybe others have good ideas.

[1ec5]

The underlying issue is that GL JS incorrectly assumes a one-for-one correspondence between Unicode codepoints and glyphs. The font above has two different glyphs for the same codepoint: one horizontal, one vertical. This assumption is closely tied to the glyph PBF format. Eliminating glyph PBFs in favor of client-side text segmentation (as in #4550) would get us closer to a solution, though TinySDF would still need to render the text segment as vertical text.

For TinySDF, the Canvas API supports right-to-left text, but I don’t see an option related to vertical text corresponding to the writing-mode CSS property. I also don’t see any option for selectively enabling OpenType features that would correspond to the font-feature-settings property. I think Canvas might honor a @font-face that sets font-feature-settings to vert, but I was thinking it would be the developer’s responsibility to specify an @font-face, to allow for remote Web fonts without fussing with glyph PBFs.

As a workaround, GL JS can currently substitute a vertical glyph for a number of punctuation marks. However, this relies on a limited set of CJK Compatibility Forms that Unicode includes for backwards compatibility with legacy encodings. Unfortunately, chōonpu doesn’t appear to have a compatibility form in Unicode. There is a somewhat similar-looking ︱ character, technically a vertical em dash. Would this be less confusing than the current ー in vertical text?

[chizutodesign]

Thank you for your response and advice!

As a temporary workaround, using a vertical bar (｜) instead of the long vowel mark (ー) could work. But unfortunately, as shown in the attached image, this approach creates visual inconsistencies, particularly with serif or bold fonts. The substituted character may look out of place or fail to convey the intended typographic design accurately.

I think this workaround is the best immediate solution, but I believe it would be ideal to eventually support proper vertical typesetting for the long vowel mark (and other vertical-specific glyphs) to ensure visual consistency and typographic correctness.

[HarelM]

The following is a conversation about this, to some extent:

• Index by grapheme #2458

[wipfli]

@chizutodesign you could make a MapLibre font PBF file based on Noto Sans with the OpenType vert feature enabled using maplibre/font-maker. You could call this MapLibre font someting like Noto Sans Vertical and then in the MapLibre style sheet you could use text-font: ["Noto Sans Vertical"]. Let me know if you need help with font-makers.

If you want to read more about text limitations in MapLibre you can have a look at https://oliverwipfli.ch/about-text-rendering-in-maplibre-2023-10-17/

[chizutodesign]

@wipfli Thank you for the advice.
I tried converting an OTF font using Font-maker, but unfortunately, it didn’t work. I’ll keep trying different approaches.

[wipfli]

@chizutodesign I made a font with top-to-bottom text direction using a modified version of font-maker that uses HarfBuzz for glyph lookup.

Please have a look at the demo at https://jsbin.com/xebasetibi/edit?html,output and let me know if the font looks correct to you. If everything looks correct I can share the modified version of font-maker.

[wipfli]

Ellipses ... and parenthesis () apparently also get rotated by 90 degrees:

https://jsbin.com/jerasoyaju/edit?html,output

[1ec5]

Ellipses ... and parenthesis () apparently also get rotated by 90 degrees

MapLibre already does this automatically using the compatibility codepoints I mentioned earlier. So you might be looking at the compatibility glyphs rather than the ones rotated on the server side.

By the way, I forgot to mention that that existing functionality also makes some replacements beyond what the OpenType feature would probably provide, such as “ to ﹁. If there is a codepoint that reliably looks like the desired vertical mark, even if it’s semantically unrelated, we could implement a similar replacement.

[chizutodesign]

@wipfli
Thank you very much! After checking the issue based on your input, I was able to confirm that it displayed correctly in my environment as well.

@1ec5
Thank you! Regarding the replacement character you suggested, I think "｜" might be the appropriate choice.

[wipfli]

@chizutodesign what is your preferred solution, do you want to change the replacement behavior of MapLibre GL JS or do you want to use a modified font?

[chizutodesign]

@wipfli
I apologize for the delayed response.
I have confirmed that it displays correctly when using the font you created.
Once the fix for Font-maker is deployed, it should allow us to use any font, so I believe this resolves the issue.
I sincerely thank you for your polite!