---
title: "HtmlParser | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/HtmlParser/"
---

# HtmlParser

> [`HtmlParser`](#htmlparser)

## Classes

### HtmlParser

#### Constructors

##### Constructor

```ts
new HtmlParser(
   colorPaletteManager, 
   fontService, 
   useSimpleFontList, 
   colorParser, 
   colorPreviewService): HtmlParser;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `colorPaletteManager` | [`IColorPalette`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/IColorPalette.md#icolorpalette) |
| `fontService` | [`IFontService`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/IFontService.md#ifontservice) |
| `useSimpleFontList` | `boolean` |
| `colorParser` | [`IColorParser`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/IColorParser.md#icolorparser) |
| `colorPreviewService` | [`IColorPreviewService`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/IColorPreviewService.md#icolorpreviewservice) |

###### Returns

#### Properties

##### defaultSupSubSize

```ts
readonly static defaultSupSubSize: 0.583 = 0.583;
```

#### Accessors

##### colorPalette

###### Set Signature

```ts
set colorPalette(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | [`IColorPalette`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/IColorPalette.md#icolorpalette) |

###### Returns

`void`

#### Methods

##### getColorValue()

```ts
getColorValue(
   styles, 
   colors, 
colorPalette): Promise<number>;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `styles` | [`IStyleDictionary`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/HtmlStyleAttributeConverter.md#istyledictionary) |
| `colors` | [`IStyleDictionary`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/HtmlStyleAttributeConverter.md#istyledictionary) |
| `colorPalette` | [`IColorPalette`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/IColorPalette.md#icolorpalette) |

###### Returns

`Promise`\<`number`\>

##### getStrokeValue()

```ts
getStrokeValue(
   styles, 
   colors, 
   colorPalette, 
   scale?): Promise<{
  colorIndex?: number;
  size?: number;
}>;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `styles` | [`IStyleDictionary`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/HtmlStyleAttributeConverter.md#istyledictionary) | `undefined` |
| `colors` | [`IStyleDictionary`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/HtmlStyleAttributeConverter.md#istyledictionary) | `undefined` |
| `colorPalette` | [`IColorPalette`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/IColorPalette.md#icolorpalette) | `undefined` |
| `scale` | `number` | `1` |

###### Returns

`Promise`\<\{
  `colorIndex?`: `number`;
  `size?`: `number`;
\}\>

##### parse()

```ts
parse(
   text, 
   colorPalette, 
previewScale): Promise<Text>;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `text` | `string` |
| `colorPalette` | [`IColorPalette`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/IColorPalette.md#icolorpalette) |
| `previewScale` | `number` |

###### Returns

`Promise`\<[`Text`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/Text.md#text)\>

##### getAlignmentValue()

```ts
static getAlignmentValue(styles): TextAlignment;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `styles` | [`IStyleDictionary`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/HtmlStyleAttributeConverter.md#istyledictionary) |

###### Returns

`TextAlignment`

##### getAllCapsValue()

```ts
static getAllCapsValue(styles): boolean;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `styles` | [`IStyleDictionary`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/HtmlStyleAttributeConverter.md#istyledictionary) |

###### Returns

`boolean`

##### getBoldValue()

```ts
static getBoldValue(styles): boolean;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `styles` | [`IStyleDictionary`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/HtmlStyleAttributeConverter.md#istyledictionary) |

###### Returns

`boolean`

##### getElementFontValue()

```ts
static getElementFontValue(
   element, 
   lastParent?, 
   defaultFontValue?): HtmlFontValue;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `element` | `HTMLElement` |
| `lastParent?` | `HTMLElement` |
| `defaultFontValue?` | [`HtmlFontValue`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/HtmlFontValue.md#htmlfontvalue) |

###### Returns

[`HtmlFontValue`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/HtmlFontValue.md#htmlfontvalue)

##### getFirstLineIndentValue()

```ts
static getFirstLineIndentValue(styles, scale?): number;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `styles` | [`IStyleDictionary`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/HtmlStyleAttributeConverter.md#istyledictionary) | `undefined` |
| `scale` | `number` | `1` |

###### Returns

`number`

##### getFontSettings()

```ts
static getFontSettings(
   value, 
   fontService, 
   simpleMode): IFontSettings;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | [`HtmlFontValue`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/HtmlFontValue.md#htmlfontvalue) |
| `fontService` | [`IFontService`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/IFontService.md#ifontservice) |
| `simpleMode` | `boolean` |

###### Returns

[IFontSettings](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/IFontSettings.md)

##### getFontSizeValue()

```ts
static getFontSizeValue(styles, scale?): number;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `styles` | [`IStyleDictionary`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/HtmlStyleAttributeConverter.md#istyledictionary) | `undefined` |
| `scale` | `number` | `1` |

###### Returns

`number`

##### getFontValue()

```ts
static getFontValue(htmlStyles): HtmlFontValue;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `htmlStyles` | [`IStyleDictionary`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/HtmlStyleAttributeConverter.md#istyledictionary) |

###### Returns

[`HtmlFontValue`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/HtmlFontValue.md#htmlfontvalue)

##### getItalicValue()

```ts
static getItalicValue(styles): boolean;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `styles` | [`IStyleDictionary`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/HtmlStyleAttributeConverter.md#istyledictionary) |

###### Returns

`boolean`

##### getLeadingValue()

```ts
static getLeadingValue(styles, scale?): number;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `styles` | [`IStyleDictionary`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/HtmlStyleAttributeConverter.md#istyledictionary) | `undefined` |
| `scale` | `number` | `1` |

###### Returns

`number`

##### getLeftIndentValue()

```ts
static getLeftIndentValue(styles, scale?): number;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `styles` | [`IStyleDictionary`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/HtmlStyleAttributeConverter.md#istyledictionary) | `undefined` |
| `scale` | `number` | `1` |

###### Returns

`number`

##### getOpenTypeStringValue()

```ts
static getOpenTypeStringValue(styles): string;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `styles` | [`IStyleDictionary`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/HtmlStyleAttributeConverter.md#istyledictionary) |

###### Returns

`string`

##### getOpenTypeValue()

```ts
static getOpenTypeValue(styles): OpenTypeFeature[];
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `styles` | [`IStyleDictionary`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/HtmlStyleAttributeConverter.md#istyledictionary) |

###### Returns

[`OpenTypeFeature`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/Span.md#opentypefeature)[]

##### getRightIndentValue()

```ts
static getRightIndentValue(styles, scale?): number;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `styles` | [`IStyleDictionary`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/HtmlStyleAttributeConverter.md#istyledictionary) | `undefined` |
| `scale` | `number` | `1` |

###### Returns

`number`

##### getSmallCapsValue()

```ts
static getSmallCapsValue(styles): boolean;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `styles` | [`IStyleDictionary`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/HtmlStyleAttributeConverter.md#istyledictionary) |

###### Returns

`boolean`

##### getSpaceAfterValue()

```ts
static getSpaceAfterValue(styles, scale?): number;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `styles` | [`IStyleDictionary`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/HtmlStyleAttributeConverter.md#istyledictionary) | `undefined` |
| `scale` | `number` | `1` |

###### Returns

`number`

##### getSpaceBeforeValue()

```ts
static getSpaceBeforeValue(styles, scale?): number;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `styles` | [`IStyleDictionary`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/HtmlStyleAttributeConverter.md#istyledictionary) | `undefined` |
| `scale` | `number` | `1` |

###### Returns

`number`

##### getSubValue()

```ts
static getSubValue(styles): boolean;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `styles` | [`IStyleDictionary`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/HtmlStyleAttributeConverter.md#istyledictionary) |

###### Returns

`boolean`

##### getSupValue()

```ts
static getSupValue(styles): boolean;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `styles` | [`IStyleDictionary`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/HtmlStyleAttributeConverter.md#istyledictionary) |

###### Returns

`boolean`

##### getTrackingValue()

```ts
static getTrackingValue(value): number;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | [`IStyleDictionary`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/HtmlStyleAttributeConverter.md#istyledictionary) |

###### Returns

`number`

##### getUnderlineValue()

```ts
static getUnderlineValue(styles): boolean;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `styles` | [`IStyleDictionary`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/HtmlStyleAttributeConverter.md#istyledictionary) |

###### Returns

`boolean`

##### letterSpacingToTracking()

```ts
static letterSpacingToTracking(letterSpacing): number;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `letterSpacing` | `string` |

###### Returns

`number`

##### parseOpenTypeFromStyle()

```ts
static parseOpenTypeFromStyle(value): OpenTypeFeature[];
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `string` |

###### Returns

[`OpenTypeFeature`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/Span.md#opentypefeature)[]

##### setFontValue()

```ts
static setFontValue(
   xmlStyles, 
   value, 
   fontService, 
   simpleMode): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `xmlStyles` | [`SpanStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/Span.md#spanstyle-1) |
| `value` | [`HtmlFontValue`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/HtmlFontValue.md#htmlfontvalue) |
| `fontService` | [`IFontService`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/IFontService.md#ifontservice) |
| `simpleMode` | `boolean` |

###### Returns

`void`

##### stringToNumber()

```ts
static stringToNumber(
   value, 
   units?, 
   defaultValue?): number;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `value` | `string` | `undefined` |
| `units` | `string` | `""` |
| `defaultValue` | `number` | `0` |

###### Returns

`number`

##### stringToTextAlignment()

```ts
static stringToTextAlignment(value): TextAlignment;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `string` |

###### Returns

`TextAlignment`