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

# HtmlSerializer

> [`HtmlSerializer`](#htmlserializer)

## Classes

### HtmlSerializer

#### Constructors

##### Constructor

```ts
new HtmlSerializer(
   fontService, 
   colorPreviewSrvice, 
   colorParser, 
   useSimpleFontList): HtmlSerializer;
```

###### Parameters

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

###### Returns

#### Methods

##### serialize()

```ts
serialize(
   text, 
   colorPalette, 
previewScale): Promise<string>;
```

###### Parameters

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

###### Returns

`Promise`\<`string`\>

##### fontSettingsToHtmlValue()

```ts
static fontSettingsToHtmlValue(
   fontSettings, 
   fontService, 
   useSimpleFontList): HtmlFontValue;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `fontSettings` | [IFontSettings](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/IFontSettings.md) |
| `fontService` | [`IFontService`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/IFontService.md#ifontservice) |
| `useSimpleFontList` | `boolean` |

###### Returns

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

##### getCorrectpaddingLeftValue()

```ts
static getCorrectpaddingLeftValue(
   firstLineIndentNum?, 
   leftIndentNum?, 
   tabPosition?, 
   listStyleType): number;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `firstLineIndentNum` | `number` | `0` |
| `leftIndentNum` | `number` | `HtmlSerializer._listsLeftIndentEqualsToModelZero` |
| `tabPosition` | `number` | `0` |
| `listStyleType` | `string` | `undefined` |

###### Returns

`number`

##### getCorrectTextIndentValue()

```ts
static getCorrectTextIndentValue(firstLineIndentNum, leftIndentNum): number;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `firstLineIndentNum` | `number` |
| `leftIndentNum` | `number` |

###### Returns

`number`

##### getFontValue()

```ts
static getFontValue(
   style, 
   fontService, 
   useSimpleFontList): HtmlFontValue;
```

###### Parameters

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

###### Returns

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

##### isNullOrEmptyOrWhiteSpace()

```ts
static isNullOrEmptyOrWhiteSpace(str): boolean;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `str` | `string` |

###### Returns

`boolean`

##### parseOpenTypeFeaturesFromGmXml()

```ts
static parseOpenTypeFeaturesFromGmXml(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)[]

##### setAlignment()

```ts
static setAlignment(value): string;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `any` |

###### Returns

`string`

##### setAlignmentValue()

```ts
static setAlignmentValue(p, value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `p` | `HTMLElement` |
| `value` | `any` |

###### Returns

`void`

##### setAllCapsValue()

```ts
static setAllCapsValue(span, value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `span` | `HTMLElement` |
| `value` | `string` \| `boolean` |

###### Returns

`void`

##### setBoldValue()

```ts
static setBoldValue(span, value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `span` | `HTMLElement` |
| `value` | `string` \| `boolean` |

###### Returns

`void`

##### setBulletTabPosition()

```ts
static setBulletTabPosition(value, scale?): string;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `value` | `string` \| `number` | `undefined` |
| `scale` | `number` | `1` |

###### Returns

`string`

##### setColorIndex()

```ts
static setColorIndex(span, index): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `span` | `HTMLElement` |
| `index` | `number` |

###### Returns

`void`

##### setColorValue()

```ts
static setColorValue(
   span, 
   value, 
   preview, 
   manager): void;
```

###### Parameters

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

###### Returns

`void`

##### setCorrectedForListsLeftIndentValue()

```ts
static setCorrectedForListsLeftIndentValue(value, scale?): string;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `value` | `string` \| `number` | `undefined` |
| `scale` | `number` | `1` |

###### Returns

`string`

##### setFirstLineIndentValue()

```ts
static setFirstLineIndentValue(
   p, 
   value, 
   scale?): void;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `p` | `HTMLElement` | `undefined` |
| `value` | `string` \| `number` | `undefined` |
| `scale` | `number` | `1` |

###### Returns

`void`

##### setFontNameValue()

```ts
static setFontNameValue(span, value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `span` | `HTMLElement` |
| `value` | `string` |

###### Returns

`void`

##### setFontSizeValue()

```ts
static setFontSizeValue(
   span, 
   value, 
   scale?): void;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `span` | `HTMLElement` | `undefined` |
| `value` | `string` \| `number` | `undefined` |
| `scale` | `number` | `1` |

###### Returns

`void`

##### setFontValue()

```ts
static setFontValue(span, value): void;
```

###### Parameters

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

###### Returns

`void`

##### setItalicValue()

```ts
static setItalicValue(span, value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `span` | `HTMLElement` |
| `value` | `string` \| `boolean` |

###### Returns

`void`

##### setLeadingValue()

```ts
static setLeadingValue(
   span, 
   value, 
   scale?): void;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `span` | `HTMLElement` | `undefined` |
| `value` | `string` \| `number` | `undefined` |
| `scale` | `number` | `1` |

###### Returns

`void`

##### setLeftIndentValue()

```ts
static setLeftIndentValue(
   p, 
   value, 
   scale?): void;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `p` | `HTMLElement` | `undefined` |
| `value` | `string` \| `number` | `undefined` |
| `scale` | `number` | `1` |

###### Returns

`void`

##### setOpenTypeStringValue()

```ts
static setOpenTypeStringValue(span, value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `span` | `HTMLElement` |
| `value` | `string` |

###### Returns

`void`

##### setOpenTypeValue()

```ts
static setOpenTypeValue(span, value): void;
```

###### Parameters

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

###### Returns

`void`

##### setRightIndentValue()

```ts
static setRightIndentValue(
   p, 
   value, 
   scale?): void;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `p` | `HTMLElement` | `undefined` |
| `value` | `string` \| `number` | `undefined` |
| `scale` | `number` | `1` |

###### Returns

`void`

##### setSmallCapsValue()

```ts
static setSmallCapsValue(span, value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `span` | `HTMLElement` |
| `value` | `string` \| `boolean` |

###### Returns

`void`

##### setSpaceAfterValue()

```ts
static setSpaceAfterValue(
   p, 
   value, 
   scale?): void;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `p` | `HTMLElement` | `undefined` |
| `value` | `string` \| `number` | `undefined` |
| `scale` | `number` | `1` |

###### Returns

`void`

##### setSpaceBeforeValue()

```ts
static setSpaceBeforeValue(
   p, 
   value, 
   scale?): void;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `p` | `HTMLElement` | `undefined` |
| `value` | `string` \| `number` | `undefined` |
| `scale` | `number` | `1` |

###### Returns

`void`

##### setStrokeValue()

```ts
static setStrokeValue(
   span, 
   value, 
   manager, 
   scale?): void;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `span` | `HTMLElement` | `undefined` |
| `value` | [`IStroke`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/IStroke.md#istroke) | `undefined` |
| `manager` | [`IColorPalette`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-text/IColorPalette.md#icolorpalette) | `undefined` |
| `scale` | `number` | `1` |

###### Returns

`void`

##### setSubValue()

```ts
static setSubValue(
   span, 
   value, 
   size?): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `span` | `HTMLElement` |
| `value` | `string` \| `boolean` |
| `size?` | `number` |

###### Returns

`void`

##### setSupValue()

```ts
static setSupValue(
   span, 
   value, 
   size?): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `span` | `HTMLElement` |
| `value` | `string` \| `boolean` |
| `size?` | `number` |

###### Returns

`void`

##### setTrackingValue()

```ts
static setTrackingValue(span, value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `span` | `HTMLElement` |
| `value` | `number` |

###### Returns

`void`

##### setUnderlineValue()

```ts
static setUnderlineValue(span, value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `span` | `HTMLElement` |
| `value` | `string` \| `boolean` |

###### Returns

`void`

##### setValueInPoints()

```ts
static setValueInPoints(value, scale?): string;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `value` | `string` \| `number` | `undefined` |
| `scale` | `number` | `1` |

###### Returns

`string`

##### stringToNumber()

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

###### Parameters

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

###### Returns

`number`

##### stringToTextAlignmentForHtml()

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

###### Parameters

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

###### Returns

`TextAlignment`

##### textAlignmentToHtmlString()

```ts
static textAlignmentToHtmlString(value): string;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `TextAlignment` |

###### Returns

`string`

##### trackingToLetterSpacing()

```ts
static trackingToLetterSpacing(tracking): string;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `tracking` | `number` |

###### Returns

`string`