verovio-humdrum-viewer
verovio-humdrum-viewer copied to clipboard
humdrum-tools
Embedded Preface and Appendix HTML
Allow HTML text to be encoded in Humdrum file to be displayed before or after the musical content in VHV. Probably incorporate it into HNP so that it can be used in other interfaces.
For multi-page views of the score, the preface would only be shown at the top of the first page, and the appendix at the bottom of the last page.
HTML code would be encoded in the ATON system embedded within global comments, something like:
!!@@BEGIN: PREHTML
!!@CONTENT: <p> This is some text before the start of the score </p>
!!@@END: PREHTML
!!@@BEGIN: POSTHTML
!!@CONTENT: <p> This is some text after the end of the score </p>
!!@@END: POSTHTML
Possibly expand to language translations:
!!@@BEGIN: PREHTML
!!@CONTENT-EN: <p> This is some text before the start of the score </p>
!!@CONTENT-ES: <p> Este es un texto antes del comienzo de la partitura. </p>
!!@CONTENT-PL: <p> To jest tekst przed rozpoczęciem partytury. </p>
!!@CONTENT-LO: <p> ນີ້ແມ່ນຂໍ້ຄວາມບາງຢ່າງກ່ອນທີ່ຈະເລີ່ມຕົ້ນຄະແນນ. </p>
!!@@END: PREHTML
!!@@BEGIN: POSTHTML
!!@CONTENT-EN: <p> This is some text after the end of the score </p>
!!@CONTENT-ES: <p> Este es un texto después del final de la partitura. </p>
!!@CONTENT-PL: <p> To jest tekst po zakończeniu partytury. </p>
!!@CONTENT-LO: <p> ນີ້ແມ່ນບາງຂໍ້ຄວາມຫຼັງຈາກສິ້ນສຸດຄະແນນ. </p>
!!@@END: POSTHTML
Mostly implemented with commit https://github.com/humdrum-tools/humdrum-notation-plugin/commit/e19a2024c811ed60805f4e143902aef5210e13a4.
Example:
The feature is embedded into HNP. Here is the source code of the HTML file for the above page:
<html>
<head>
<title>My Score</title>
<script src="https://plugin.humdrum.org/scripts/humdrum-notation-plugin-worker.js">
</script>
</head>
<body>
<script>
displayHumdrum({
source: "my-score",
autoResize: "true",
lang: "LO"
});
<!-- See https://plugin.humdrum.org/#options for more display options -->
</script>
<script type="text/x-humdrum" id="my-score">
!!!COM: Mozart, Wolfgang
!!!OTL: In C
!!!OTL: In A
!!!OTL: In B
**kern
1c
*-
!!@@BEGIN: PREHTML
!!@STYLE: background: yellow; margin-bottom: -50px; padding: 10px;
!!@CONTENT: <p> This is some text before the start of the score </p>
!!@@END: PREHTML
!!@@BEGIN: POSTHTML
!!@CONTENT: <p> This is some text after the end of the score </p>
!!@STYLE: background: orange; margin-top: -30px;
!!@@END: POSTHTML
</script>
</body>
</html>
Notice the STYLE parameter which contains CSS styling for the PREHTML and POSTHTML divs.
A language option is also implemented:
In this case a new HNP option lang is added to select a display language. In this case the language is set to ES:
<html>
<head>
<title>My Score</title>
<script src="https://plugin.humdrum.org/scripts/humdrum-notation-plugin-worker.js">
</script>
</head>
<body>
<script>
displayHumdrum({
source: "my-score",
autoResize: "true",
lang: "ES"
});
<!-- See https://plugin.humdrum.org/#options for more display options -->
</script>
<script type="text/x-humdrum" id="my-score">
!!!COM: Mozart, Wolfgang
!!!OTL: In C
!!!OTL: In A
!!!OTL: In B
**kern
1c
*-
!!@@BEGIN: PREHTML
!!@STYLE: margin-bottom: -50px;
!!@CONTENT-EN: <p> This is some text before the start of the score </p>
!!@CONTENT-ES: <p> Este es un texto antes del comienzo de la partitura. </p>
!!@CONTENT-PL: <p> To jest tekst przed rozpoczęciem partytury. </p>
!!@CONTENT-LO: <p> ນີ້ແມ່ນຂໍ້ຄວາມບາງຢ່າງກ່ອນທີ່ຈະເລີ່ມຕົ້ນຄະແນນ. </p>
!!@@END: PREHTML
!!@@BEGIN: POSTHTML
!!@CONTENT-EN: <p> This is some text after the end of the score </p>
!!@CONTENT-ES: <p> Este es un texto después del final de la partitura. </p>
!!@CONTENT-PL: <p> To jest tekst po zakończeniu partytury. </p>
!!@CONTENT-LO: <p> ນີ້ແມ່ນບາງຂໍ້ຄວາມຫຼັງຈາກສິ້ນສຸດຄະແນນ. </p>
!!@STYLE: margin-top: -30px;
!!@@END: POSTHTML
</script>
</body>
</html>
Here is an example for setting lang: LO (Laotian):
Click to view HTML code for above webpage
<html>
<head>
<title>My Score</title>
<script src="https://plugin.humdrum.org/scripts/humdrum-notation-plugin-worker.js">
</script>
</head>
<body>
<script>
displayHumdrum({
source: "my-score",
autoResize: "true",
lang: "LO"
});
<!-- See https://plugin.humdrum.org/#options for more display options -->
</script>
<script type="text/x-humdrum" id="my-score">
!!!COM: Mozart, Wolfgang
!!!OTL: In C
!!!OTL: In A
!!!OTL: In B
**kern
1c
*-
!!@@BEGIN: PREHTML
!!@STYLE: margin-bottom: -50px;
!!@CONTENT-EN: <p> This is some text before the start of the score </p>
!!@CONTENT-ES: <p> Este es un texto antes del comienzo de la partitura. </p>
!!@CONTENT-PL: <p> To jest tekst przed rozpoczęciem partytury. </p>
!!@CONTENT-LO: <p> ນີ້ແມ່ນຂໍ້ຄວາມບາງຢ່າງກ່ອນທີ່ຈະເລີ່ມຕົ້ນຄະແນນ. </p>
!!@@END: PREHTML
!!@@BEGIN: POSTHTML
!!@CONTENT-EN: <p> This is some text after the end of the score </p>
!!@CONTENT-ES: <p> Este es un texto después del final de la partitura. </p>
!!@CONTENT-PL: <p> To jest tekst po zakończeniu partytury. </p>
!!@CONTENT-LO: <p> ນີ້ແມ່ນບາງຂໍ້ຄວາມຫຼັງຈາກສິ້ນສຸດຄະແນນ. </p>
!!@STYLE: margin-top: -30px;
!!@@END: POSTHTML
</script>
</body>
</html>
If the desired language content is not present, CONTENT without a language qualifier will be used. If CONTENT does not exist, then use the first parameter that start with CONTENT. Here is an example of selecting Italian, which is not an option:
Click to view HTML code for above webpage
<html>
<head>
<title>My Score</title>
<script src="https://plugin.humdrum.org/scripts/humdrum-notation-plugin-worker.js">
</script>
</head>
<body>
<script>
displayHumdrum({
source: "my-score",
autoResize: "true",
lang: "IT"
});
<!-- See https://plugin.humdrum.org/#options for more display options -->
</script>
<script type="text/x-humdrum" id="my-score">
!!!COM: Mozart, Wolfgang
!!!OTL: In C
!!!OTL: In A
!!!OTL: In B
**kern
1c
*-
!!@@BEGIN: PREHTML
!!@STYLE: margin-bottom: -50px;
!!@CONTENT-EN: <p> This is some text before the start of the score </p>
!!@CONTENT-ES: <p> Este es un texto antes del comienzo de la partitura. </p>
!!@CONTENT-PL: <p> To jest tekst przed rozpoczęciem partytury. </p>
!!@CONTENT-LO: <p> ນີ້ແມ່ນຂໍ້ຄວາມບາງຢ່າງກ່ອນທີ່ຈະເລີ່ມຕົ້ນຄະແນນ. </p>
!!@@END: PREHTML
!!@@BEGIN: POSTHTML
!!@CONTENT-EN: <p> This is some text after the end of the score </p>
!!@CONTENT-ES: <p> Este es un texto después del final de la partitura. </p>
!!@CONTENT-PL: <p> To jest tekst po zakończeniu partytury. </p>
!!@CONTENT-LO: <p> ນີ້ແມ່ນບາງຂໍ້ຄວາມຫຼັງຈາກສິ້ນສຸດຄະແນນ. </p>
!!@STYLE: margin-top: -30px;
!!@@END: POSTHTML
</script>
</body>
</html>
The lang option should allow multiple entries such as lang: "IT; ES; EN" which would mean used Italian content; if no Italian use Spanish; if no Spanish use English (and if no English, use the first CONTENT entry).
Commit https://github.com/humdrum-tools/humdrum-notation-plugin/commit/c3e4ce90a8fe0af5d721fe14c20efe8ba439bd66 implements language fallbacks.
Example:
<html>
<head>
<title>My Score</title>
<script src="https://plugin.humdrum.org/scripts/humdrum-notation-plugin-worker.js"></script>
</head>
<body>
<script>
displayHumdrum({
source: "my-score",
autoResize: "true",
lang: "IT; ES; EN"
});
<!-- See https://plugin.humdrum.org/#options for more display options -->
</script>
<script type="text/x-humdrum" id="my-score">
!!!COM: Mozart, Wolfgang
!!!OTL: In C
**kern
1c
*-
!!@@BEGIN: PREHTML
!!@STYLE: margin-bottom: -50px;
!!@CONTENT-EN: <p> This is some text before the start of the score </p>
!!@CONTENT-ES: <p> Este es un texto antes del comienzo de la partitura. </p>
!!@CONTENT-PL: <p> To jest tekst przed rozpoczęciem partytury. </p>
!!@CONTENT-LO: <p> ນີ້ແມ່ນຂໍ້ຄວາມບາງຢ່າງກ່ອນທີ່ຈະເລີ່ມຕົ້ນຄະແນນ. </p>
!!@@END: PREHTML
!!@@BEGIN: POSTHTML
!!@CONTENT-EN: <p> This is some text after the end of the score </p>
!!@CONTENT-ES: <p> Este es un texto después del final de la partitura. </p>
!!@CONTENT-PL: <p> To jest tekst po zakończeniu partytury. </p>
!!@CONTENT-LO: <p> ນີ້ແມ່ນບາງຂໍ້ຄວາມຫຼັງຈາກສິ້ນສຸດຄະແນນ. </p>
!!@STYLE: margin-top: -30px;
!!@@END: POSTHTML
</script>
</body>
</html>
The above example displays Spanish, since there is no Italian:
Commit https://github.com/humdrum-tools/verovio-humdrum-viewer/commit/9a3ccb414a9b9c8765518705c3c503fa420b2093 allows this system to work in VHV. I implemented separately in VHV since HNP was not originally used and it is easier to emulate same functionality from HNP instead of using HNP.
Here is an example:
!!!COM: Riley, Terry
!!!CDT: 1935/06/24-
!!!CDT: 1770-1825
!!!OTL: In C
**kern
1c;
==
*-
!!@@BEGIN: PREHTML
!!@STYLE: margin-bottom: -30px;
!!@CONTENT:
!!<table style="width:200px">
!!<tr><td>Composer:</td><td>@{COM}</td>
!!<tr><td>Dates:</td><td>@{CDT}</td>
!!<tr><td>TITLE:</td><td>@{OTL}</td>
!!@@END: PREHTML
!!@@BEGIN: POSTHTML
!!@CONTENT: <p>@{verse1}</p><p>@{verse2}</p>
!!@@END: POSTHTML
!!!verse1: Verse 1 of lyrics
!!!verse2: Verse 2 of lyrics
This implementation also has a templating system that will be ported to the HNP version of this feature.
Here is an example where the verse1 and verse2 parameters are stored in the POSTHTML entry rather than as reference records:
!!!COM: Riley, Terry
!!!CDT: 1935/06/24-
!!!CDT: 1770-1825
!!!OTL: In C
**kern
1c;
==
*-
!!@@BEGIN: PREHTML
!!@STYLE: margin-bottom: -30px;
!!@CONTENT:
!!<table style="width:200px">
!!<tr><td>Composer:</td><td>@{COM}</td>
!!<tr><td>Dates:</td><td>@{CDT}</td>
!!<tr><td>TITLE:</td><td>@{OTL}</td>
!!@@END: PREHTML
!!@@BEGIN: POSTHTML
!!@CONTENT: <p>@{verse1}</p><p>@{verse2}</p>
!!@verse1: Verse 1 of lyrics
!!@verse2: Verse 2 of lyrics
!!@@END: POSTHTML
Commit https://github.com/humdrum-tools/verovio-humdrum-viewer/commit/a17d01e8c77ff619521531fe0f7e8bf7de82b301 implement automatic language selection based on menu language.
Example:
!!!OTL: Default title
!!!OTL@PL: Polski tytuł
!!!OTL@ES: Título español
**kern
1c;
==
*-
!!@@BEGIN: PREHTML
!!@STYLE: margin-bottom: -30px
!!@CONTENT: This is the title: <i>@{OTL}</i>
!!@CONTENT-ES: Este es el titulo: <i>@{OTL}</i>
!!@CONTENT-PL: To jest tytuł: <i>@{OTL}</i>
!!@@END: PREHTML
Language of menus changed to Spanish:
Menu language changed to Polish:
