feat: add rtl render support (#2653)

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<typeof borderLeftWidth.parse>;
     boxShadow: ReturnType<typeof boxShadow.parse>;
     color: Color;
+    direction: ReturnType<typeof direction.parse>;
     display: ReturnType<typeof display.parse>;
     float: ReturnType<typeof float.parse>;
     fontFamily: ReturnType<typeof fontFamily.parse>;
@@ -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);

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<DIRECTION> = {
+    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;
+        }
+    }
+};

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;