Skip to content

Commit

Permalink
Implement DDS for text-justify property (#5000)
Browse files Browse the repository at this point in the history
  • Loading branch information
Nicki Dlugash authored Jul 21, 2017
1 parent 6c82557 commit b01514c
Show file tree
Hide file tree
Showing 6 changed files with 96 additions and 22 deletions.
9 changes: 3 additions & 6 deletions src/data/bucket/symbol_bucket.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -402,10 +402,6 @@ class SymbolBucket {

const layout = this.layers[0].layout;

const justify =
layout['text-justify'] === 'right' ? 1 :
layout['text-justify'] === 'left' ? 0 : 0.5;

const oneEm = 24;
const lineHeight = layout['text-line-height'] * oneEm;
const maxWidth = layout['symbol-placement'] !== 'line' ? layout['text-max-width'] * oneEm : 0;
Expand All @@ -421,10 +417,11 @@ class SymbolBucket {
const textOffset = this.layers[0].getLayoutValue('text-offset', {zoom: this.zoom}, feature.properties).map((t)=> t * oneEm);
const spacingIfAllowed = scriptDetection.allowsLetterSpacing(feature.text) ? spacing : 0;
const textAnchor = this.layers[0].getLayoutValue('text-anchor', {zoom: this.zoom}, feature.properties);
const textJustify = this.layers[0].getLayoutValue('text-justify', {zoom: this.zoom}, feature.properties);

shapedTextOrientations = {
[WritingMode.horizontal]: shapeText(feature.text, stacks[fontstack], maxWidth, lineHeight, textAnchor, justify, spacingIfAllowed, textOffset, oneEm, WritingMode.horizontal),
[WritingMode.vertical]: allowsVerticalWritingMode && textAlongLine && shapeText(feature.text, stacks[fontstack], maxWidth, lineHeight, textAnchor, justify, spacingIfAllowed, textOffset, oneEm, WritingMode.vertical)
[WritingMode.horizontal]: shapeText(feature.text, stacks[fontstack], maxWidth, lineHeight, textAnchor, textJustify, spacingIfAllowed, textOffset, oneEm, WritingMode.horizontal),
[WritingMode.vertical]: allowsVerticalWritingMode && textAlongLine && shapeText(feature.text, stacks[fontstack], maxWidth, lineHeight, textAnchor, textJustify, spacingIfAllowed, textOffset, oneEm, WritingMode.vertical)
};
} else {
shapedTextOrientations = {};
Expand Down
5 changes: 4 additions & 1 deletion src/style-spec/reference/v8.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1260,6 +1260,7 @@
"type": "enum",
"function": "piecewise-constant",
"zoom-function": true,
"property-function": true,
"values": {
"left": {
"doc": "The text is aligned to the left."
Expand All @@ -1283,7 +1284,9 @@
"ios": "2.0.0",
"macos": "0.1.0"
},
"data-driven styling": {}
"data-driven styling": {
"js": "0.39.0"
}
}
},
"text-anchor": {
Expand Down
12 changes: 8 additions & 4 deletions src/symbol/shaping.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ function breakLines(text, lineBreakPoints) {
return lines;
}

function shapeText(text, glyphs, maxWidth, lineHeight, textAnchor, justify, spacing, translate, verticalHeight, writingMode) {
function shapeText(text, glyphs, maxWidth, lineHeight, textAnchor, textJustify, spacing, translate, verticalHeight, writingMode) {
let logicalInput = text.trim();
if (writingMode === WritingMode.vertical) logicalInput = verticalizePunctuation(logicalInput);

Expand All @@ -63,7 +63,7 @@ function shapeText(text, glyphs, maxWidth, lineHeight, textAnchor, justify, spac
lines = breakLines(logicalInput, determineLineBreaks(logicalInput, spacing, maxWidth, glyphs));
}

shapeLines(shaping, glyphs, lines, lineHeight, textAnchor, justify, translate, writingMode, spacing, verticalHeight);
shapeLines(shaping, glyphs, lines, lineHeight, textAnchor, textJustify, translate, writingMode, spacing, verticalHeight);

if (!positionedGlyphs.length)
return false;
Expand Down Expand Up @@ -260,7 +260,7 @@ function getAnchorAlignment(textAnchor) {
return { horizontalAlign: horizontalAlign, verticalAlign: verticalAlign };
}

function shapeLines(shaping, glyphs, lines, lineHeight, textAnchor, justify, translate, writingMode, spacing, verticalHeight) {
function shapeLines(shaping, glyphs, lines, lineHeight, textAnchor, textJustify, translate, writingMode, spacing, verticalHeight) {
// the y offset *should* be part of the font metadata
const yOffset = -17;

Expand All @@ -270,6 +270,10 @@ function shapeLines(shaping, glyphs, lines, lineHeight, textAnchor, justify, tra
let maxLineLength = 0;
const positionedGlyphs = shaping.positionedGlyphs;

const justify =
textJustify === 'right' ? 1 :
textJustify === 'left' ? 0 : 0.5;

for (const i in lines) {
const line = lines[i].trim();

Expand Down Expand Up @@ -319,7 +323,7 @@ function shapeLines(shaping, glyphs, lines, lineHeight, textAnchor, justify, tra
shaping.right = shaping.left + maxLineLength;
}

// justify left = 0, right = 1, center = .5
// justify right = 1, left = 0, center = 0.5
function justifyLine(positionedGlyphs, glyphs, start, end, justify) {
if (!justify)
return;
Expand Down
Binary file added test/integration/render-tests/text-justify/property-function/expected.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
70 changes: 70 additions & 0 deletions test/integration/render-tests/text-justify/property-function/style.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
{
"version": 8,
"metadata": {
"test": {
"height": 128,
"width": 512
}
},
"center": [ 0, 0 ],
"zoom": 0,
"sources": {
"point": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": { "x": 0 },
"geometry": {
"type": "Point",
"coordinates": [ -100, 0 ]
}
},
{
"type": "Feature",
"properties": { "x": 1 },
"geometry": {
"type": "Point",
"coordinates": [ 0, 0 ]
}
},
{
"type": "Feature",
"properties": { "x": 2 },
"geometry": {
"type": "Point",
"coordinates": [ 100, 0 ]
}
}
]
}
}
},
"glyphs": "local://glyphs/{fontstack}/{range}.pbf",
"layers": [
{
"id": "text",
"type": "symbol",
"source": "point",
"layout": {
"text-field": "A very very long \n line label",
"text-justify": {
"type": "categorical",
"property": "x",
"stops": [
[0, "right"],
[1, "center"],
[2, "left"]
]
},
"text-allow-overlap": true,
"text-font": [
"Open Sans Semibold",
"Arial Unicode MS Bold"
]
}
}
]
}
22 changes: 11 additions & 11 deletions test/unit/symbol/shaping.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,50 +23,50 @@ test('shaping', (t) => {

JSON.parse('{}');

shaped = shaping.shapeText(`hi${String.fromCharCode(0)}`, glyphs, 15 * oneEm, oneEm, 'center', 0.5, 0 * oneEm, [0, 0], oneEm, WritingMode.horizontal);
shaped = shaping.shapeText(`hi${String.fromCharCode(0)}`, glyphs, 15 * oneEm, oneEm, 'center', 'center', 0 * oneEm, [0, 0], oneEm, WritingMode.horizontal);
if (UPDATE) fs.writeFileSync(path.join(__dirname, '/../../expected/text-shaping-null.json'), JSON.stringify(shaped, null, 2));
t.deepEqual(shaped, JSON.parse(fs.readFileSync(path.join(__dirname, '/../../expected/text-shaping-null.json'))));

// Default shaping.
shaped = shaping.shapeText('abcde', glyphs, 15 * oneEm, oneEm, 'center', 0.5, 0 * oneEm, [0, 0], oneEm, WritingMode.horizontal);
shaped = shaping.shapeText('abcde', glyphs, 15 * oneEm, oneEm, 'center', 'center', 0 * oneEm, [0, 0], oneEm, WritingMode.horizontal);
if (UPDATE) fs.writeFileSync(path.join(__dirname, '/../../expected/text-shaping-default.json'), JSON.stringify(shaped, null, 2));
t.deepEqual(shaped, JSON.parse(fs.readFileSync(path.join(__dirname, '/../../expected/text-shaping-default.json'))));

// Letter spacing.
shaped = shaping.shapeText('abcde', glyphs, 15 * oneEm, oneEm, 'center', 0.5, 0.125 * oneEm, [0, 0], oneEm, WritingMode.horizontal);
shaped = shaping.shapeText('abcde', glyphs, 15 * oneEm, oneEm, 'center', 'center', 0.125 * oneEm, [0, 0], oneEm, WritingMode.horizontal);
if (UPDATE) fs.writeFileSync(path.join(__dirname, '/../../expected/text-shaping-spacing.json'), JSON.stringify(shaped, null, 2));
t.deepEqual(shaped, JSON.parse(fs.readFileSync(path.join(__dirname, '/../../expected/text-shaping-spacing.json'))));

// Line break.
shaped = shaping.shapeText('abcde abcde', glyphs, 4 * oneEm, oneEm, 'center', 0.5, 0 * oneEm, [0, 0], oneEm, WritingMode.horizontal);
shaped = shaping.shapeText('abcde abcde', glyphs, 4 * oneEm, oneEm, 'center', 'center', 0 * oneEm, [0, 0], oneEm, WritingMode.horizontal);
if (UPDATE) fs.writeFileSync(path.join(__dirname, '/../../expected/text-shaping-linebreak.json'), JSON.stringify(shaped, null, 2));
t.deepEqual(shaped, require('../../expected/text-shaping-linebreak.json'));

const expectedNewLine = JSON.parse(fs.readFileSync(path.join(__dirname, '/../../expected/text-shaping-newline.json')));

shaped = shaping.shapeText('abcde\nabcde', glyphs, 15 * oneEm, oneEm, 'center', 0.5, 0, [0, 0], oneEm, WritingMode.horizontal);
shaped = shaping.shapeText('abcde\nabcde', glyphs, 15 * oneEm, oneEm, 'center', 'center', 0, [0, 0], oneEm, WritingMode.horizontal);
if (UPDATE) fs.writeFileSync(path.join(__dirname, '/../../expected/text-shaping-newline.json'), JSON.stringify(shaped, null, 2));
t.deepEqual(shaped, expectedNewLine);

shaped = shaping.shapeText('abcde\r\nabcde', glyphs, 15 * oneEm, oneEm, 'center', 0.5, 0, [0, 0], oneEm, WritingMode.horizontal);
shaped = shaping.shapeText('abcde\r\nabcde', glyphs, 15 * oneEm, oneEm, 'center', 'center', 0, [0, 0], oneEm, WritingMode.horizontal);
t.deepEqual(shaped.positionedGlyphs, expectedNewLine.positionedGlyphs);

const expectedNewLinesInMiddle = JSON.parse(fs.readFileSync(path.join(__dirname, '/../../expected/text-shaping-newlines-in-middle.json')));

shaped = shaping.shapeText('abcde\n\nabcde', glyphs, 15 * oneEm, oneEm, 'center', 0.5, 0, [0, 0], oneEm, WritingMode.horizontal);
shaped = shaping.shapeText('abcde\n\nabcde', glyphs, 15 * oneEm, oneEm, 'center', 'center', 0, [0, 0], oneEm, WritingMode.horizontal);
if (UPDATE) fs.writeFileSync(path.join(__dirname, '/../../expected/text-shaping-newlines-in-middle.json'), JSON.stringify(shaped, null, 2));
t.deepEqual(shaped, expectedNewLinesInMiddle);

// Null shaping.
shaped = shaping.shapeText('', glyphs, 15 * oneEm, oneEm, 'center', 0.5, 0 * oneEm, [0, 0], oneEm, WritingMode.horizontal);
shaped = shaping.shapeText('', glyphs, 15 * oneEm, oneEm, 'center', 'center', 0 * oneEm, [0, 0], oneEm, WritingMode.horizontal);
t.equal(false, shaped);

shaped = shaping.shapeText(String.fromCharCode(0), glyphs, 15 * oneEm, oneEm, 'center', 0.5, 0 * oneEm, [0, 0], oneEm, WritingMode.horizontal);
shaped = shaping.shapeText(String.fromCharCode(0), glyphs, 15 * oneEm, oneEm, 'center', 'center', 0 * oneEm, [0, 0], oneEm, WritingMode.horizontal);
t.equal(false, shaped);

// https://github.com/mapbox/mapbox-gl-js/issues/3254
shaped = shaping.shapeText(' foo bar\n', glyphs, 15 * oneEm, oneEm, 'center', 0.5, 0 * oneEm, [0, 0], oneEm, WritingMode.horizontal);
const shaped2 = shaping.shapeText('foo bar', glyphs, 15 * oneEm, oneEm, 'center', 0.5, 0 * oneEm, [0, 0], oneEm, WritingMode.horizontal);
shaped = shaping.shapeText(' foo bar\n', glyphs, 15 * oneEm, oneEm, 'center', 'center', 0 * oneEm, [0, 0], oneEm, WritingMode.horizontal);
const shaped2 = shaping.shapeText('foo bar', glyphs, 15 * oneEm, oneEm, 'center', 'center', 0 * oneEm, [0, 0], oneEm, WritingMode.horizontal);
t.same(shaped.positionedGlyphs, shaped2.positionedGlyphs);

t.end();
Expand Down

0 comments on commit b01514c

Please sign in to comment.