chordsheetjs
    Preparing search index...

    Class HtmlDivFormatter

    Formats a song into HTML. It uses DIVs to align lyrics with chords, which makes it useful for responsive web pages.

    Hierarchy (View Summary)

    Index

    Constructors

    constructor

    Accessors

    cssObject

    Methods

    configure cssString format getDefaultConfiguration

    Constructors

    • Instantiate

      Parameters

      • Optionalconfiguration: {
            cssClasses?: {
                annotation?: string;
                chord?: string;
                chordSheet?: string;
                column?: string;
                comment?: string;
                emptyLine?: string;
                label?: string;
                labelWrapper?: string;
                line?: string;
                literal?: string;
                literalContents?: string;
                lyrics?: string;
                paragraph?: string;
                row?: string;
                subtitle?: string;
                title?: string;
            };
            customCSS?: { [key: string]: string
            | number
            | undefined };
            decapo?: boolean;
            delegates?: { abc?: {}; grid?: {}; ly?: {}; tab?: {} };
            evaluate?: boolean;
            expandChorusDirective?: boolean;
            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;
            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;
            renderBlankLines?: boolean;
            user?: { fullname?: string; name?: string }
            | null;
            useUnicodeModifiers?: boolean;
        } = ...

        options

        • OptionalcssClasses?: {
              annotation?: string;
              chord?: string;
              chordSheet?: string;
              column?: string;
              comment?: string;
              emptyLine?: string;
              label?: string;
              labelWrapper?: string;
              line?: string;
              literal?: string;
              literalContents?: string;
              lyrics?: string;
              paragraph?: string;
              row?: string;
              subtitle?: string;
              title?: string;
          }
        • OptionalcustomCSS?: { [key: string]: string | number | undefined }
        • Optionaldecapo?: boolean
        • Optionaldelegates?: { abc?: {}; grid?: {}; ly?: {}; tab?: {} }
        • Optionalevaluate?: boolean

          Whether or not to evaluate meta expressions. For more info about meta expressions, see: https://bit.ly/2SC9c2u

        • OptionalexpandChorusDirective?: boolean

          Whether or not to expand {chorus} directives by rendering the last defined chorus inline after the directive.

        • Optionalinstrument?: { description?: string; type?: string } | null
        • Optionalkey?:
              | {
                  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

          The key to use for rendering. The chord sheet will be transposed from the song's original key (as indicated by the {key} directive) to the specified key. Note that transposing will only work if the original song key is set.

        • Optionalmetadata?: {
              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;
          }
          • Optionalorder?: (
                | 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
            )[]
          • Optionalseparator?: string

            The separator to be used when rendering a metadata value that has multiple values. See: https://bit.ly/2SC9c2u

        • OptionalnormalizeChords?: boolean

          Whether or not to automatically normalize chords

        • OptionalrenderBlankLines?: boolean
        • Optionaluser?: { fullname?: string; name?: string } | null
        • OptionaluseUnicodeModifiers?: boolean

          Whether or not to use unicode flat and sharp symbols.

      Returns HtmlDivFormatter

    Accessors

    • get cssObject(): CSS

      Basic CSS, in object style à la useStyles, to use with the HTML output For a CSS string see cssString

      Example:

      '.paragraph': {
  marginBottom: '1em'
}

      Returns CSS

      the CSS object

    Methods

    • Configure the formatter with new options

      Parameters

      • config: {
            cssClasses?: {
                annotation?: string;
                chord?: string;
                chordSheet?: string;
                column?: string;
                comment?: string;
                emptyLine?: string;
                label?: string;
                labelWrapper?: string;
                line?: string;
                literal?: string;
                literalContents?: string;
                lyrics?: string;
                paragraph?: string;
                row?: string;
                subtitle?: string;
                title?: string;
            };
            customCSS?: { [key: string]: string
            | number
            | undefined };
            decapo?: boolean;
            delegates?: { abc?: {}; grid?: {}; ly?: {}; tab?: {} };
            evaluate?: boolean;
            expandChorusDirective?: boolean;
            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;
            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;
            renderBlankLines?: boolean;
            user?: { fullname?: string; name?: string }
            | null;
            useUnicodeModifiers?: boolean;
        }

        New configuration options

      Returns this

      The formatter instance for chaining

    • Generates basic CSS, optionally scoped within the provided selector, to use with the HTML output

      For example, execute cssString('.chordSheetViewer') will result in CSS like:

      .chordSheetViewer .paragraph {
  margin-bottom: 1em;
}

      Parameters

      • scope: string = ''

        the CSS scope to use, for example .chordSheetViewer

      Returns string

      the CSS string

    Settings

    Member Visibility

    On This Page

    Constructors
    Accessors
    Methods