chordsheetjs
    Preparing search index...

    Class MeasuredHtmlFormatter

    MeasuredHtmlFormatter formats a song into HTML with absolute positioning.

    Hierarchy

    • MeasurementBasedFormatter<MeasuredHtmlFormatterConfiguration>
      • MeasuredHtmlFormatter
    Index

    Constructors

    Methods

    • Configure the formatter with new options

      Parameters

      • config: {
            additionalCss?: string;
            cssClasses?: {
                chord?: string;
                comment?: string;
                container?: string;
                footer?: string;
                header?: string;
                lyrics?: string;
                page?: string;
                sectionLabel?: string;
            };
            cssClassPrefix?: string;
            decapo?: boolean;
            delegates?: { abc?: {}; grid?: {}; ly?: {}; tab?: {} };
            evaluate?: boolean;
            expandChorusDirective?: boolean;
            fonts?: {
                annotation?: {
                    color?: string | number;
                    inherit?: string;
                    letterSpacing?: string;
                    lineHeight?: number;
                    name?: string;
                    size?: number;
                    style?: string;
                    textDecoration?: string;
                    textTransform?: string;
                    underline?: boolean;
                    weight?: string | number;
                };
                chord?: {
                    color?: string
                    | number;
                    inherit?: string;
                    letterSpacing?: string;
                    lineHeight?: number;
                    name?: string;
                    size?: number;
                    style?: string;
                    textDecoration?: string;
                    textTransform?: string;
                    underline?: boolean;
                    weight?: string | number;
                };
                comment?: {
                    color?: string
                    | number;
                    inherit?: string;
                    letterSpacing?: string;
                    lineHeight?: number;
                    name?: string;
                    size?: number;
                    style?: string;
                    textDecoration?: string;
                    textTransform?: string;
                    underline?: boolean;
                    weight?: string | number;
                };
                metadata?: {
                    color?: string
                    | number;
                    inherit?: string;
                    letterSpacing?: string;
                    lineHeight?: number;
                    name?: string;
                    size?: number;
                    style?: string;
                    textDecoration?: string;
                    textTransform?: string;
                    underline?: boolean;
                    weight?: string | number;
                };
                sectionLabel?: {
                    color?: string
                    | number;
                    inherit?: string;
                    letterSpacing?: string;
                    lineHeight?: number;
                    name?: string;
                    size?: number;
                    style?: string;
                    textDecoration?: string;
                    textTransform?: string;
                    underline?: boolean;
                    weight?: string | number;
                };
                subtitle?: {
                    color?: string
                    | number;
                    inherit?: string;
                    letterSpacing?: string;
                    lineHeight?: number;
                    name?: string;
                    size?: number;
                    style?: string;
                    textDecoration?: string;
                    textTransform?: string;
                    underline?: boolean;
                    weight?: string | number;
                };
                text?: {
                    color?: string
                    | number;
                    inherit?: string;
                    letterSpacing?: string;
                    lineHeight?: number;
                    name?: string;
                    size?: number;
                    style?: string;
                    textDecoration?: string;
                    textTransform?: string;
                    underline?: boolean;
                    weight?: string | number;
                };
                title?: {
                    color?: string
                    | number;
                    inherit?: string;
                    letterSpacing?: string;
                    lineHeight?: number;
                    name?: string;
                    size?: number;
                    style?: string;
                    textDecoration?: string;
                    textTransform?: string;
                    underline?: boolean;
                    weight?: string | number;
                };
            };
            instrument?: { description?: string; type?: string }
            | null;
            key?:
                | {
                    accidental?: Accidental
                    | null;
                    canBeFlat?: {};
                    canBeSharp?: {};
                    changeGrade?: {};
                    clone?: {};
                    distanceTo?: {};
                    effectiveGrade?: number;
                    equals?: {};
                    explicitAccidental?: boolean;
                    grade?: number | null;
                    is?: {};
                    isChordSolfege?: {};
                    isChordSymbol?: {};
                    isMinor?: {};
                    isNumeral?: {};
                    isNumeric?: {};
                    makeMinor?: {};
                    minor?: boolean;
                    minorSign?: "" | "m";
                    modifier?: Accidental | null;
                    normalize?: {};
                    normalizeEnharmonics?: {};
                    note?: string;
                    number?: number | null;
                    originalKeyString?: string | null;
                    preferredAccidental?: Accidental | null;
                    preferredModifier?: Accidental | null;
                    referenceKeyGrade?: number | null;
                    referenceKeyMode?: string | null;
                    relativeMajor?: { grade?: number | null | undefined; number?: number | null | undefined; accidental?: Accidental | null | undefined; type?: ChordType | undefined; readonly unicodeAccidental?: string | ... 1 more ... | undefined; ... 44 more ...; normalizeEnharmonics?: {} | undefined; };
                    relativeMinor?: { grade?: number | null | undefined; number?: number | null | undefined; accidental?: Accidental | null | undefined; type?: ChordType | undefined; readonly unicodeAccidental?: string | ... 1 more ... | undefined; ... 44 more ...; normalizeEnharmonics?: {} | undefined; };
                    setGrade?: {};
                    toChordSolfege?: {};
                    toChordSolfegeString?: {};
                    toChordSymbol?: {};
                    toChordSymbolString?: {};
                    toMajor?: {};
                    toNumeral?: {};
                    toNumeralString?: {};
                    toNumeric?: {};
                    toNumericString?: {};
                    toString?: {};
                    transpose?: {};
                    transposeDown?: {};
                    transposeUp?: {};
                    type?: ChordType;
                    unicodeAccidental?: string | null;
                    unicodeModifier?: string | null;
                    useAccidental?: {};
                    useModifier?: {};
                }
                | null;
            layout?: {
                chordDiagrams?: {
                    definitions?: { hiddenChords?: (string | undefined)[] };
                    enabled?: boolean;
                    fonts?: {
                        baseFret?: {
                            color?: string | number;
                            inherit?: string;
                            letterSpacing?: string;
                            lineHeight?: number;
                            name?: string;
                            size?: number;
                            style?: string;
                            textDecoration?: string;
                            textTransform?: string;
                            underline?: boolean;
                            weight?: string | number;
                        };
                        fingerings?: {
                            color?: string
                            | number;
                            inherit?: string;
                            letterSpacing?: string;
                            lineHeight?: number;
                            name?: string;
                            size?: number;
                            style?: string;
                            textDecoration?: string;
                            textTransform?: string;
                            underline?: boolean;
                            weight?: string | number;
                        };
                        title?: {
                            color?: string
                            | number;
                            inherit?: string;
                            letterSpacing?: string;
                            lineHeight?: number;
                            name?: string;
                            size?: number;
                            style?: string;
                            textDecoration?: string;
                            textTransform?: string;
                            underline?: boolean;
                            weight?: string | number;
                        };
                    };
                    overrides?: {
                        byKey?: { [key: string]: { [key: ...]: ... }
                        | undefined };
                        global?: { [key: string]: { definition?: ...; hide?: ... } | undefined };
                    };
                    renderingConfig?: {
                        barreThickness?: number;
                        baseFretFontSize?: number;
                        diagramSpacing?: number;
                        fingerIndicatorOffset?: number;
                        fingerIndicatorSize?: number;
                        fingerNumberFontSize?: number;
                        fretColor?: string
                        | number;
                        fretLineThickness?: number;
                        fretThickness?: number;
                        markerThickness?: number;
                        maxDiagramsPerRow?: number | null;
                        neckHeight?: number;
                        neckWidth?: number;
                        nutColor?: string | number;
                        nutThickness?: number;
                        openStringIndicatorThickness?: number;
                        showFingerNumbers?: boolean;
                        stringColor?: string | number;
                        stringIndicatorSize?: number;
                        stringThickness?: number;
                        titleFontSize?: number;
                        titleY?: number;
                        unusedStringIndicatorThickness?: number;
                    };
                };
                footer?: {
                    content?: (
                        | {
                            condition?: { and?: ...; or?: ... }
                            | { [key: ...]: ... };
                            position?: {
                                clip?: ...;
                                ellipsis?: ...;
                                height?: ...;
                                width?: ...;
                                x?: ...;
                                y?: ...;
                            };
                            style?: {
                                color?: ...;
                                inherit?: ...;
                                letterSpacing?: ...;
                                lineHeight?: ...;
                                name?: ...;
                                size?: ...;
                                style?: ...;
                                textDecoration?: ...;
                                textTransform?: ...;
                                underline?: ...;
                                weight?: ...;
                            };
                            template?: string;
                            type?: "text";
                            value?: string;
                        }
                        | {
                            condition?: { and?: ...; or?: ... }
                            | { [key: ...]: ... };
                            position?: {
                                clip?: ...;
                                ellipsis?: ...;
                                height?: ...;
                                width?: ...;
                                x?: ...;
                                y?: ...;
                            };
                            style?: {
                                color?: ...;
                                inherit?: ...;
                                letterSpacing?: ...;
                                lineHeight?: ...;
                                name?: ...;
                                size?: ...;
                                style?: ...;
                                textDecoration?: ...;
                                textTransform?: ...;
                                underline?: ...;
                                weight?: ...;
                            };
                            template?: string;
                            type?: "text";
                            value?: string;
                        }
                        | {
                            alias?: string;
                            compression?: ImageCompression;
                            condition?: { and?: ...; or?: ... }
                            | { [key: ...]: ... };
                            position?: {
                                clip?: ...;
                                ellipsis?: ...;
                                height?: ...;
                                width?: ...;
                                x?: ...;
                                y?: ...;
                            };
                            rotation?: number;
                            size?: { height?: ...; width?: ... };
                            src?: string;
                            type?: "image";
                        }
                        | {
                            condition?: { and?: ...; or?: ... }
                            | { [key: ...]: ... };
                            position?: { height?: ...; width?: ...; x?: ...; y?: ... };
                            style?: { color?: ...; dash?: ...; width?: ... };
                            type?: "line";
                        }
                        | undefined
                    )[];
                    height?: number;
                };
                global?: {
                    margins?: {
                        bottom?: number;
                        left?: number;
                        right?: number;
                        top?: number;
                    };
                };
                header?: {
                    content?: (
                        | {
                            condition?: { and?: ...; or?: ... }
                            | { [key: ...]: ... };
                            position?: {
                                clip?: ...;
                                ellipsis?: ...;
                                height?: ...;
                                width?: ...;
                                x?: ...;
                                y?: ...;
                            };
                            style?: {
                                color?: ...;
                                inherit?: ...;
                                letterSpacing?: ...;
                                lineHeight?: ...;
                                name?: ...;
                                size?: ...;
                                style?: ...;
                                textDecoration?: ...;
                                textTransform?: ...;
                                underline?: ...;
                                weight?: ...;
                            };
                            template?: string;
                            type?: "text";
                            value?: string;
                        }
                        | {
                            condition?: { and?: ...; or?: ... }
                            | { [key: ...]: ... };
                            position?: {
                                clip?: ...;
                                ellipsis?: ...;
                                height?: ...;
                                width?: ...;
                                x?: ...;
                                y?: ...;
                            };
                            style?: {
                                color?: ...;
                                inherit?: ...;
                                letterSpacing?: ...;
                                lineHeight?: ...;
                                name?: ...;
                                size?: ...;
                                style?: ...;
                                textDecoration?: ...;
                                textTransform?: ...;
                                underline?: ...;
                                weight?: ...;
                            };
                            template?: string;
                            type?: "text";
                            value?: string;
                        }
                        | {
                            alias?: string;
                            compression?: ImageCompression;
                            condition?: { and?: ...; or?: ... }
                            | { [key: ...]: ... };
                            position?: {
                                clip?: ...;
                                ellipsis?: ...;
                                height?: ...;
                                width?: ...;
                                x?: ...;
                                y?: ...;
                            };
                            rotation?: number;
                            size?: { height?: ...; width?: ... };
                            src?: string;
                            type?: "image";
                        }
                        | {
                            condition?: { and?: ...; or?: ... }
                            | { [key: ...]: ... };
                            position?: { height?: ...; width?: ...; x?: ...; y?: ... };
                            style?: { color?: ...; dash?: ...; width?: ... };
                            type?: "line";
                        }
                        | undefined
                    )[];
                    height?: number;
                };
                sections?: {
                    base?: {
                        display?: {
                            compact?: boolean;
                            indent?: number;
                            labelStyle?: "uppercase";
                            lyricsOnly?: boolean;
                            repeatedSections?: "hide"
                            | "full"
                            | "title_only"
                            | "lyrics_only";
                            showLabel?: boolean;
                        };
                        fonts?: {
                            annotation?: {
                                color?: ...;
                                inherit?: ...;
                                letterSpacing?: ...;
                                lineHeight?: ...;
                                name?: ...;
                                size?: ...;
                                style?: ...;
                                textDecoration?: ...;
                                textTransform?: ...;
                                underline?: ...;
                                weight?: ...;
                            };
                            chord?: {
                                color?: ...;
                                inherit?: ...;
                                letterSpacing?: ...;
                                lineHeight?: ...;
                                name?: ...;
                                size?: ...;
                                style?: ...;
                                textDecoration?: ...;
                                textTransform?: ...;
                                underline?: ...;
                                weight?: ...;
                            };
                            comment?: {
                                color?: ...;
                                inherit?: ...;
                                letterSpacing?: ...;
                                lineHeight?: ...;
                                name?: ...;
                                size?: ...;
                                style?: ...;
                                textDecoration?: ...;
                                textTransform?: ...;
                                underline?: ...;
                                weight?: ...;
                            };
                            metadata?: {
                                color?: ...;
                                inherit?: ...;
                                letterSpacing?: ...;
                                lineHeight?: ...;
                                name?: ...;
                                size?: ...;
                                style?: ...;
                                textDecoration?: ...;
                                textTransform?: ...;
                                underline?: ...;
                                weight?: ...;
                            };
                            sectionLabel?: {
                                color?: ...;
                                inherit?: ...;
                                letterSpacing?: ...;
                                lineHeight?: ...;
                                name?: ...;
                                size?: ...;
                                style?: ...;
                                textDecoration?: ...;
                                textTransform?: ...;
                                underline?: ...;
                                weight?: ...;
                            };
                            subtitle?: {
                                color?: ...;
                                inherit?: ...;
                                letterSpacing?: ...;
                                lineHeight?: ...;
                                name?: ...;
                                size?: ...;
                                style?: ...;
                                textDecoration?: ...;
                                textTransform?: ...;
                                underline?: ...;
                                weight?: ...;
                            };
                            text?: {
                                color?: ...;
                                inherit?: ...;
                                letterSpacing?: ...;
                                lineHeight?: ...;
                                name?: ...;
                                size?: ...;
                                style?: ...;
                                textDecoration?: ...;
                                textTransform?: ...;
                                underline?: ...;
                                weight?: ...;
                            };
                            title?: {
                                color?: ...;
                                inherit?: ...;
                                letterSpacing?: ...;
                                lineHeight?: ...;
                                name?: ...;
                                size?: ...;
                                style?: ...;
                                textDecoration?: ...;
                                textTransform?: ...;
                                underline?: ...;
                                weight?: ...;
                            };
                        };
                        overrides?: ({ condition?: ...; display?: ... } | undefined)[];
                    };
                    global?: {
                        chordLyricSpacing?: number;
                        chordSpacing?: number;
                        columnCount?: number;
                        columnSpacing?: number;
                        columnWidth?: number;
                        linePadding?: number;
                        maxColumnWidth?: number;
                        minColumnWidth?: number;
                        paragraphSpacing?: number;
                        spacingAfter?: number;
                        spacingBottom?: number;
                    };
                    types?: {
                        [key: string]: | {
                            display?: {
                                compact?: ...;
                                indent?: ...;
                                labelStyle?: ...;
                                lyricsOnly?: ...;
                                repeatedSections?: ...;
                                showLabel?: ...;
                            };
                            fonts?: {
                                annotation?: ...;
                                chord?: ...;
                                comment?: ...;
                                metadata?: ...;
                                sectionLabel?: ...;
                                subtitle?: ...;
                                text?: ...;
                                title?: ...;
                            };
                            overrides?: (...)[];
                        }
                        | undefined;
                    };
                };
            };
            measurer?: MeasurerType;
            metadata?: {
                order?: (
                    | string
                    | {
                        customSort?: {};
                        match?: | string
                        | (string | undefined)[]
                        | {
                            "[match]"?: {};
                            "[matchAll]"?: {};
                            "[replace]"?: {};
                            "[search]"?: {};
                            "[split]"?: {};
                            compile?: {};
                            dotAll?: boolean;
                            exec?: {};
                            flags?: string;
                            global?: boolean;
                            ignoreCase?: boolean;
                            lastIndex?: number;
                            multiline?: boolean;
                            source?: string;
                            sticky?: boolean;
                            test?: {};
                            unicode?: boolean;
                        }
                        | {};
                        sortMethod?: "custom"
                        | "preserve"
                        | "alphabetical";
                        visible?: boolean;
                    }
                    | undefined
                )[];
                separator?: string;
            };
            normalizeChords?: boolean;
            pageSize?: { height?: number; width?: number };
            user?: { fullname?: string; name?: string } | null;
            useUnicodeModifiers?: boolean;
            version?: string;
        }

        New configuration options

      Returns this

      The formatter instance for chaining

    • Get the default configuration for HTML formatter

      Returns MeasuredHtmlFormatterConfiguration