@mapwhit/tilerenderer 0.47.2 → 0.49.0

package/src/symbol/get_anchors.js

@@ -17,7 +17,7 @@ function getAngleWindowSize(shapedText, glyphSize, boxScale) {
   return shapedText ? (3 / 5) * glyphSize * boxScale : 0;
 }
 
-function getLabelLength(shapedText, shapedIcon) {
+function getShapedLabelLength(shapedText, shapedIcon) {
   return Math.max(
     shapedText ? shapedText.right - shapedText.left : 0,
     shapedIcon ? shapedIcon.right - shapedIcon.left : 0
@@ -26,7 +26,7 @@ function getLabelLength(shapedText, shapedIcon) {
 
 function getCenterAnchor(line, maxAngle, shapedText, shapedIcon, glyphSize, boxScale) {
   const angleWindowSize = getAngleWindowSize(shapedText, glyphSize, boxScale);
-  const labelLength = getLabelLength(shapedText, shapedIcon);
+  const labelLength = getShapedLabelLength(shapedText, shapedIcon) * boxScale;
 
   let prevDistance = 0;
   const centerDistance = getLineLength(line) / 2;
@@ -45,11 +45,10 @@ function getCenterAnchor(line, maxAngle, shapedText, shapedIcon, glyphSize, boxS
 
       const anchor = new Anchor(x, y, b.angleTo(a), i);
       anchor._round();
-      if (angleWindowSize && !checkMaxAngle(line, anchor, labelLength, angleWindowSize, maxAngle)) {
-        return;
+      if (!angleWindowSize || checkMaxAngle(line, anchor, labelLength, angleWindowSize, maxAngle)) {
+        return anchor;
       }
-
-      return anchor;
+      return;
     }
 
     prevDistance += segmentDistance;
@@ -62,16 +61,16 @@ function getAnchors(line, spacing, maxAngle, shapedText, shapedIcon, glyphSize,
   // on the line.
 
   const angleWindowSize = getAngleWindowSize(shapedText, glyphSize, boxScale);
-
-  const labelLength = getLabelLength(shapedText, shapedIcon);
+  const shapedLabelLength = getShapedLabelLength(shapedText, shapedIcon);
+  const labelLength = shapedLabelLength * boxScale;
 
   // Is the line continued from outside the tile boundary?
   const isLineContinued = line[0].x === 0 || line[0].x === tileExtent || line[0].y === 0 || line[0].y === tileExtent;
 
   // Is the label long, relative to the spacing?
   // If so, adjust the spacing so there is always a minimum space of `spacing / 4` between label edges.
-  if (spacing - labelLength * boxScale < spacing / 4) {
-    spacing = labelLength * boxScale + spacing / 4;
+  if (spacing - labelLength < spacing / 4) {
+    spacing = labelLength + spacing / 4;
   }
 
   // Offset the first anchor by:
@@ -82,20 +81,10 @@ function getAnchors(line, spacing, maxAngle, shapedText, shapedIcon, glyphSize,
   const fixedExtraOffset = glyphSize * 2;
 
   const offset = !isLineContinued
-    ? ((labelLength / 2 + fixedExtraOffset) * boxScale * overscaling) % spacing
+    ? ((shapedLabelLength / 2 + fixedExtraOffset) * boxScale * overscaling) % spacing
     : ((spacing / 2) * overscaling) % spacing;
 
-  return resample(
-    line,
-    offset,
-    spacing,
-    angleWindowSize,
-    maxAngle,
-    labelLength * boxScale,
-    isLineContinued,
-    false,
-    tileExtent
-  );
+  return resample(line, offset, spacing, angleWindowSize, maxAngle, labelLength, isLineContinued, false, tileExtent);
 }
 
 function resample(

package/src/symbol/mergelines.js

@@ -1,3 +1,5 @@
+const { Formatted } = require('../style-spec/expression/definitions/formatted');
+
 module.exports = function (features) {
   const leftIndex = new Map();
   const rightIndex = new Map();
@@ -5,7 +7,8 @@ module.exports = function (features) {
   let mergedIndex = 0;
 
   for (let k = 0; k < features.length; k++) {
-    const { geometry, text } = features[k];
+    const { geometry, text: featureText } = features[k];
+    const text = featureText instanceof Formatted ? featureText.toString() : featureText;
 
     if (!text) {
       add(k);

package/src/symbol/placement.js

@@ -172,7 +172,12 @@ class Placement {
 
     const collisionGroup = this.collisionGroups.get(bucket.sourceID);
 
-    for (const symbolInstance of bucket.symbolInstances) {
+    if (!bucket.collisionArrays && collisionBoxArray) {
+      bucket.deserializeCollisionBoxes(collisionBoxArray);
+    }
+
+    for (let i = 0; i < bucket.symbolInstances.length; i++) {
+      const symbolInstance = bucket.symbolInstances.get(i);
       if (!seenCrossTileIDs[symbolInstance.crossTileID]) {
         if (holdingForFade) {
           // Mark all symbols from this tile as "not placed", but don't add to seenCrossTileIDs, because we don't
@@ -192,22 +197,14 @@ class Placement {
         let textFeatureIndex = 0;
         let iconFeatureIndex = 0;
 
-        if (!symbolInstance.collisionArrays) {
-          symbolInstance.collisionArrays = bucket.deserializeCollisionBoxes(
-            collisionBoxArray,
-            symbolInstance.textBoxStartIndex,
-            symbolInstance.textBoxEndIndex,
-            symbolInstance.iconBoxStartIndex,
-            symbolInstance.iconBoxEndIndex
-          );
-        }
+        const collisionArrays = bucket.collisionArrays[i];
 
-        if (symbolInstance.collisionArrays.textFeatureIndex) {
-          textFeatureIndex = symbolInstance.collisionArrays.textFeatureIndex;
+        if (collisionArrays.textFeatureIndex) {
+          textFeatureIndex = collisionArrays.textFeatureIndex;
         }
-        if (symbolInstance.collisionArrays.textBox) {
+        if (collisionArrays.textBox) {
           placedGlyphBoxes = this.collisionIndex.placeCollisionBox(
-            symbolInstance.collisionArrays.textBox,
+            collisionArrays.textBox,
             layout.get('text-allow-overlap'),
             textPixelRatio,
             posMatrix,
@@ -216,9 +213,9 @@ class Placement {
           placeText = placedGlyphBoxes.box.length > 0;
           offscreen = offscreen && placedGlyphBoxes.offscreen;
         }
-        const textCircles = symbolInstance.collisionArrays.textCircles;
+        const textCircles = collisionArrays.textCircles;
         if (textCircles) {
-          const placedSymbol = bucket.text.placedSymbolArray.get(symbolInstance.placedTextSymbolIndices[0]);
+          const placedSymbol = bucket.text.placedSymbolArray.get(symbolInstance.horizontalPlacedTextSymbolIndex);
           const fontSize = symbolSize.evaluateSizeForFeature(
             bucket.textSizeData,
             partiallyEvaluatedTextSize,
@@ -229,7 +226,6 @@ class Placement {
             layout.get('text-allow-overlap'),
             scale,
             textPixelRatio,
-            symbolInstance.key,
             placedSymbol,
             bucket.lineVertexArray,
             bucket.glyphOffsetArray,
@@ -248,12 +244,12 @@ class Placement {
           offscreen = offscreen && placedGlyphCircles.offscreen;
         }
 
-        if (symbolInstance.collisionArrays.iconFeatureIndex) {
-          iconFeatureIndex = symbolInstance.collisionArrays.iconFeatureIndex;
+        if (collisionArrays.iconFeatureIndex) {
+          iconFeatureIndex = collisionArrays.iconFeatureIndex;
         }
-        if (symbolInstance.collisionArrays.iconBox) {
+        if (collisionArrays.iconBox) {
           placedIconBoxes = this.collisionIndex.placeCollisionBox(
-            symbolInstance.collisionArrays.iconBox,
+            collisionArrays.iconBox,
             layout.get('icon-allow-overlap'),
             textPixelRatio,
             posMatrix,
@@ -398,16 +394,30 @@ class Placement {
 
     const layout = bucket.layers[0].layout;
     const duplicateOpacityState = new JointOpacityState(null, 0, false, false, true);
+    const textAllowOverlap = layout.get('text-allow-overlap');
+    const iconAllowOverlap = layout.get('icon-allow-overlap');
+    // If allow-overlap is true, we can show symbols before placement runs on them
+    // But we have to wait for placement if we potentially depend on a paired icon/text
+    // with allow-overlap: false.
+    // See https://github.com/mapbox/mapbox-gl-js/issues/7032
     const defaultOpacityState = new JointOpacityState(
       null,
       0,
-      layout.get('text-allow-overlap'),
-      layout.get('icon-allow-overlap'),
+      textAllowOverlap && (iconAllowOverlap || !bucket.hasIconData() || layout.get('icon-optional')),
+      iconAllowOverlap && (textAllowOverlap || !bucket.hasTextData() || layout.get('text-optional')),
       true
     );
 
+    if (
+      !bucket.collisionArrays &&
+      collisionBoxArray &&
+      (bucket.hasCollisionBoxData() || bucket.hasCollisionCircleData())
+    ) {
+      bucket.deserializeCollisionBoxes(collisionBoxArray);
+    }
+
     for (let s = 0; s < bucket.symbolInstances.length; s++) {
-      const symbolInstance = bucket.symbolInstances[s];
+      const symbolInstance = bucket.symbolInstances.get(s);
       const isDuplicate = seenCrossTileIDs[symbolInstance.crossTileID];
 
       let opacityState = this.opacities[symbolInstance.crossTileID];
@@ -432,11 +442,14 @@ class Placement {
         for (let i = 0; i < opacityEntryCount; i++) {
           bucket.text.opacityVertexArray.emplaceBack(packedOpacity);
         }
-        for (const placedTextSymbolIndex of symbolInstance.placedTextSymbolIndices) {
-          const placedSymbol = bucket.text.placedSymbolArray.get(placedTextSymbolIndex);
-          // If this label is completely faded, mark it so that we don't have to calculate
-          // its position at render time
-          placedSymbol.hidden = opacityState.text.isHidden();
+        // If this label is completely faded, mark it so that we don't have to calculate
+        // its position at render time
+        bucket.text.placedSymbolArray.get(symbolInstance.horizontalPlacedTextSymbolIndex).hidden =
+          opacityState.text.isHidden();
+
+        if (symbolInstance.verticalPlacedTextSymbolIndex >= 0) {
+          bucket.text.placedSymbolArray.get(symbolInstance.verticalPlacedTextSymbolIndex).hidden =
+            opacityState.text.isHidden();
         }
       }
 
@@ -445,35 +458,26 @@ class Placement {
         for (let i = 0; i < symbolInstance.numIconVertices / 4; i++) {
           bucket.icon.opacityVertexArray.emplaceBack(packedOpacity);
         }
-        const placedSymbol = bucket.icon.placedSymbolArray.get(s);
-        placedSymbol.hidden = opacityState.icon.isHidden();
+        bucket.icon.placedSymbolArray.get(s).hidden = opacityState.icon.isHidden();
       }
 
-      if (!symbolInstance.collisionArrays) {
-        symbolInstance.collisionArrays = bucket.deserializeCollisionBoxes(
-          collisionBoxArray,
-          symbolInstance.textBoxStartIndex,
-          symbolInstance.textBoxEndIndex,
-          symbolInstance.iconBoxStartIndex,
-          symbolInstance.iconBoxEndIndex
-        );
-      }
-
-      const collisionArrays = symbolInstance.collisionArrays;
-      if (collisionArrays) {
-        if (collisionArrays.textBox && bucket.hasCollisionBoxData()) {
-          updateCollisionVertices(bucket.collisionBox.collisionVertexArray, opacityState.text.placed, false);
-        }
+      if (bucket.hasCollisionBoxData() || bucket.hasCollisionCircleData()) {
+        const collisionArrays = bucket.collisionArrays[s];
+        if (collisionArrays) {
+          if (collisionArrays.textBox) {
+            updateCollisionVertices(bucket.collisionBox.collisionVertexArray, opacityState.text.placed, false);
+          }
 
-        if (collisionArrays.iconBox && bucket.hasCollisionBoxData()) {
-          updateCollisionVertices(bucket.collisionBox.collisionVertexArray, opacityState.icon.placed, false);
-        }
+          if (collisionArrays.iconBox) {
+            updateCollisionVertices(bucket.collisionBox.collisionVertexArray, opacityState.icon.placed, false);
+          }
 
-        const textCircles = collisionArrays.textCircles;
-        if (textCircles && bucket.hasCollisionCircleData()) {
-          for (let k = 0; k < textCircles.length; k += 5) {
-            const notUsed = isDuplicate || textCircles[k + 4] === 0;
-            updateCollisionVertices(bucket.collisionCircle.collisionVertexArray, opacityState.text.placed, notUsed);
+          const textCircles = collisionArrays.textCircles;
+          if (textCircles && bucket.hasCollisionCircleData()) {
+            for (let k = 0; k < textCircles.length; k += 5) {
+              const notUsed = isDuplicate || textCircles[k + 4] === 0;
+              updateCollisionVertices(bucket.collisionCircle.collisionVertexArray, opacityState.text.placed, notUsed);
+            }
           }
         }
       }

package/src/symbol/quads.js

@@ -105,7 +105,8 @@ function getGlyphQuads(anchor, shaping, layer, alongLine, feature, positions) {
 
   for (let k = 0; k < positionedGlyphs.length; k++) {
     const positionedGlyph = positionedGlyphs[k];
-    const glyph = positions[positionedGlyph.glyph];
+    const glyphPositions = positions[positionedGlyph.fontStack];
+    const glyph = glyphPositions?.[positionedGlyph.glyph];
     if (!glyph) continue;
 
     const rect = glyph.rect;
@@ -115,7 +116,7 @@ function getGlyphQuads(anchor, shaping, layer, alongLine, feature, positions) {
     const glyphPadding = 1.0;
     const rectBuffer = GLYPH_PBF_BORDER + glyphPadding;
 
-    const halfAdvance = glyph.metrics.advance / 2;
+    const halfAdvance = (glyph.metrics.advance * positionedGlyph.scale) / 2;
 
     const glyphOffset = alongLine ? [positionedGlyph.x + halfAdvance, positionedGlyph.y] : [0, 0];
 
@@ -123,10 +124,10 @@ function getGlyphQuads(anchor, shaping, layer, alongLine, feature, positions) {
       ? [0, 0]
       : [positionedGlyph.x + halfAdvance + textOffset[0], positionedGlyph.y + textOffset[1]];
 
-    const x1 = glyph.metrics.left - rectBuffer - halfAdvance + builtInOffset[0];
-    const y1 = -glyph.metrics.top - rectBuffer + builtInOffset[1];
-    const x2 = x1 + rect.w;
-    const y2 = y1 + rect.h;
+    const x1 = (glyph.metrics.left - rectBuffer) * positionedGlyph.scale - halfAdvance + builtInOffset[0];
+    const y1 = (-glyph.metrics.top - rectBuffer) * positionedGlyph.scale + builtInOffset[1];
+    const x2 = x1 + rect.w * positionedGlyph.scale;
+    const y2 = y1 + rect.h * positionedGlyph.scale;
 
     const tl = new Point(x1, y1);
     const tr = new Point(x2, y1);

package/src/symbol/shaping.js

@@ -1,6 +1,7 @@
 const { charHasUprightVerticalOrientation, charAllowsIdeographicBreaking } = require('../util/script_detection');
 const verticalizePunctuation = require('../util/verticalize_punctuation');
 const { plugin: rtlTextPlugin } = require('../source/rtl_text_plugin');
+const { Formatted } = require('../style-spec/expression/definitions/formatted');
 
 const WritingMode = {
   horizontal: 1,
@@ -14,20 +15,94 @@ module.exports = {
   WritingMode
 };
 
-// The position of a glyph relative to the text's anchor point.
+class TaggedString {
+  constructor() {
+    this.text = '';
+    this.sectionIndex = []; // maps each character in 'text' to its corresponding entry in 'sections'
+    this.sections = [];
+  }
 
-// A collection of positioned glyphs and some metadata
+  static fromFeature(text, defaultFontStack) {
+    const result = new TaggedString();
+    if (text instanceof Formatted) {
+      for (let i = 0; i < text.sections.length; i++) {
+        const section = text.sections[i];
+        result.sections.push({
+          scale: section.scale || 1,
+          fontStack: section.fontStack || defaultFontStack
+        });
+        result.text += section.text;
+        for (let j = 0; j < section.text.length; j++) {
+          result.sectionIndex.push(i);
+        }
+      }
+    } else {
+      result.text = text;
+      result.sections.push({ scale: 1, fontStack: defaultFontStack });
+      for (let i = 0; i < text.length; i++) {
+        result.sectionIndex.push(0);
+      }
+    }
+    return result;
+  }
+
+  length() {
+    return this.text.length;
+  }
+
+  getSection(index) {
+    return this.sections[this.sectionIndex[index]];
+  }
+
+  getCharCode(index) {
+    return this.text.charCodeAt(index);
+  }
+
+  verticalizePunctuation() {
+    this.text = verticalizePunctuation(this.text);
+  }
+
+  trim() {
+    let beginningWhitespace = 0;
+    for (let i = 0; i < this.text.length && whitespace[this.text.charCodeAt(i)]; i++) {
+      beginningWhitespace++;
+    }
+    let trailingWhitespace = this.text.length;
+    for (let i = this.text.length - 1; i >= 0 && i >= beginningWhitespace && whitespace[this.text.charCodeAt(i)]; i--) {
+      trailingWhitespace--;
+    }
+    this.text = this.text.substring(beginningWhitespace, trailingWhitespace);
+    this.sectionIndex = this.sectionIndex.slice(beginningWhitespace, trailingWhitespace);
+  }
 
-function breakLines(text, lineBreakPoints) {
+  substring(start, end) {
+    const substring = new TaggedString();
+    substring.text = this.text.substring(start, end);
+    substring.sectionIndex = this.sectionIndex.slice(start, end);
+    substring.sections = this.sections;
+    return substring;
+  }
+
+  toString() {
+    return this.text;
+  }
+
+  getMaxScale() {
+    return this.sectionIndex.reduce((max, index) => Math.max(max, this.sections[index].scale), 0);
+  }
+}
+
+function breakLines(input, lineBreakPoints) {
   const lines = [];
+  const text = input.text;
   let start = 0;
   for (const lineBreak of lineBreakPoints) {
-    lines.push(text.substring(start, lineBreak));
+    lines.push(input.substring(start, lineBreak));
     start = lineBreak;
   }
 
   if (start < text.length) {
-    lines.push(text.substring(start, text.length));
+    lines.push(input.substring(start, text.length));
   }
   return lines;
 }
@@ -35,6 +110,7 @@ function breakLines(text, lineBreakPoints) {
 function shapeText(
   text,
   glyphs,
+  defaultFontStack,
   maxWidth,
   lineHeight,
   textAnchor,
@@ -44,9 +120,9 @@ function shapeText(
   verticalHeight,
   writingMode
 ) {
-  let logicalInput = text.trim();
+  const logicalInput = TaggedString.fromFeature(text, defaultFontStack);
   if (writingMode === WritingMode.vertical) {
-    logicalInput = verticalizePunctuation(logicalInput);
+    logicalInput.verticalizePunctuation();
   }
 
   const positionedGlyphs = [];
@@ -62,9 +138,39 @@ function shapeText(
 
   let lines;
 
-  const { processBidirectionalText } = rtlTextPlugin;
-  if (processBidirectionalText) {
-    lines = processBidirectionalText(logicalInput, determineLineBreaks(logicalInput, spacing, maxWidth, glyphs));
+  const { processBidirectionalText, processStyledBidirectionalText } = rtlTextPlugin;
+  if (processBidirectionalText && logicalInput.sections.length === 1) {
+    // Bidi doesn't have to be style-aware
+    lines = [];
+    const untaggedLines = processBidirectionalText(
+      logicalInput.toString(),
+      determineLineBreaks(logicalInput, spacing, maxWidth, glyphs)
+    );
+    for (const line of untaggedLines) {
+      const taggedLine = new TaggedString();
+      taggedLine.text = line;
+      taggedLine.sections = logicalInput.sections;
+      for (let i = 0; i < line.length; i++) {
+        taggedLine.sectionIndex.push(0);
+      }
+      lines.push(taggedLine);
+    }
+  } else if (processStyledBidirectionalText) {
+    // Need version of mapbox-gl-rtl-text with style support for combining RTL text
+    // with formatting
+    lines = [];
+    const processedLines = processStyledBidirectionalText(
+      logicalInput.text,
+      logicalInput.sectionIndex,
+      determineLineBreaks(logicalInput, spacing, maxWidth, glyphs)
+    );
+    for (const line of processedLines) {
+      const taggedLine = new TaggedString();
+      taggedLine.text = line[0];
+      taggedLine.sectionIndex = line[1];
+      taggedLine.sections = logicalInput.sections;
+      lines.push(taggedLine);
+    }
   } else {
     lines = breakLines(logicalInput, determineLineBreaks(logicalInput, spacing, maxWidth, glyphs));
   }
@@ -73,6 +179,7 @@ function shapeText(
 
   if (!positionedGlyphs.length) return false;
 
+  shaping.text = shaping.text.toString();
   return shaping;
 }
 
@@ -105,13 +212,15 @@ const breakable = {
   // See https://github.com/mapbox/mapbox-gl-js/issues/3658
 };
 
-function determineAverageLineWidth(logicalInput, spacing, maxWidth, glyphs) {
+function determineAverageLineWidth(logicalInput, spacing, maxWidth, glyphMap) {
   let totalWidth = 0;
 
-  for (let index = 0; index < logicalInput.length; index++) {
-    const glyph = glyphs[logicalInput.charCodeAt(index)];
+  for (let index = 0; index < logicalInput.length(); index++) {
+    const section = logicalInput.getSection(index);
+    const positions = glyphMap[section.fontStack];
+    const glyph = positions?.[logicalInput.getCharCode(index)];
     if (!glyph) continue;
-    totalWidth += glyph.metrics.advance + spacing;
+    totalWidth += glyph.metrics.advance * section.scale + spacing;
   }
 
   const lineCount = Math.max(1, Math.ceil(totalWidth / maxWidth));
@@ -182,39 +291,41 @@ function leastBadBreaks(lastLineBreak) {
   return leastBadBreaks(lastLineBreak.priorBreak).concat(lastLineBreak.index);
 }
 
-function determineLineBreaks(logicalInput, spacing, maxWidth, glyphs) {
+function determineLineBreaks(logicalInput, spacing, maxWidth, glyphMap) {
   if (!maxWidth) return [];
 
   if (!logicalInput) return [];
 
   const potentialLineBreaks = [];
-  const targetWidth = determineAverageLineWidth(logicalInput, spacing, maxWidth, glyphs);
+  const targetWidth = determineAverageLineWidth(logicalInput, spacing, maxWidth, glyphMap);
 
   let currentX = 0;
 
-  for (let i = 0; i < logicalInput.length; i++) {
-    const codePoint = logicalInput.charCodeAt(i);
-    const glyph = glyphs[codePoint];
+  for (let i = 0; i < logicalInput.length(); i++) {
+    const section = logicalInput.getSection(i);
+    const codePoint = logicalInput.getCharCode(i);
+    const positions = glyphMap[section.fontStack];
+    const glyph = positions?.[codePoint];
 
-    if (glyph && !whitespace[codePoint]) currentX += glyph.metrics.advance + spacing;
+    if (glyph && !whitespace[codePoint]) currentX += glyph.metrics.advance * section.scale + spacing;
 
     // Ideographic characters, spaces, and word-breaking punctuation that often appear without
     // surrounding spaces.
-    if (i < logicalInput.length - 1 && (breakable[codePoint] || charAllowsIdeographicBreaking(codePoint))) {
+    if (i < logicalInput.length() - 1 && (breakable[codePoint] || charAllowsIdeographicBreaking(codePoint))) {
       potentialLineBreaks.push(
         evaluateBreak(
           i + 1,
           currentX,
           targetWidth,
           potentialLineBreaks,
-          calculatePenalty(codePoint, logicalInput.charCodeAt(i + 1)),
+          calculatePenalty(codePoint, logicalInput.getCharCode(i + 1)),
           false
         )
       );
     }
   }
 
-  return leastBadBreaks(evaluateBreak(logicalInput.length, currentX, targetWidth, potentialLineBreaks, 0, true));
+  return leastBadBreaks(evaluateBreak(logicalInput.length(), currentX, targetWidth, potentialLineBreaks, 0, true));
 }
 
 function getAnchorAlignment(anchor) {
@@ -250,7 +361,17 @@ function getAnchorAlignment(anchor) {
   return { horizontalAlign, verticalAlign };
 }
 
-function shapeLines(shaping, glyphs, lines, lineHeight, textAnchor, textJustify, writingMode, spacing, verticalHeight) {
+function shapeLines(
+  shaping,
+  glyphMap,
+  lines,
+  lineHeight,
+  textAnchor,
+  textJustify,
+  writingMode,
+  spacing,
+  verticalHeight
+) {
   // the y offset *should* be part of the font metadata
   const yOffset = -17;
 
@@ -262,27 +383,49 @@ function shapeLines(shaping, glyphs, lines, lineHeight, textAnchor, textJustify,
 
   const justify = textJustify === 'right' ? 1 : textJustify === 'left' ? 0 : 0.5;
 
-  for (let line of lines) {
-    line = line.trim();
+  for (const line of lines) {
+    line.trim();
+
+    const lineMaxScale = line.getMaxScale();
 
-    if (!line.length) {
+    if (!line.length()) {
       y += lineHeight; // Still need a line feed after empty line
       continue;
     }
 
     const lineStartIndex = positionedGlyphs.length;
-    for (let i = 0; i < line.length; i++) {
-      const codePoint = line.charCodeAt(i);
-      const glyph = glyphs[codePoint];
+    for (let i = 0; i < line.length(); i++) {
+      const section = line.getSection(i);
+      const codePoint = line.getCharCode(i);
+      // We don't know the baseline, but since we're laying out
+      // at 24 points, we can calculate how much it will move when
+      // we scale up or down.
+      const baselineOffset = (lineMaxScale - section.scale) * 24;
+      const positions = glyphMap[section.fontStack];
+      const glyph = positions?.[codePoint];
 
       if (!glyph) continue;
 
       if (!charHasUprightVerticalOrientation(codePoint) || writingMode === WritingMode.horizontal) {
-        positionedGlyphs.push({ glyph: codePoint, x, y, vertical: false });
-        x += glyph.metrics.advance + spacing;
+        positionedGlyphs.push({
+          glyph: codePoint,
+          x,
+          y: y + baselineOffset,
+          vertical: false,
+          scale: section.scale,
+          fontStack: section.fontStack
+        });
+        x += glyph.metrics.advance * section.scale + spacing;
       } else {
-        positionedGlyphs.push({ glyph: codePoint, x, y: 0, vertical: true });
-        x += verticalHeight + spacing;
+        positionedGlyphs.push({
+          glyph: codePoint,
+          x,
+          y: baselineOffset,
+          vertical: true,
+          scale: section.scale,
+          fontStack: section.fontStack
+        });
+        x += verticalHeight * section.scale + spacing;
       }
     }
 
@@ -291,18 +434,18 @@ function shapeLines(shaping, glyphs, lines, lineHeight, textAnchor, textJustify,
       const lineLength = x - spacing;
       maxLineLength = Math.max(lineLength, maxLineLength);
 
-      justifyLine(positionedGlyphs, glyphs, lineStartIndex, positionedGlyphs.length - 1, justify);
+      justifyLine(positionedGlyphs, glyphMap, lineStartIndex, positionedGlyphs.length - 1, justify);
     }
 
     x = 0;
-    y += lineHeight;
+    y += lineHeight * lineMaxScale;
   }
 
   const { horizontalAlign, verticalAlign } = getAnchorAlignment(textAnchor);
   align(positionedGlyphs, justify, horizontalAlign, verticalAlign, maxLineLength, lineHeight, lines.length);
 
   // Calculate the bounding box
-  const height = lines.length * lineHeight;
+  const height = y - yOffset;
 
   shaping.top += -verticalAlign * height;
   shaping.bottom = shaping.top + height;
@@ -311,12 +454,14 @@ function shapeLines(shaping, glyphs, lines, lineHeight, textAnchor, textJustify,
 }
 
 // justify right = 1, left = 0, center = 0.5
-function justifyLine(positionedGlyphs, glyphs, start, end, justify) {
+function justifyLine(positionedGlyphs, glyphMap, start, end, justify) {
   if (!justify) return;
 
-  const glyph = glyphs[positionedGlyphs[end].glyph];
+  const lastPositionedGlyph = positionedGlyphs[end];
+  const positions = glyphMap[lastPositionedGlyph.fontStack];
+  const glyph = positions?.[lastPositionedGlyph.glyph];
   if (glyph) {
-    const lastAdvance = glyph.metrics.advance;
+    const lastAdvance = glyph.metrics.advance * lastPositionedGlyph.scale;
     const lineIndent = (positionedGlyphs[end].x + lastAdvance) * justify;
 
     for (let j = start; j <= end; j++) {