mirror/html2canvas
1
0
Fork 0
mirror of https://github.com/niklasvh/html2canvas.git synced 2023-08-10 21:13:10 +03:00
Code Issues Projects Releases Wiki Activity

feat: correctly break graphemes (#2652)

Browse Source
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 {OVERFLOW_WRAP} from '../property-descriptors/overflow-wrap';
import {CSSParsedDeclaration} from '../index'; import {CSSParsedDeclaration} from '../index';
import {fromCodePoint, LineBreaker, toCodePoints} from 'css-line-break'; import {fromCodePoint, LineBreaker, toCodePoints} from 'css-line-break';
import {splitGraphemes} from 'text-segmentation';
import {Bounds, parseBounds} from './bounds'; import {Bounds, parseBounds} from './bounds';
import {FEATURES} from '../../core/features'; import {FEATURES} from '../../core/features';
import {Context} from '../../core/context'; 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[] => { 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 // 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 {calculateBackgroundRendering, getBackgroundValueForIndex} from '../background';
import {isDimensionToken} from '../../css/syntax/parser'; import {isDimensionToken} from '../../css/syntax/parser';
import {TextBounds} from '../../css/layout/text'; import {TextBounds} from '../../css/layout/text';
import {fromCodePoint, toCodePoints} from 'css-line-break';
import {ImageElementContainer} from '../../dom/replaced-elements/image-element-container'; import {ImageElementContainer} from '../../dom/replaced-elements/image-element-container';
import {contentBox} from '../box-sizing'; import {contentBox} from '../box-sizing';
import {CanvasElementContainer} from '../../dom/replaced-elements/canvas-element-container'; 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 {PAINT_ORDER_LAYER} from '../../css/property-descriptors/paint-order';
import {Renderer} from '../renderer'; import {Renderer} from '../renderer';
import {Context} from '../../core/context'; import {Context} from '../../core/context';
import {splitGraphemes} from 'text-segmentation';
export type RenderConfigurations = RenderOptions & { export type RenderConfigurations = RenderOptions & {
backgroundColor: Color | null; backgroundColor: Color | null;
@ -144,7 +144,7 @@ export class CanvasRenderer extends Renderer {
if (letterSpacing === 0) { if (letterSpacing === 0) {
this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + baseline); this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + baseline);
} else { } else {
const letters = toCodePoints(text.text).map((i) => fromCodePoint(i)); const letters = splitGraphemes(text.text);
letters.reduce((left, letter) => { letters.reduce((left, letter) => {
this.ctx.fillText(letter, left, text.bounds.top + baseline); this.ctx.fillText(letter, left, text.bounds.top + baseline);