mirror
/
html2canvas
mirror of https://github.com/niklasvh/html2canvas.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: correctly break graphemes (#2652)

This commit is contained in:
Niklas von Hertzen 2021-08-13 18:57:49 +08:00 committed by GitHub
parent 969638fb94
commit 437b367d3b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 4 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/css/layout/text.ts
View File

@ -1,6 +1,7 @@
import {OVERFLOW_WRAP} from '../property-descriptors/overflow-wrap';
import {CSSParsedDeclaration} from '../index';
import {fromCodePoint, LineBreaker, toCodePoints} from 'css-line-break';
import {splitGraphemes} from 'text-segmentation';
import {Bounds, parseBounds} from './bounds';
import {FEATURES} from '../../core/features';
import {Context} from '../../core/context';
@ -86,7 +87,7 @@ const getRangeBounds = (context: Context, node: Text, offset: number, length: nu
};
const breakText = (value: string, styles: CSSParsedDeclaration): string[] => {
return styles.letterSpacing !== 0 ? toCodePoints(value).map((i) => fromCodePoint(i)) : breakWords(value, styles);
return styles.letterSpacing !== 0 ? splitGraphemes(value) : breakWords(value, styles);
};
// https://drafts.csswg.org/css-text/#word-separator

4
src/render/canvas/canvas-renderer.ts
View File

@ -19,7 +19,6 @@ import {
import {calculateBackgroundRendering, getBackgroundValueForIndex} from '../background';
import {isDimensionToken} from '../../css/syntax/parser';
import {TextBounds} from '../../css/layout/text';
import {fromCodePoint, toCodePoints} from 'css-line-break';
import {ImageElementContainer} from '../../dom/replaced-elements/image-element-container';
import {contentBox} from '../box-sizing';
import {CanvasElementContainer} from '../../dom/replaced-elements/canvas-element-container';
@ -44,6 +43,7 @@ import {TextShadow} from '../../css/property-descriptors/text-shadow';
import {PAINT_ORDER_LAYER} from '../../css/property-descriptors/paint-order';
import {Renderer} from '../renderer';
import {Context} from '../../core/context';
import {splitGraphemes} from 'text-segmentation';
export type RenderConfigurations = RenderOptions & {
backgroundColor: Color | null;
@ -144,7 +144,7 @@ export class CanvasRenderer extends Renderer {
if (letterSpacing === 0) {
this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + baseline);
} else {
const letters = toCodePoints(text.text).map((i) => fromCodePoint(i));
const letters = splitGraphemes(text.text);
letters.reduce((left, letter) => {
this.ctx.fillText(letter, left, text.bounds.top + baseline);