Interface LibraryTypography

Represents a typography element from a library in Penpot. This interface extends LibraryElement and includes properties specific to typography elements.

interface LibraryTypography {
    id: string;
    libraryId: string;
    name: string;
    path: string;
    fontId: string;
    fontFamily: string;
    fontVariantId: string;
    fontSize: string;
    fontWeight: string;
    fontStyle?: null | "normal" | "italic";
    lineHeight: string;
    letterSpacing: string;
    textTransform?:
        | null
        | "uppercase"
        | "capitalize"
        | "lowercase";
    applyToText(shape: Shape): void;
    applyToTextRange(range: TextRange): void;
    setFont(font: Font, variant?: FontVariant): void;
    getPluginData(key: string): string;
    setPluginData(key: string, value: string): void;
    getPluginDataKeys(): string[];
    getSharedPluginData(namespace: string, key: string): string;
    setSharedPluginData(namespace: string, key: string, value: string): void;
    getSharedPluginDataKeys(namespace: string): string[];
}

Hierarchy (view full)

Properties

id libraryId name path fontId fontFamily fontVariantId fontSize fontWeight fontStyle? lineHeight letterSpacing textTransform?

Methods

applyToText applyToTextRange setFont getPluginData setPluginData getPluginDataKeys getSharedPluginData setSharedPluginData getSharedPluginDataKeys

Properties

Readonlyid

id: string

The unique identifier of the library element.

ReadonlylibraryId

libraryId: string

The unique identifier of the library to which the element belongs.

name

name: string

The name of the library element.

path

path: string

The path of the library element.

fontId

fontId: string

The unique identifier of the font used in the typography element.

fontFamily

fontFamily: string

The font family of the typography element.

fontVariantId

fontVariantId: string

The unique identifier of the font variant used in the typography element.

fontSize

fontSize: string

The font size of the typography element.

fontWeight

fontWeight: string

The font weight of the typography element.

OptionalfontStyle

fontStyle?: null | "normal" | "italic"

The font style of the typography element.

lineHeight

lineHeight: string

The line height of the typography element.

letterSpacing

letterSpacing: string

The letter spacing of the typography element.

OptionaltextTransform

textTransform?:
    | null
    | "uppercase"
    | "capitalize"
    | "lowercase"

The text transform applied to the typography element.

Methods

applyToText

  • applyToText(shape): void

  • Applies the typography styles to a text shape.

    Parameters

    • shape: Shape

      The text shape to apply the typography styles to.

    Returns void

    Example

    typographyElement.applyToText(textShape);

applyToTextRange

  • applyToTextRange(range): void

  • Applies the typography styles to a range of text within a text shape.

    Parameters

    • range: TextRange

      Represents a range of text within a Text shape. This interface provides properties for styling and formatting text ranges.

    Returns void

    Example

    typographyElement.applyToTextRange(textShape);

setFont

  • setFont(font, variant?): void

  • Sets the font and optionally its variant for the typography element.

    Parameters

    • font: Font

      The font to set.

    • Optionalvariant: FontVariant

      The font variant to set (optional).

    Returns void

    Example

    typographyElement.setFont(newFont, newVariant);

getPluginData

  • getPluginData(key): string

  • Retrieves the data for our own plugin, given a specific key.

    Parameters

    • key: string

      The key for which to retrieve the data.

    Returns string

    Returns the data associated with the key as a string.

    Example

    const data = shape.getPluginData('exampleKey');
    console.log(data);

setPluginData

  • setPluginData(key, value): void

  • Sets the plugin-specific data for the given key.

    Parameters

    • key: string

      The key for which to set the data.

    • value: string

      The data to set for the key.

    Returns void

    Example

    shape.setPluginData('exampleKey', 'exampleValue');

getPluginDataKeys

  • getPluginDataKeys(): string[]

  • Retrieves all the keys for the plugin-specific data.

    Returns string[]

    Returns an array of strings representing all the keys.

    Example

    const keys = shape.getPluginDataKeys();
    console.log(keys);

getSharedPluginData

  • getSharedPluginData(namespace, key): string

  • If we know the namespace of an external plugin, this is the way to get their data.

    Parameters

    • namespace: string

      The namespace for the shared data.

    • key: string

      The key for which to retrieve the data.

    Returns string

    Returns the shared data associated with the key as a string.

    Example

    const sharedData = shape.getSharedPluginData('exampleNamespace', 'exampleKey');
    console.log(sharedData);

setSharedPluginData

  • setSharedPluginData(namespace, key, value): void

  • Sets the shared plugin-specific data for the given namespace and key.

    Parameters

    • namespace: string

      The namespace for the shared data.

    • key: string

      The key for which to set the data.

    • value: string

      The data to set for the key.

    Returns void

    Example

    shape.setSharedPluginData('exampleNamespace', 'exampleKey', 'exampleValue');

getSharedPluginDataKeys

  • getSharedPluginDataKeys(namespace): string[]

  • Retrieves all the keys for the shared plugin-specific data in the given namespace.

    Parameters

    • namespace: string

      The namespace for the shared data.

    Returns string[]

    Returns an array of strings representing all the keys in the namespace.

    Example

    const sharedKeys = shape.getSharedPluginDataKeys('exampleNamespace');
    console.log(sharedKeys);

Settings

Member Visibility

On This Page

Properties
Methods