@phun-ky/speccer / typography

Variable: typography

const typography: {
  create: (
    html: string,
    options: SpeccerOptionsInterface,
    id: string
  ) => HTMLElement;
  element: (
    targetElement: HTMLElement,
    options?: SpeccerOptionsInterface
  ) => Promise<void>;
};

Defined in: main.ts:228

This feature presents typography

Type Declaration

create

create: (html: string, options: SpeccerOptionsInterface, id: string) =>
  (HTMLElement = typographyCreate);

Create a DOM element with provided HTML and optional CSS class names.

Parameters

html

string

The HTML content to be set in the created element.

options

SpeccerOptionsInterface

Options.

id

string

The id.

Returns

HTMLElement

• The created DOM element.

Example

const htmlContent = '<p>This is some HTML content.</p>';
const cssClass = 'custom-class';
const createdElement = create(htmlContent, cssClass);
document.body.appendChild(createdElement);

element

element: (targetElement: HTMLElement, options?: SpeccerOptionsInterface) =>
  (Promise<void> = typographyElement);

Create a specced typography element for a given target element.

Parameters

targetElement

HTMLElement

The target element to specc typography for.

options?

SpeccerOptionsInterface

Custom options

Returns

Promise<void>

• A promise that resolves once typography element is created and positioned.

Example

Default

const targetElement = document.querySelector('.target');
if (targetElement) {
  element(targetElement);
}

With syntax highlight feature

const targetElement = document.querySelector('.target');
const options = {
  typography: {
    useSyntaxHighlighting: true
  }
};

if (targetElement) {
  element(targetElement, options);
}

Example

Use the following code, either for html or js:

<div data-speccer="typography [top|right|bottom|left] [syntax]" class="...">
  …
</div>

const targetElement = document.getElementById('target');
const options = {
  position: 'right',
  type: 'typography',
  typography: {
    useSyntaxHighlighting: false
  }
};

typography(targetElement, options);