Chinese labels should be wrapped by character with balanced lines

[barrycug]

the font is "Unifont Medium” .The english is ok

[mikemorris]

@barrycug Can you please provide more details on what the expected result is versus what is actually rendered?

[barrycug]

on the screenshot,you can find the English text have 2 lines,and the chinese text have 1 line.
and i set the text-max-width =5;
"text-max-width":5

[barrycug]

I know ,the text wrapped line depend on space.But in chinese ,the text have not include the space.

[friedbunny]

Japanese has a similar issue, to a lesser degree because names tend to be shorter. The problem is that it would be difficult to determine where to break an un-spaced line — it would likely have to be specific to each language.

Off the top of my head, Japanese could be split on certain characters (like ・ or other punctuation) or when switching character sets, e.g., syllabaries giving way to kanji like in カタカナ漢字 or alphabet to kanji ABC公園, etc.

Here's a Yahoo Japan map, which is probably the best designed web map in Japan, if anyone is looking for inspriation. ;)

[barrycug]

thank you very mach. I split the text by the size. It is the most simple solution。Mayby I can insert space into the data，this is the correct solution，because it can use the natural language broken。But it is a hard work。

bool hasspace = false;
uint32_t space = 32;
if(!(string.find(space) ==std::string::npos))
{
    hasspace = true;
}
long breakOffset=-1;
if (!hasspace) {
    if (string.size() > maxWidth/24) {
        breakOffset = string.size()/2+1;
    }
}

int i=0;
for (uint32_t chr : string) {
    if (!hasspace &&i==breakOffset) {
        shaping.emplace_back(space, x, y);
        auto metric = metrics.find(space);
        if (metric != metrics.end()) {
            x += metric->second.advance + spacing;
        }
    }
    shaping.emplace_back(chr, x, y);
    auto metric = metrics.find(chr);
    if (metric != metrics.end()) {
        x += metric->second.advance + spacing;
    }
    i++;
}

[barrycug]

the code only support 2 line wrapped.

[mikemorris]

Thanks for the detailed explanation @barrycug and @friedbunny! The "proper" way to implement this would probably be to use something like ICU's BreakIterator for boundary analysis, then calculate the width of glyph clusters similarly to Mapnik and split on the closest break point. A similar approach for complex scripts that require shaping is described at http://lists.freedesktop.org/archives/harfbuzz/2014-February/004140.html

[mikemorris]

Linking Mapnik line-breaking implementation here for future reference https://github.com/mapnik/mapnik/blob/master/src/text/text_layout.cpp

[friedbunny]

That's really interesting reading and looks like the ideal path to pursue, thanks @mikemorris. Do you have any idea how feasible it would be to do this properly/robustly in GL?

[mikemorris]

@friedbunny I think it should be pretty straightforward to implement in gl-native because of existing libraries like ICU and HarfBuzz; the challenge will mostly be avoiding performance slowdowns and minimizing bloat. I'd like to tackle this in conjunction with other render-time glyph issues like complex text shaping and RTL/bidirectional script support.

What I expect will be difficult is implementing comparable functionality in mapbox-gl-js, as I'm not sure if it would be feasible to bundle (or request dynamically) contextual line-breaking support or shaping tables, and I don't know any existing JavaScript libraries that have already solved these problems.