chore: update text chapter in readme

README.md

@@ -169,6 +169,14 @@ pnpm run dev
 
 <img src="./screenshots/lesson14.png" width="300" alt="Lesson 14 - canvas mode">
 
+## Lesson 15 - Draw text [🔗](https://infinitecanvas.cc/guide/lesson-015)
+
+-   What's TextMetrics and how to get it in server and browser side
+-   What's shaping
+-   Paragraph layout, wordbreak, BiDi and cluster
+-   How to generate SDF atlas and use it to draw
+-   How to handle emoji
+
 [infinitecanvas]: https://infinitecanvas.tools/
 [Figma]: https://madebyevan.com/figma/building-a-professional-design-tool-on-the-web/
 [Modyfi]: https://digest.browsertech.com/archive/browsertech-digest-how-modyfi-is-building-with/

README.zh_CN.md

@@ -169,6 +169,14 @@ pnpm run dev
 
 <img src="./screenshots/lesson14.png" width="300" alt="Lesson 14 - canvas mode">
 
+## 课程 15 - 绘制文本 [🔗](https://infinitecanvas.cc/zh/guide/lesson-015)
+
+-   什么是 TextMetrics，如何在服务端和浏览器端获取
+-   什么是 Shaping
+-   处理段落。分段与自动换行、BiDi 和 cluster
+-   如何生成 SDF atlas 并使用它绘制
+-   如何处理 emoji
+
 [infinitecanvas]: https://infinitecanvas.tools/
 [Figma]: https://madebyevan.com/figma/building-a-professional-design-tool-on-the-web/
 [Modyfi]: https://digest.browsertech.com/archive/browsertech-digest-how-modyfi-is-building-with/

packages/core/src/plugins/Picker.ts

@@ -6,7 +6,7 @@ import { createOffscreenCanvas } from '../utils/browser';
 const tempLocalPosition = new Point();
 
 export class Picker implements Plugin {
-  private ctx: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D;
+  #ctx: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D;
 
   apply(context: PluginContext) {
     const {
@@ -17,7 +17,7 @@ export class Picker implements Plugin {
 
     const canvas = createOffscreenCanvas();
     if (canvas) {
-      this.ctx = canvas.getContext('2d') as
+      this.#ctx = canvas.getContext('2d') as
         | OffscreenCanvasRenderingContext2D
         | CanvasRenderingContext2D;
     }
@@ -47,7 +47,7 @@ export class Picker implements Plugin {
         return shape.hitArea.contains(x, y);
       }
 
-      return shape.containsPoint(x, y, this.ctx);
+      return shape.containsPoint(x, y, this.#ctx);
     }
 
     return false;

packages/core/src/utils/browser.ts

@@ -42,10 +42,5 @@ export function createOffscreenCanvas(): OffscreenCanvas | HTMLCanvasElement {
       canvas = document.createElement('canvas');
     }
   }
-  if (canvas) {
-    this.ctx = canvas.getContext('2d') as
-      | OffscreenCanvasRenderingContext2D
-      | CanvasRenderingContext2D;
-  }
   return canvas;
 }

packages/core/src/utils/font.ts

@@ -1,4 +1,4 @@
-// import bidiFactory from 'bidi-js';
+import bidiFactory from 'bidi-js';
 import { Rectangle } from '@pixi/math';
 import { TextAttributes, TextStyleWhiteSpace } from '../shapes';
 import { createOffscreenCanvas } from './browser';
@@ -22,8 +22,6 @@ type TextMetrics = {
 };
 // type TextSegment = { text: string; direction: 'ltr' | 'rtl' };
 
-// const bidi = bidiFactory();
-
 const METRICS_STRING = '|ÉqÅ';
 const BASELINE_SYMBOL = 'M';
 const NEWLINES = [
@@ -75,6 +73,7 @@ export class CanvasTextMetrics {
   #fonts: Record<string, FontProperties>;
   #canvas: OffscreenCanvas | HTMLCanvasElement;
   #context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
+  #bidi = bidiFactory();
 
   constructor() {
     const canvas = createOffscreenCanvas();

packages/site/docs/zh/guide/lesson-015.md

@@ -217,6 +217,10 @@ const breakingSpaces: number[] = [
 ];
 ```
 
+在 CJK 中部分字符不能出现在行首，部分不能出现在行尾。例如在中文里大部分标点符号不能出现在行首，具体规则详见：[Line breaking rules in East Asian languages]。[pixi-cjk] 处理了这些情况：
+
+![pixi-cjk](https://github.com/huang-yuwei/pixi-cjk/raw/main/docs/screenshot.png)
+
 ### BiDi
 
 ::: info Bidi
@@ -239,6 +243,10 @@ support for handling text containing a mixture of left to right (English) and ri
 
 ### cluster
 
+并不是所有字符都是由单一字符组成，[clusters] 是 HarfBuzz 中用于处理复合字符的术语。
+
+> In text shaping, a cluster is a sequence of characters that needs to be treated as a single, indivisible unit.
+
 [grapheme-splitter]
 
 ```ts
@@ -411,3 +419,6 @@ export type PositionedGlyph = {
 [letterSpacing]: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/letterSpacing
 [grapheme-splitter]: https://github.com/orling/grapheme-splitter
 [CanvasKit Text Shaping]: https://skia.org/docs/user/modules/quickstart/#text-shaping
+[pixi-cjk]: https://github.com/huang-yuwei/pixi-cjk
+[Line breaking rules in East Asian languages]: https://en.wikipedia.org/wiki/Line_breaking_rules_in_East_Asian_languages
+[clusters]: https://harfbuzz.github.io/clusters.html