chordProSVG

chordPro - Was ist das?

chordPro ist ein Text-Dateiformat zur Darstellung von Liedtext mit Akkorden.

Programme diverser Autoren

ChordPro https://www.chordpro.org/

Dieses Programm von Johan Vromans (Entwickler des chordPro-Dateiformats) u.a. ist eine ausgereifte Version, mit der PDF-Dateien erstellt werden können.

Simple ChordPro (Online) simplechordpro.com

Ausgabe als Text mit nicht proportionaler Schrift
Sehr nützlich zum Transponieren!
Umwandlung Text mit Akkordzeilen ⇄ chordPro

chordPro - Quelldateien

Eine kleine Auswahl:

The OLGA Archive

Jim's Songbook
Zugleich praktisches Tool zum Musizieren

ANMERKUNG: Manchmal sind kleine Anpassungen im Text notwendig, nicht alle Dateien entsprechen genau dem chordPro-Standard

chordProSVG

© G. Schacherl, 2021, Version 2.8

Mein Programm → chordProSVG ← ist eine einfache Version, die im Browser läuft und aus chordPro-Quelltext eine SVG-Grafik-Datei erzeugen kann.

SVG erzeugen

Buttons:

Speziell formatiert werden:

Akkorde
{title: ...}, {t: ...}
{subtitle: ...}, {st: ...}
{artist: ...}
{lyricist: ...}
{start_of_chorus}, {soc}
{end_of_chorus}, {eoc}
{start_of_tab}, {sot}
{end_of_tab}, {eot}
{comment: ...}, {c: ...}
# (+ Leerzeichen)

Zur Transposition von Akkorden:

Wenn im Quelltext {key: ...} enthalten ist, kann die Tonart mit dem Button "Find key" ausgelesen werden,
ansonsten muss die Starttonart ("From") selbst gesucht und gewählt werden.
Nach der Transposition steht in {key: ...} die neue Tonart.
Die Funktionalität ist ingesamt noch nicht ganz perfekt, aber durchaus hilfreich.

SVG-Quelltext extrahieren

Es können 4 Arten von Quellcode für eine SVG-Grafik erzeugt werden:

Normal

Das erzeugte SVG erhält eine passene Länge und Höhe (SVG mit 'width' und 'height')

Scalable

Das erzeugte SVG passt sich zunächst der Größe des Bildschirms an und kann nachträglich per Mausklick oder Touch verändert werden (SVG mit 'viewBox'-Attribut)

CSS Intern

CSS ist bereits im Quellcode enthalten. Sinnvoll, wenn nur wenige Dateien erstellt werden oder ein einzelnes SVG in eine Internetseite eingebunden wird.

CSS extern

Eine extra CSS-Datei ist notwendig. Bei mehreren SVG-Dateien ist externes CSS sinnvoll, weil alle Dateien damit gleich formatiert werden und Änderungen des Formats leicht möglich sind.

Copy to clipboard

Der Quelltext wird in die Zwischenablage kopiert und könnte in ein bestehendes HTML-Dokument als Inline-SVG eingesetzt werden.

Preview

Das SVG (= der erzeugte Quellcode) wird in einer neuen Internetseite geöffnet. Diese Seite kann als SVG-Grafik (*.svg) lokal gespeichert werden:

Für Einzelseiten

(Menü des Browsers: "Seite speichern unter ...").

Für mehrere Seiten in Folge

Besser ist grundsätzlich (für Computer-Erfahrene): Mit den Development-Tools (F12) im Inspector das SVG kopieren, d.h. in Firefox: Kopieren - Äußeres Html.
Den kopierten Code als SVG-Datei speichern. Damit wird im Gegensatz zum normalen lokalen Speichern kein zusätzlicher Ordner erzeugt.

Wenn "CSS extern" gewählt wurde, müssen chordProSvg_normal.css und/oder chordProSvg_scale.css zusätzlich herunter geladen und im gleichen Ordner gespeichert werden.

Anwendungsbeispiele mit externen CSS-Dateien

Die Beispiele stammen aus einer älteren Version von chordProSVG und werden demnächst angepasst!

SVG "standalone"

Normal

die-gedanken-sind-frei.svg

clementine.svg

CSS-Datei: svg-style.css

Scalable

die-gedanken-sind-frei-SCALE.svg

clementine-SCALE.svg

CSS-Datei: svg-style-SCALE.css

SVG "inline" auf Internetseite

Der Quelltext der SVG-Datei steht in chordProSVG als Text zur Verfügung und kann in eine Internetseite eingesetzt werden.

Normal

hab-sonne-im-herzen.html

go-down-moses.html

CSS-Datei: svg-style-inline.css

Scalable

hab-sonne-im-herzen-SCALE.html

go-down-moses-SCALE.html

CSS-Datei: svg-style-inline-SCALE.css

Für eigene Versuche studieren Sie den Quelltext der angegebenen Seite!

Dynamische Erzeugung von SVG aus dem chordPro-Quelltext

oh-susanna.html

Auf dieser Seite befindet sich ein chordPro-Quelltext, die dynamische Umwandlung in ein SVG besorgt meine Javascript-Datei chordProSVGweb.js

Dazu ist eine CSS-Datei (hier: chordProSvgStyleWeb.css) notwendig, die ev. angepasst werden könnte:

Für eigene Versuche studieren Sie den Quelltext der angegebenen Seite!

ABC-Quelltext und chordPro-Quelltext auf einer Seite

Noch interessanter ist die Kombination aus abc2svg (J. F. Moine) und chordProSVG. Beide Programme rendern dynamisch jeweils eine SVG-Grafik!

Siehe abcweb_chordProSVG-CPsource.html

Zugehörige CSS-Datei: chordProSvgStyleWeb.css