martijnversluis / ChordSheetJS

ChordSheetJS A JavaScript library for parsing and formatting chord sheets **Contents** • Installation • How to ...? • Try it online • Supported ChordPro directives • Project board • API docs • Contributing Installation Package managers is on npm, to install run: Load with : or : Standalone bundle file If you're not using a build tool, you can download and use the from the latest release: How to ...? Parse chord sheet Regular chord sheets Ultimate Guitar chord sheets Chord pro format Display a parsed sheet Plain text format HTML format Table-based layout Div-based layout Chord pro format Chords over words format PDF format (BETA) > **Note:** is currently in beta. Its API may change in future releases. Generates a PDF document directly. Requires configuration for page size and fonts. Measured HTML format (BETA) > **Note:** is currently in beta. Its API may change in future releases. Creates HTML output with precise text measurement for accurate chord positioning. Layout Engine The and are powered by a layout engine that handles text measurement and precise positioning of chords above lyrics. The layout engine uses measurers to calculate text dimensions: • - Measures text using the browser's DOM • - Measures text using HTML Canvas • - Measures text using jsPDF (for PDF output) These are used internally by the measurement-based formatters but can also be accessed directly for advanced use cases. Serialize/deserialize Chord sheets ( s) can be serialized to plain JavaScript objects, which can be converted to JSON, XML etc by third-party libraries. The serialized object can also be deserialized back into a . Add styling The HTML formatters (HtmlTableFormatter and HtmlDivFormatter) can provide basic CSS to help with styling the output: Parsing and modifying chords Parse Parse numeric chords (Nashville system): Display with #toString Use #toString() to convert the chord to a chord string (eg Dsus/F#) Clone Normalize Normalizes keys B#, E#, Cb and Fb to C, F, B and E ~~Switch modifier~~ ***Deprecated*** Convert # to b and vice versa Use specific modifier Set the chord to a specific modifier (# or b) Transpose up Transpose down Transpose Convert numeric chord to chord symbol Supported ChordPro directives All directives are parsed and are added to . The list below indicates whether formatters actually use those to change the generated output. :heavy_check_mark: = supported :clock2: = will be supported in a future version :heavy_multiplication_x: = currently no plans to support it in the near future Meta-data directives | Directive | Support | |:---------------- |:------------------:| | title (short: t) | :heavy_check_mark: | | subtitle | :heavy_check_mark: | | artist | :heavy_check_mark: | | composer | :heavy_check_mark: | | lyricist | :heavy_check_mark: | | copyright | :heavy_check_mark: | | album | :heavy_check_mark: | | year | :heavy_check_mark: | | key | :heavy_check_mark: | | time | :heavy_check_mark: | | tempo | :heavy_check_mark: | | duration | :heavy_check_mark: | | capo | :heavy_check_mark: | | meta | :heavy_check_mark: | Formatting directives | Directive | Support | |:-------------------------- |:------------------------:| | comment (short: c) | :heavy_check_mark: | | comment_italic (short: ci) | :heavy_multiplication_x: | | comment_box (short: cb) | :heavy_multiplication_x: | | chorus | :heavy_multiplication_x: | | image | :heavy_multiplication_x: | Environment directives | Directive | Support | |:---------------------------- |:------------------:| | start_of_chorus (short: soc) | :heavy_check_mark: | | end_of_chorus (short: eoc) | :heavy_check_mark: | | start_of_verse | :heavy_check_mark: | | end_of_verse | :heavy_check_mark: | | start_of_tab (short: sot) | :heavy_check_mark: | | end_of_tab (short: eot) | :heavy_check_mark: | | start_of_grid | :heavy_check_mark: | | end_of_grid | :heavy_check_mark: | Chord diagrams | Directive | Support | |:--------- |:------------------:| | define | :heavy_check_mark: | | chord | :heavy_check_mark: | Fonts, sizes and colours | Directive | Support | |:----------- |:------------------------:| | textfont | :heavy_check_mark: | | textsize | :heavy_check_mark: | | textcolour | :heavy_check_mark: | | chordfont | :heavy_check_mark: | | chordsize | :heavy_check_mark: | | chordcolour | :heavy_check_mark: | | tabfont | :heavy_multiplication_x: | | tabsize | :heavy_multiplication_x: | | tabcolour | :heavy_multiplication_x: | Output related directives | Directive | Support | |:------------------------------ |:------------------------:| | new_page (short: np) | :heavy_multiplication_x: | | new_physical_page (short: npp) | :heavy_multiplication_x: | | column_break (short: cb) | :heavy_multiplication_x: | | grid (short: g) | :heavy_multiplication_x: | | no_grid (short: ng) | :heavy_multiplication_x: | | titles | :heavy_multiplication_x: | | columns (short: col) | :heavy_multiplication_x: | Custom extensions | Directive | Support | |:--------- |:------------------:| | x_ | :heavy_check_mark: | API docs For more information, see the API docs.