add support for the word-spacing css property

Author: chearon

README.md

@@ -44,6 +44,7 @@ Following are rules that work or will work soon. Shorthand properties are not li
 | <code>vertical-&zwj;align</code> | `baseline`, `middle`, `sub`, `super`, `text-top`, `text-bottom`, `%`, `px` etc, `top`, `bottom` | ✅&zwj;&nbsp;Works |
 | <code>white-&zwj;space</code> | `normal`, `nowrap`, `pre`, `pre-wrap`, `pre-line` | ✅&zwj;&nbsp;Works |
 | <code>word-&zwj;break</code><br><code>overflow-&zwj;wrap</code>,<code>word-&zwj;wrap</code> | `break-word`, `normal`<br>`anywhere`, `normal` | ✅&zwj;&nbsp;Works |
+| <code>word-&zwj;spacing</code> | `normal`, `%`, `number` | ✅&zwj;&nbsp;Works |
 
 ## Block formatting
 

src/layout-box.ts

@@ -154,15 +154,16 @@ export abstract class Box extends TreeNode {
     hasSoftHyphen:             1 << 10,
     hasNewlines:               1 << 11,
     hasSoftWrap:               1 << 12,
-    // 13..14: propagation bits: Inline <- Inline
-    hasPaintedInlines:         1 << 13,
-    hasSizedInline:            1 << 14,
-    // 15: propagation bits: Inline <- Break, Inline, ReplacedBox
-    hasBreakInlineOrReplaced:  1 << 15,
-    // 16..17: propagation bits: Inline <- FormattingBox
-    hasFloatOrReplaced:        1 << 16,
-    hasInlineBlocks:           1 << 17,
-    // 18..31: if you take them, remove them from PROPAGATES_TO_INLINE_BITS
+    hasWordSpacing:            1 << 13,
+    // 14..15: propagation bits: Inline <- Inline
+    hasPaintedInlines:         1 << 14,
+    hasSizedInline:            1 << 15,
+    // 16: propagation bits: Inline <- Break, Inline, ReplacedBox
+    hasBreakInlineOrReplaced:  1 << 16,
+    // 17..18: propagation bits: Inline <- FormattingBox
+    hasFloatOrReplaced:        1 << 17,
+    hasInlineBlocks:           1 << 18,
+    // 19..31: if you take them, remove them from PROPAGATES_TO_INLINE_BITS
   };
 
   /**

src/layout-flow.ts

@@ -932,6 +932,43 @@ export class BlockContainerOfInlines extends BlockContainerBase {
     return true;
   }
 
+  getRunIndex(layout: Layout, ci: number) {
+    let l = this.treeStart, r = this.treeFinal;
+
+    while (true) {
+      const i = Math.floor((l + r) / 2);
+
+      if (layout.tree[i].isRun()) {
+        if (ci < layout.tree[i].textStart) {
+          r = i - 1;
+        } else if (ci >= layout.tree[i].textEnd) {
+          l = i + 1;
+        } else {
+          return i;
+        }
+      } else if (layout.tree[i].isInline()) {
+        if (ci < layout.tree[i].textStart) {
+          r = i - 1;
+        } else {
+          l = i + 1;
+        }
+      } else { // inline-block, float, or image. pick a side.
+        let ml = i;
+        let mr = i;
+
+        while (mr < r && !layout.tree[mr].isRun() && !layout.tree[mr].isInline()) mr++;
+        while (ml > l && !layout.tree[ml].isRun() && !layout.tree[ml].isInline()) ml--;
+
+        const item = layout.tree[mr];
+        if ((item.isRun() || item.isInline()) && ci < item.textStart) {
+          r = ml;
+        } else {
+          l = mr;
+        }
+      }
+    }
+  }
+
   loggingEnabled() {
     return Boolean(this.bitfield & Box.BITS.enableLogging);
   }
@@ -1303,6 +1340,10 @@ export class Inline extends Box {
     return this.bitfield & Box.BITS.hasSoftWrap;
   }
 
+  hasWordSpacing() {
+    return this.bitfield & Box.BITS.hasWordSpacing;
+  }
+
   hasFloatOrReplaced() {
     return this.bitfield & Box.BITS.hasFloatOrReplaced;
   }

src/layout-text.ts

@@ -51,6 +51,14 @@ function isNewline(c: string) {
   return c === '\n';
 }
 
+function isWordSeparator(c: string): boolean {
+  // Specs say to treat U+1361, Ethiopic Word Space, as a word separator, but
+  // digitized Ethiopic usually has spaces. Browsers don't support it either;
+  // doing so would be complicated since the ink has to be centered. Specs also
+  // say to handle Agean, Ugaritic, and Phoenician, but these are extinct.
+  return c === ' ' || c === '\u00a0';
+}
+
 function graphemeBoundaries(text: string, index: number) {
   const graphemeEnd = nextGraphemeBreak(text, index);
   const graphemeStart = previousGraphemeBreak(text, graphemeEnd);
@@ -122,6 +130,10 @@ export class Run extends TreeNode {
       parent.bitfield |= Run.TEXT_BITS;
     }
 
+    if (this.style.wordSpacing !== 'normal') {
+      parent.bitfield |= Box.BITS.hasWordSpacing;
+    }
+
     for (let i = this.textStart; i < this.textEnd; i++) {
       const code = paragraph.charCodeAt(i);
 
@@ -561,6 +573,44 @@ export const EmptyInlineMetrics: Readonly<InlineMetrics> = Object.freeze({
   descenderBox: 0
 });
 
+class WordIterator {
+  item: ShapedItem;
+  textEnd: number;
+  state: MeasureState;
+  /* out */
+  start: number;
+  end: number;
+  x: number;
+  w: number;
+  done: boolean;
+
+  constructor(item: ShapedItem, textStart: number, textEnd: number) {
+    this.item = item;
+    this.textEnd = textEnd;
+    this.state = item.createMeasureState();
+    this.start = textStart;
+    this.end = textStart;
+    this.x = 0;
+    this.w = 0;
+    this.done = false;
+    item.measure(textStart, 1, this.state);
+    this.next();
+  }
+
+  next() {
+    const s = this.item.ifc.text;
+    while (this.end < this.textEnd && isWordSeparator(s[this.end])) this.end++;
+    this.start = this.end;
+    while (this.end < this.textEnd && !isWordSeparator(s[this.end])) this.end++;
+    if (this.start < this.end) {
+      this.x = this.item.measure(this.start, 1, this.state).advance;
+      this.w = this.item.measure(this.end, 1, this.state).advance;
+    } else {
+      this.done = true;
+    }
+  }
+}
+
 export class ShapedItem implements IfcRenderItem {
   ifc: BlockContainerOfInlines;
   face: LoadedFontFace;
@@ -804,6 +854,20 @@ export class ShapedItem implements IfcRenderItem {
     return ci > this.offset && ci < this.end();
   }
 
+  createWordIterator(textStart: number, textEnd: number) {
+    return new WordIterator(this, textStart, textEnd);
+  }
+
+  mayHaveModifiedWordSepGlyphs(layout: Layout) {
+    if (this.inlines.length) {
+      return this.inlines[this.inlines.length - 1].hasWordSpacing();
+    } else {
+      const rootInline = layout.tree[this.ifc.treeStart + 1];
+      if (!rootInline.isInline()) throw new Error('Assertion failed');
+      return rootInline.hasWordSpacing();
+    }
+  }
+
   // only use this in debugging or tests
   text() {
     return this.ifc.text.slice(this.offset, this.offset + this.length);
@@ -1832,6 +1896,63 @@ function postShapeLoadHyphens(ifc: BlockContainerOfInlines, items: ShapedItem[])
   }
 }
 
+function postShapeAddWordSpacing(
+  layout: Layout,
+  ifc: BlockContainerOfInlines,
+  items: ShapedItem[],
+  inlineIndex: number,
+  itemIndex: number,
+  endItem: number
+) {
+  while (inlineIndex <= ifc.treeFinal && itemIndex < endItem) {
+    const box = layout.tree[inlineIndex];
+    if (box.isRun() && box.style.wordSpacing !== 'normal') {
+      while ( // Forward to the item that owns the textOffset
+        itemIndex + 1 < endItem &&
+        items[itemIndex + 1].offset <= box.textStart
+      ) itemIndex++;
+
+      while (
+        itemIndex < endItem &&
+        items[itemIndex].offset < box.textEnd
+      ) {
+        const item = items[itemIndex];
+        const {wordSpacing, fontSize} = box.style;
+        let addPx = typeof wordSpacing === 'number' ? wordSpacing
+          : wordSpacing.value / 100 * fontSize;
+
+        const addUnits = addPx * item.face.hbface.upem / fontSize;
+
+        // TODO this isn't... super great, iterating the same glyphs array
+        // multiple times if multiple inlines cover it, but this is typically
+        // extremely fast, plus inline word-spacing is probably rare. Still,
+        // if/when looking at generalizing glyph/span walking, try to improve.
+        for (let i = 0; i < item.glyphs.length; i = nextCluster(item.glyphs, i)) {
+          const cl = item.glyphs[i + G_CL];
+          if (isWordSeparator(item.ifc.text[cl])) {
+            if (cl >= box.textStart && cl < box.textEnd) {
+              item.glyphs[i + G_AX] += addUnits;
+            }
+          }
+        }
+
+        if (items[itemIndex].end() <= box.textEnd) {
+          itemIndex++;
+        } else {
+          break; // spans into next inline
+        }
+      }
+    } else if (box.isBox()) {
+      if (box.isInline() && box.hasWordSpacing()) {
+        // descend
+      } else {
+        inlineIndex = box.treeFinal; // skip
+      }
+    }
+    inlineIndex++;
+  }
+}
+
 function shapePart(
   ifc: BlockContainerOfInlines,
   offset: number,
@@ -1988,6 +2109,9 @@ export function createIfcShapedItems(
   items.sort((a, b) => a.offset - b.offset);
 
   if (inlineRoot.hasSoftHyphen()) postShapeLoadHyphens(ifc, items);
+  if (inlineRoot.hasWordSpacing()) {
+    postShapeAddWordSpacing(layout, ifc, items, ifc.treeStart + 2, 0, items.length);
+  }
 
   return items;
 }
@@ -2199,16 +2323,26 @@ export function getIfcContribution(
   return contribution;
 }
 
-function splitItem(ifc: BlockContainerOfInlines, itemIndex: number, offset: number) {
+function splitItem(
+  layout: Layout,
+  ifc: BlockContainerOfInlines,
+  itemIndex: number,
+  offset: number
+) {
   const left = ifc.items[itemIndex];
   const {needsReshape, right} = left.split(offset - left.offset);
 
+  ifc.items.splice(itemIndex + 1, 0, right);
+
   if (needsReshape) {
+    const inlineIndex = ifc.getRunIndex(layout, left.offset);
     left.reshape(true);
     right.reshape(false);
+    if (left.mayHaveModifiedWordSepGlyphs(layout)) {
+      postShapeAddWordSpacing(layout, ifc, ifc.items, inlineIndex, itemIndex, itemIndex + 2);
+    }
   }
 
-  ifc.items.splice(itemIndex + 1, 0, right);
   if (ifc.text[offset - 1] === '\u00ad' /* softHyphenCharacter */) {
     const hyphen = getHyphen(left)?.glyphs;
     if (hyphen?.length) {
@@ -2387,7 +2521,7 @@ export function createIfcLineboxes(
         const lastBreakMarkItem = ifc.items[lastBreakMark.itemIndex];
 
         if (lastBreakMarkItem?.hasCharacterInside(lastBreakMark.position)) {
-          splitItem(ifc, lastBreakMark.itemIndex, lastBreakMark.position);
+          splitItem(layout, ifc, lastBreakMark.itemIndex, lastBreakMark.position);
           lastBreakMark.split(mark);
           candidates.unshift(ifc.items[lastBreakMark.itemIndex]);
           // Stamp the brand new line with its metrics, since the only other

src/paint-canvas.ts

@@ -153,7 +153,6 @@ export default class CanvasPaintBackend implements PaintBackend {
   }
 
   fastText(x: number, y: number, item: ShapedItem, textStart: number, textEnd: number) {
-    const text = item.ifc.sliceRenderText(this.layout, item, textStart, textEnd);
     const {r, g, b, a} = this.fillColor;
     this.ctx.save();
     this.ctx.direction = item.attrs.level & 1 ? 'rtl' : 'ltr';
@@ -165,7 +164,24 @@ export default class CanvasPaintBackend implements PaintBackend {
     }
     this.ctx.font = this.font?.toFontString(this.fontSize) || '';
     this.ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`;
-    this.ctx.fillText(text, x, y);
+    if (item.mayHaveModifiedWordSepGlyphs(this.layout)) {
+      if (item.attrs.level & 1) {
+        const state = item.createMeasureState();
+        item.measure(textStart, 1, state);
+        x += item.measure(textEnd, 1, state).advance;
+      }
+      const words = item.createWordIterator(textStart, textEnd);
+      for (; !words.done; words.next()) {
+        const text = item.ifc.sliceRenderText(this.layout, item, words.start, words.end);
+        x += item.attrs.level & 1 ? -words.x : words.x;
+        if (item.attrs.level & 1) x -= words.w;
+        this.ctx.fillText(text, x, y);
+        if (!(item.attrs.level & 1)) x += words.w;
+      }
+    } else {
+      const text = item.ifc.sliceRenderText(this.layout, item, textStart, textEnd);
+      this.ctx.fillText(text, x, y);
+    }
     this.ctx.restore();
   }
 
@@ -194,7 +210,14 @@ export default class CanvasPaintBackend implements PaintBackend {
     this.ctx.restore();
   }
 
-  text(x: number, y: number, item: ShapedItem, totalTextStart: number, totalTextEnd: number, isColorBoundary: boolean) {
+  text(
+    x: number,
+    y: number,
+    item: ShapedItem,
+    totalTextStart: number,
+    totalTextEnd: number,
+    isColorBoundary: boolean
+  ) {
     if (isColorBoundary) {
       const {
         startGlyphStart,

src/paint-svg.ts

@@ -95,7 +95,6 @@ export default class SvgPaintBackend implements PaintBackend {
   }
 
   text(x: number, y: number, item: ShapedItem, textStart: number, textEnd: number) {
-    const text = item.ifc.sliceRenderText(this.layout, item, textStart, textEnd).trim();
     const {r, g, b, a} = this.fillColor;
     const color = `rgba(${r}, ${g}, ${b}, ${a})`;
     const style = this.style({
@@ -114,7 +113,20 @@ export default class SvgPaintBackend implements PaintBackend {
     // be the only way to get around that.
     if (this.direction === 'rtl') x += item.measure().advance;
 
-    this.main += `<text x="${x}" y="${y}" style="${encode(style)}" fill="${color}" ${clipPath}>${encode(text)}</text>`;
+    if (item.mayHaveModifiedWordSepGlyphs(this.layout)) {
+      const words = item.createWordIterator(textStart, textEnd);
+      if (item.attrs.level & 1) x += item.measure().advance;
+      for (; !words.done; words.next()) {
+        const text = item.ifc.sliceRenderText(this.layout, item, words.start, words.end);
+        x += item.attrs.level & 1 ? -words.x : words.x;
+        if (item.attrs.level & 1) x -= words.w;
+        this.main += `<text x="${x}" y="${y}" style="${encode(style)}" fill="${color}" ${clipPath}>${encode(text)}</text>`;
+        if (!(item.attrs.level & 1)) x += words.w;
+      }
+    } else {
+      const text = item.ifc.sliceRenderText(this.layout, item, textStart, textEnd);
+      this.main += `<text x="${x}" y="${y}" style="${encode(style)}" fill="${color}" ${clipPath}>${encode(text)}</text>`;
+    }
     this.usedFonts.set(item.face.url.href, item.face);
   }