Multilingual Text Rendering

Brandon Liu, Protomaps LLC

September 23, 2020
W3C/OGC Joint Workshop Series on Maps for the Web
w3.org/2020/maps/

Why Text?

What is a map?
  1. Geometry, in some spatial reference system
  2. Textual properties, possibly rendered as map labels
Even if labeling is outside the scope of MapML, text presentation is essential to maps and worthy of forward thinking

Background and motivation

A simple dataset...

<feature>
  <geometry>
    <coordinates><point>139.7400553 35.6432274</point></coordinates>
  </geometry>
  <!-- Hong Kong, population -->
  <properties>香港,75000000</properties>
</feature>
<feature>
  <geometry>
    <coordinates><point>114.1849161 22.3506270</point></coordinates>
  </geometry>
  <!-- Minato-ku (a municipality in Tokyo), population -->
  <properties>港区,243000</properties>
</feature> 
      

A simple "map" in HTML...

香港
7,500,000
港区
243,000
zh-hant (Traditional Chinese)
jp (Japanese)

Han Script: Locale Variants

Maps are inherently multilingual documents; multiple languages on one map is unexceptional!

Web Standards

Documents vs. Maps

HTML

  • Recommended: one lang attribute at document level
    <html lang="en-us">
  • In cases of multilingual text, element-level lang tagging

Maps

  • Many map services provide only one version for all user languages
  • Client-rendered maps may still display local names + user transliteration

Documents vs. Maps

SVG

香港 港区

SVG Results

<svg>
  <text x="70" y="200" lang="zh-hant">香港</text>
  <text x="150" y="150" lang="ja">港区</text>
</svg>
      
Browser document-level lang element-level lang
Safari 13
Firefox 79
Chrome 84
Edge 85

Canvas

Canvas Results

<script>
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.font = '30px sans-serif'; // no way to specify lang!
  ctx.fillText('香港', 70, 200);
  ctx.fillText('港区', 150, 150);
</script>
Browser document-level lang element-level lang
Safari 13
Firefox 79
Chrome 84
Edge
Canvas FormattedText proposal

Server-rendered maps...

Client-rendered maps with WebGL

Client-rendered hybrid approach

Aside: HTML <video>

Video has accompanying WebVTT standard for presenting timed text © 2008, Blender Foundation / www.bigbuckbunny.org

WebVTT Results

Use explicit Cue Language Spans for assigning presentation language
WEBVTT
label
00:00.000 --> 00:05.000 line:50%
<lang zh>港</lang> <lang ja>港</lang>
Browser document-level lang cue-level lang
Safari 13
Firefox 79
Chrome 84
Edge 85

Conclusions

THANK YOU!

brandon@protomaps.com
@bdon

September 23, 2020
W3C/OGC Joint Workshop Series on Maps for the Web
w3.org/2020/maps/