From 694798284838b16882e648914da0905818aa366c Mon Sep 17 00:00:00 2001 From: Niklas von Hertzen Date: Fri, 13 Aug 2021 19:50:59 +0800 Subject: [PATCH] feat: add rtl render support (#2653) --- src/css/index.ts | 3 +++ src/css/property-descriptors/direction.ts | 23 +++++++++++++++++++++++ src/render/canvas/canvas-renderer.ts | 3 +++ 3 files changed, 29 insertions(+) create mode 100644 src/css/property-descriptors/direction.ts diff --git a/src/css/index.ts b/src/css/index.ts index f81f692..2131ab9 100644 --- a/src/css/index.ts +++ b/src/css/index.ts @@ -31,6 +31,7 @@ import { borderTopWidth } from './property-descriptors/border-width'; import {color} from './property-descriptors/color'; +import {direction} from './property-descriptors/direction'; import {display, DISPLAY} from './property-descriptors/display'; import {float, FLOAT} from './property-descriptors/float'; import {letterSpacing} from './property-descriptors/letter-spacing'; @@ -107,6 +108,7 @@ export class CSSParsedDeclaration { borderLeftWidth: ReturnType; boxShadow: ReturnType; color: Color; + direction: ReturnType; display: ReturnType; float: ReturnType; fontFamily: ReturnType; @@ -175,6 +177,7 @@ export class CSSParsedDeclaration { this.borderLeftWidth = parse(context, borderLeftWidth, declaration.borderLeftWidth); this.boxShadow = parse(context, boxShadow, declaration.boxShadow); this.color = parse(context, color, declaration.color); + this.direction = parse(context, direction, declaration.direction); this.display = parse(context, display, declaration.display); this.float = parse(context, float, declaration.cssFloat); this.fontFamily = parse(context, fontFamily, declaration.fontFamily); diff --git a/src/css/property-descriptors/direction.ts b/src/css/property-descriptors/direction.ts new file mode 100644 index 0000000..7e413b4 --- /dev/null +++ b/src/css/property-descriptors/direction.ts @@ -0,0 +1,23 @@ +import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor'; +import {Context} from '../../core/context'; + +export const enum DIRECTION { + LTR = 0, + RTL = 1 +} + +export const direction: IPropertyIdentValueDescriptor = { + name: 'direction', + initialValue: 'ltr', + prefix: false, + type: PropertyDescriptorParsingType.IDENT_VALUE, + parse: (_context: Context, direction: string) => { + switch (direction) { + case 'rtl': + return DIRECTION.RTL; + case 'ltr': + default: + return DIRECTION.LTR; + } + } +}; diff --git a/src/render/canvas/canvas-renderer.ts b/src/render/canvas/canvas-renderer.ts index d2cefa7..ccbd5a3 100644 --- a/src/render/canvas/canvas-renderer.ts +++ b/src/render/canvas/canvas-renderer.ts @@ -43,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 {DIRECTION} from '../../css/property-descriptors/direction'; import {splitGraphemes} from 'text-segmentation'; export type RenderConfigurations = RenderOptions & { @@ -174,6 +175,8 @@ export class CanvasRenderer extends Renderer { this.ctx.font = font; + this.ctx.direction = styles.direction === DIRECTION.RTL ? 'rtl' : 'ltr'; + this.ctx.textAlign = 'left'; this.ctx.textBaseline = 'alphabetic'; const {baseline, middle} = this.fontMetrics.getMetrics(fontFamily, fontSize); const paintOrder = styles.paintOrder;