mirror of
https://github.com/niklasvh/html2canvas.git
synced 2023-08-10 21:13:10 +03:00
feat: add rtl render support (#2653)
This commit is contained in:
parent
437b367d3b
commit
6947982848
@ -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);
|
||||
|
23
src/css/property-descriptors/direction.ts
Normal file
23
src/css/property-descriptors/direction.ts
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
};
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user