tag:forum.selfhtml.org,2005:/self Noten (.ttf) im HTML-Dokument – SELFHTML-Forum 2015-04-01T12:09:03Z https://forum.selfhtml.org/self/2015/mar/30/noten-punkt-ttf-im-html-dokument/1635900?srt=yes#m1635900 Linuchs 2015-03-30T15:59:17Z 2015-03-30T15:59:17Z Noten (.ttf) im HTML-Dokument <p>Hallo,</p> <p>ich habe eine zunehmende Sammlung von Liedertexten als HTML-Dokumente.</p> <p>Nun möchte ich mit Noten experimentieren. Ich habe den Font <a href="http://www.azfonts.net/download/notes_normal/ttf.html" rel="nofollow noopener noreferrer">notes-normal.ttf</a> heruntergeladen und eingebunden:</p> <p>@font-face { font-family: 'notes'; src: url('css/notes-normal.ttf') format('truetype'); font-weight: normal; font-style: normal; } .nt { font-family: 'notes'; color: #00f; }</p> <p>Nun kann ich mit Firefox Noten und musikalische Zeichen sehen:</p> <p><p>notes-normal.ttf</p></p> <p><p class=nt>abcdefghijklmnpqrstuvwxyz</p></p> <p>Doch die sind alle in einer Ebene. Ich muss nun noch die Tonhöhen bestimmen.</p> <p>Bevor ich das musikalische Rad neu erfinde: Wer hat schon sowas gemacht? Suche Erfahrungsaustausch.</p> <p>Mein erstes Lied zum Testen: <a href="http://shantyfreun.de/sus2015/samoa_song.htm" rel="nofollow noopener noreferrer">Samoa-Song</a></p> <p>Gruß, Linuchs</p> https://forum.selfhtml.org/self/2015/mar/30/noten-punkt-ttf-im-html-dokument/1635904?srt=yes#m1635904 Auge 2015-03-30T16:12:45Z 2015-03-30T16:12:45Z Noten (.ttf) im HTML-Dokument <p>Hallo</p> <blockquote> <p>Nun möchte ich mit Noten experimentieren. Ich habe den Font <a href="http://www.azfonts.net/download/notes_normal/ttf.html" rel="nofollow noopener noreferrer">notes-normal.ttf</a> heruntergeladen und eingebunden:</p> <p>Nun kann ich mit Firefox Noten und musikalische Zeichen sehen:</p> <p><p>notes-normal.ttf</p></p> <p><p class=nt>abcdefghijklmnpqrstuvwxyz</p></p> <p>Doch die sind alle in einer Ebene. Ich muss nun noch die Tonhöhen bestimmen.</p> </blockquote> <p>Erwartest du ernsthaft, dass HTML <em>von sich aus</em> mit Noten umgehen kann? Es gibt zwar tatsächlich einen passenden XML-Dialekt (<a href="http://de.wikipedia.org/wiki/MusicXML" rel="nofollow noopener noreferrer">MusicXML</a>), mir ist aber nicht bekannt, dass irgendein Browser damit umgehen kann.</p> <p>Wenn es nur um eine passende Darstellung geht, ist vielleicht (und rein spekulativ!) SVG die passende Wahl. Ob das nämlich sinnvoll skaliert (Viewportgrößen zu Notenzeilenlänge etc.), solltest du erst ausprobieren, so niemand anders mit besseren Ideen daherkommt.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war. Terry Pratchett, “Wachen! Wachen! </div> https://forum.selfhtml.org/self/2015/mar/30/noten-punkt-ttf-im-html-dokument/1635925?srt=yes#m1635925 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2015-03-30T19:43:40Z 2015-03-30T19:43:40Z Noten (.ttf) im HTML-Dokument <blockquote> <p>@font-face { font-family: 'notes'; src: url('css/notes-normal.ttf') format('truetype'); font-weight: normal; font-style: normal; } .nt { font-family: 'notes'; color: #00f; }</p> </blockquote> <blockquote> <p><p class=nt>abcdefghijklmnpqrstuvwxyz</p></p> </blockquote> <blockquote> <p>Bevor ich das musikalische Rad neu erfinde:</p> </blockquote> <p>Wenn das alte Rad eckig ist, ist es sinnvoll, ein neues zu erfinden.</p> <p>Dir von die ausgesuchte Schriftart stellt irgendwelche Zeichen (hier Kleinbuchstaben), die nichts mit musikalischen Zeichen zu tun haben, als musikalische Zeichen dar. Das Rad läuft nicht rund.</p> <p>Sinnvoller ist es, für musikalische Zeichen nicht andere Zeihen (Buchstaben) zu missbrauchen, sondern musikalische Zeichen als solche zu codieren. Aber auch dieses Rad ist bereits erfunden: der <a href="https://de.wikipedia.org/wiki/Unicodeblock_Notenschriftzeichen" rel="nofollow noopener noreferrer">Unicodeblock Musical Symbols U+1D100 bis U+1D1FF</a></p> <p>Diese Zeichen sind für musikalische Zeichen zu verwenden – und eine Schriftart, die das richtig darstellt.</p> <blockquote> <p>Doch die sind alle in einer Ebene. Ich muss nun noch die Tonhöhen bestimmen.</p> </blockquote> <p>Man könnte die Noten mit <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">vertical-align</span><span class="token punctuation">:</span> -0.42em</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token entity" title="&#x1D15F;">&#x1D15F;</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span></code> vertikal verschieben.</p> <p>Aber sinnvoller ist wohl – wie schon gesagt wurde – ein Notensatzprogramm, dass die Partitur in einem entsprechenden Format ausgibt. Vorzugsweise SVG.</p> <p>LLAP</p> <div class="signature">-- <br> „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer) </div> https://forum.selfhtml.org/self/2015/mar/30/noten-punkt-ttf-im-html-dokument/1635930?srt=yes#m1635930 Tabellenkalk 2015-03-30T20:28:59Z 2015-03-30T20:28:59Z Noten (.ttf) im HTML-Dokument <p>Hallo,</p> <blockquote> <p>Nun möchte ich mit Noten experimentieren.<br> Nun kann ich mit Firefox Noten und musikalische Zeichen sehen:</p> </blockquote> <p>so ganz hab ich dein Ziel noch nicht erkannt, aber kennst du <a href="http://lilypond.org" rel="nofollow noopener noreferrer">Lilypond</a>? Die stellen in ihrer Doku natürlich auch sämtliche Beispiele im HTML eingebettet dar. Vielleicht findet man raus, wie die das anstellen.</p> <p>Gruß<br> Kalk</p> https://forum.selfhtml.org/self/2015/mar/30/noten-punkt-ttf-im-html-dokument/1635946?srt=yes#m1635946 Linuchs 2015-03-31T07:49:32Z 2015-03-31T07:49:32Z Interessantes Ergebnis - bitte verbessern <p>Hallo,</p> <p>es geht auch ohne ein Fremd-Programm wie MuseScore. Kleiner Gag: Ohne Probleme können die Noten farbig sein. Es gibt Kinder-Instrumente, z.B. Xylofone, da haben die Töne Farben. Aber nicht genormt ;-)</p> <p>In einen Container setze ich Noten-Schlüssel und -Linien. Darunter in einem Absatz den Liedtext. Jede Silbe bekommt eine Note, die zum Text absolut positioniert ist (z.B. top:-12pt) und somit in die Notenlinien ragt.</p> <p>Für Firefox habe ich die Feinabstimmung gemacht, schon bei Opera sitzen die Noten nicht in der richtigen Höhe. Jeder Browser hat eben so seine eigenen Vorstellungen, was 12pt sind. Keine Ahnung, ob auf px mehr Verlass ist.</p> <p>Mir geht es zunächst darum, die Lieder selbst auszudrucken. Für das Internet kann ich immer noch grafisch das gelungene Ergebnis abgreifen.</p> <p>Bitte schaut mal den Code an. Kann man die Noten-Platzierung vereinfachen? Dies ist im Editor ganz schlecht lesbar:</p> <p>M<b><b class=g0>q</b></b>ein s<b><b class=g0>q</b></b>chö-n<b><b class=c1>q</b></b><b><b class=e0>q</b></b>es ...</p> <p>Linuchs</p> https://forum.selfhtml.org/self/2015/mar/30/noten-punkt-ttf-im-html-dokument/1635974?srt=yes#m1635974 mark 2015-03-31T12:39:50Z 2015-03-31T12:39:50Z Noten (.ttf) im HTML-Dokument <p>Hi,</p> <p>eine Schrift stößt bei Musiknotation schnell an ihre Grenzen. Ich habe mal vor einigen Jahren die Entwicklung ein wenig beobachtet. Meiner Erfahrung nach gibt es da aber nichts brauchbares, außer, du zeigst die Partitur als Vektorgrafik an.</p> <p>Es gibt ein paar Javascript-Anwendungen, die versuchen, mit mehr oder weniger Erfolg, das Musicxml-Format zu rendern. Der Vorteil ist hier, dass die meisten Musikschreibprogramme (Finale, Sybelius, Coda... Musicxml-Export nativ unterstützen). http://www.musicxml-viewer.com/</p> <p>oder eine Library: https://code.google.com/p/score-library/downloads/list</p> <p>Für ABC-Notation gibt es http://www.vexflow.com/</p> <p>Dann gibt es noch die aufwendige Variante: http://scorerender.abelcheung.org/demo/demo-lilypond/. Zugleich ist es aber auch die Variante mit den besten Ergebnissen und unterstützt ABC-Notation, MusicXML-Notation, GUIDO und wie sie sonst noch alle heißen. Lyrics werden somit ebenfalls unterstützt. Diese Anwendung benötigt externe Renderer wie z.B.: http://lilypond.org/ Du brauchst also Admin-Rechte auf deinem Server, oder dein Serverbetreiber muss so nett sein und dir Lilypond installieren.</p> <p>... aber, wie gesagt, richtig brauchbares gibt es in diesem Bereich leider noch nicht.</p> https://forum.selfhtml.org/self/2015/mar/30/noten-punkt-ttf-im-html-dokument/1635905?srt=yes#m1635905 Jörg Reinholz http://www.fastix.org 2015-03-30T16:49:57Z 2015-03-30T16:49:57Z Besser: Noten als SVG im HTML-Dokument <p>Moin!</p> <blockquote> <p>Wenn es nur um eine passende Darstellung geht, ist vielleicht (und rein spekulativ!) SVG die passende Wahl.</p> </blockquote> <p>Kann man ja probieren. <a href="http://musescore.org/en/2.0" rel="nofollow noopener noreferrer">MuseScore steht unter der GPL und kann den SVG-Export</a>. Das Skalieren ist dann eine Frage des Einbaus im HTML.</p> <p>Jörg Reinholz</p> https://forum.selfhtml.org/self/2015/mar/30/noten-punkt-ttf-im-html-dokument/1635906?srt=yes#m1635906 Linuchs 2015-03-30T16:54:26Z 2015-03-30T16:54:26Z Noten (.ttf) im HTML-Dokument <p>ich habe auge geantwortet und auf "speichern" geklickt. Mein Text ist verschollen. Was ist hier lo?</p> https://forum.selfhtml.org/self/2015/mar/30/noten-punkt-ttf-im-html-dokument/1635913?srt=yes#m1635913 Linuchs 2015-03-30T17:12:05Z 2015-03-30T17:12:05Z Besser: Noten als SVG im HTML-Dokument <p>zum zweiten Mal (erster Versuch im Nirwana verschwunden):</p> <p>Jörg Reinholz 30.03.2015 18:49 "antworten"</p> <p>MuseScore habe ich, aber wie funtioniert der Export als .svg?</p> <p>Habe dem Dateinamen .svg angehängt und MuseScore setzt sein .mscz noch dahinter.</p> <p>Linuchs</p> <p>jetzt "speichern"</p> https://forum.selfhtml.org/self/2015/mar/30/noten-punkt-ttf-im-html-dokument/1635912?srt=yes#m1635912 Linuchs 2015-03-30T17:12:05Z 2015-03-30T17:12:05Z Besser: Noten als SVG im HTML-Dokument <p>zum zweiten Mal (erster Versuch im Nirwana verschwunden):</p> <p>Jörg Reinholz 30.03.2015 18:49 "antworten"</p> <p>MuseScore habe ich, aber wie funtioniert der Export als .svg?</p> <p>Habe dem Dateinamen .svg angehängt und MuseScore setzt sein .mscz noch dahinter.</p> <p>Linuchs</p> <p>jetzt "speichern"</p> https://forum.selfhtml.org/self/2015/mar/30/noten-punkt-ttf-im-html-dokument/1635907?srt=yes#m1635907 robertroth robert.r@online.de 2015-03-30T17:00:22Z 2015-03-30T17:00:22Z Noten (.ttf) im HTML-Dokument <p>Liebe Mitdenker, liebe Wissende, liebe Neugierige,</p> <p>ja!</p> <blockquote> <p>ich habe auge geantwortet und auf "speichern" geklickt. Mein Text ist verschollen. Was ist hier lo?</p> </blockquote> <p>Wo ist das 's'?</p> <p><a href="https://www.youtube.com/watch?v=hY3AsHJOTfc" rel="nofollow noopener noreferrer">Ach, ich fühl's, es ist verschwunden</a></p> <p>Spirituelle Grüße<br> Euer Robert</p> <div class="signature">-- <br> Möge der wahre Forumsgeist ewig leben! </div> https://forum.selfhtml.org/self/2015/mar/30/noten-punkt-ttf-im-html-dokument/1635910?srt=yes#m1635910 Jörg Reinholz http://www.fastix.org 2015-03-30T17:04:27Z 2015-03-30T17:04:27Z Noten (.ttf) im HTML-Dokument <p>Moin!</p> <blockquote> <p>ich habe auge geantwortet und auf "speichern" geklickt. Mein Text ist verschollen. Was ist hier lo?</p> </blockquote> <p>Vielleicht hast Du auf "Vorschau" geklickt und meinst, dass Du auf "speichern" geklickt hast.</p> <p>Jörg Reinholz</p> https://forum.selfhtml.org/self/2015/mar/30/noten-punkt-ttf-im-html-dokument/1635929?srt=yes#m1635929 Felix Riesterer http://felix-riesterer.de 2015-03-30T20:22:19Z 2015-03-30T20:22:19Z Noten (.ttf) im HTML-Dokument <p>Lieber robertroth,</p> <blockquote> <p>Wo ist das 's'?</p> <p><a href="https://www.youtube.com/watch?v=hY3AsHJOTfc" rel="nofollow noopener noreferrer">Ach, ich fühl's, es ist verschwunden</a></p> </blockquote> <p>nice pun. Macht sie aber sehr schön die Kirsten. Stimmlich gefällt mir das sehr. Aber für die Rolle fehlt noch der inhaltliche Bezug. So ist es einfach nur schön gesungen... aber da schlägt gerade der Musiklehrer in mir wieder durch. <em>grr</em></p> <p>Liebe Grüße,</p> <p>Felix Riesterer.</p> https://forum.selfhtml.org/self/2015/mar/30/noten-punkt-ttf-im-html-dokument/1635911?srt=yes#m1635911 Linuchs 2015-03-30T17:08:26Z 2015-03-30T17:08:26Z Noten (.ttf) im HTML-Dokument <blockquote> <p>Vielleicht hast Du auf "Vorschau" geklickt und meinst, dass Du auf "speichern" geklickt hast.</p> </blockquote> <p>Jetzt: "antworten" Jörg Reinholz 30.03.2015 19:04</p> <p>Name eingetragen - speichern ...</p> https://forum.selfhtml.org/self/2015/mar/30/noten-punkt-ttf-im-html-dokument/1635915?srt=yes#m1635915 Jörg Reinholz http://www.fastix.org 2015-03-30T17:14:23Z 2015-03-30T17:32:36Z Noten (.ttf) im HTML-Dokument <p>Moin!</p> <blockquote> <blockquote> <p>Vielleicht hast Du auf "Vorschau" geklickt und meinst, dass Du auf "speichern" geklickt hast.</p> </blockquote> <p>Jetzt: "antworten" Jörg Reinholz 30.03.2015 19:04</p> <p>Name eingetragen - speichern ...</p> </blockquote> <p>... und geht!</p> <p>Jörg Reinholz</p> https://forum.selfhtml.org/self/2015/mar/30/noten-punkt-ttf-im-html-dokument/1635916?srt=yes#m1635916 Jörg Reinholz http://www.fastix.org 2015-03-30T17:17:08Z 2015-03-30T17:17:08Z Besser: Noten als SVG im HTML-Dokument <p>Moin!</p> <blockquote> <p>MuseScore habe ich, aber wie funtioniert der Export als .svg?</p> </blockquote> <p>Handbuch: <a href="http://musescore.org/en/node/38926" rel="nofollow noopener noreferrer">http://musescore.org/en/node/38926</a></p> <p>beachte den Unterschied zwischen "speichern" und "exportieren"</p> <p>Jörg Reinholz</p> https://forum.selfhtml.org/self/2015/mar/30/noten-punkt-ttf-im-html-dokument/1635917?srt=yes#m1635917 Linuchs 2015-03-30T17:29:36Z 2015-03-30T17:29:36Z Besser: Noten als SVG im HTML-Dokument <blockquote> <p>beachte den Unterschied zwischen "speichern" und "exportieren"</p> </blockquote> <p>Habe MuseScore 1.2 vor ein paar Monaten auf Ubuntu installiert.</p> <p>Logo habe ich nach "Datei" - "exportieren" gesucht, gibt's aber nicht.</p> <p>Linuchs</p> https://forum.selfhtml.org/self/2015/mar/30/noten-punkt-ttf-im-html-dokument/1635920?srt=yes#m1635920 Jörg Reinholz http://www.fastix.org 2015-03-30T18:36:36Z 2015-03-30T18:36:36Z Besser: Noten als SVG im HTML-Dokument <p>Moin!</p> <p><a href="http://wiki.ubuntuusers.de/MuseScore" rel="nofollow noopener noreferrer">http://wiki.ubuntuusers.de/MuseScore</a></p> <ol> <li>ppa:mscore-ubuntu/mscore-stable hinzufügen,</li> <li>MuseScore 2.0 installieren.</li> </ol> <p>Jörg Reinholz</p> https://forum.selfhtml.org/self/2015/mar/30/noten-punkt-ttf-im-html-dokument/1635964?srt=yes#m1635964 robertroth robert.r@online.de 2015-03-31T10:46:59Z 2015-03-31T10:46:59Z Noten (.ttf) im HTML-Dokument <p>Lieber Felix, liebe Mitdenker, liebe Wissende, liebe Neugierige,</p> <p>ja!</p> <blockquote> <blockquote> <p>Wo ist das 's'?</p> <p><a href="https://www.youtube.com/watch?v=hY3AsHJOTfc" rel="nofollow noopener noreferrer">Ach, ich fühl's, es ist verschwunden</a></p> </blockquote> <p>nice pun. Macht sie aber sehr schön die Kirsten. Stimmlich gefällt mir das sehr. Aber für die Rolle fehlt noch der inhaltliche Bezug. So ist es einfach nur schön gesungen... aber da schlägt gerade der Musiklehrer in mir wieder durch. <em>grr</em></p> </blockquote> <p>Davon las ich doch schon jüngst :-)</p> <p>Aber nun mal gleich deine Fachkenntnis angezapft. Was will denn Linuchs hier wirklich haben? Bitte korrigiere mich gleich, wenn es nicht stimmt, wie ich ihn verstanden habe:</p> <p>Er will in HTML Noten darstellen auf Notenlinen. Aber die will er nicht selber malen und dann daws Bild davon reinsetzen, sondern HTML (der Browser) soll z.B. mittelst eines speziellen Fonts Noten darstellen, so dass die Noten auch in einer (eigenen) Beschreibungssprache vorliegen und z.B. von eine Synthy sofort verstanden werden können.</p> <p>Hab ich das so richtig verstanden?</p> <p>Spirituelle Grüße<br> Euer Robert</p> <div class="signature">-- <br> Möge der wahre Forumsgeist ewig leben! </div> https://forum.selfhtml.org/self/2015/mar/30/noten-punkt-ttf-im-html-dokument/1635957?srt=yes#m1635957 Linuchs 2015-03-31T10:21:08Z 2015-03-31T10:21:08Z Eingabe hier geht verloren <p>habe ausführlich auf deine Frage geantwortet.</p> <p>Beim Klick auf "speichern" zuckt diese Schaltfläche weg. Soll das ein Schutz gegen Spam sein?</p> <p>Beim zweiten Versuch scheint der Beitrag verloren zu sein. Was ist das?</p> <p>Opear 12.16 unter Ubuntu</p> <p>Linuchs</p> https://forum.selfhtml.org/self/2015/mar/30/noten-punkt-ttf-im-html-dokument/1635963?srt=yes#m1635963 Tabellenkalk 2015-03-31T10:42:35Z 2015-03-31T10:42:35Z Noten (.ttf) im HTML-Dokument <p>Hallo,</p> <blockquote> <blockquote> <p>Nun kann ich mit Firefox Noten und musikalische Zeichen sehen:</p> </blockquote> </blockquote> <p><a href="https://de.wikipedia.org/wiki/Hilfe:Notensatz" rel="nofollow noopener noreferrer">Sogar Mediawiki unterstützt Lilypond</a></p> <p>Gruß<br> Kalk</p> https://forum.selfhtml.org/self/2015/mar/30/noten-punkt-ttf-im-html-dokument/1635948?srt=yes#m1635948 Linuchs http://shantyfreun.de/sus2015/samoa_song.htm 2015-03-31T07:52:27Z 2015-03-31T07:52:27Z Interessantes Ergebnis - bitte verbessern <p>Link vergessen: <a href="http://shantyfreun.de/sus2015/samoa_song.htm" rel="nofollow noopener noreferrer">Samoa-Song</a></p> https://forum.selfhtml.org/self/2015/mar/30/noten-punkt-ttf-im-html-dokument/1635949?srt=yes#m1635949 Auge 2015-03-31T08:34:03Z 2015-03-31T08:38:33Z Interessantes Ergebnis - bitte verbessern <p>Hallo</p> <p>Mit Verlaub, ich halte die Lösung für Mist.</p> <p>Das HTML-Dokument ist wegen der Verwendung des Fonts, der Buchstaben umdeutet, ohne das dazugehörige CSS eine unleserliche Buchstabensuppe.</p> <blockquote> <p>In einen Container setze ich Noten-Schlüssel und -Linien. Darunter in einem Absatz den Liedtext. Jede Silbe bekommt eine Note, die zum Text absolut positioniert ist (z.B. top:-12pt) und somit in die Notenlinien ragt.</p> <p>Für Firefox habe ich die Feinabstimmung gemacht, schon bei Opera sitzen die Noten nicht in der richtigen Höhe. Jeder Browser hat eben so seine eigenen Vorstellungen, was 12pt sind. Keine Ahnung, ob auf px mehr Verlass ist.</p> </blockquote> <p>Du bist keineswegs ein Frischling und solltest wissen, dass pt als Größeneinheit wunderbar als Einheit für Angaben zum Ausdruck geeignet ist aber am und für den Bildschirm nichts taugt. Der hat nämlich „Pixel inside“.</p> <blockquote> <p>Bitte schaut mal den Code an. Kann man die Noten-Platzierung vereinfachen? Dies ist im Editor ganz schlecht lesbar:</p> <p>M<b><b class=g0>q</b></b>ein s<b><b class=g0>q</b></b>chö-n<b><b class=c1>q</b></b><b><b class=e0>q</b></b>es ...</p> </blockquote> <p>… nicht nur im Editor.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war. Terry Pratchett, “Wachen! Wachen! </div> https://forum.selfhtml.org/self/2015/mar/30/noten-punkt-ttf-im-html-dokument/1635950?srt=yes#m1635950 Tabellenkalk 2015-03-31T08:49:09Z 2015-03-31T08:49:09Z Interessantes Ergebnis - bitte verbessern <p>Hallo,</p> <blockquote> <p>es geht auch ohne ein Fremd-Programm wie MuseScore.</p> </blockquote> <p>Die sind aber spezialisiert darauf und haben vermutlich im Durchschnitt mehr Jahre Erfahrung im Notensetzen, als du alt bist.</p> <blockquote> <p>Kleiner Gag: Ohne Probleme können die Noten farbig sein.</p> </blockquote> <p>Das kriegt jedes vernünftige Notenprogramm auch hin.</p> <blockquote> <p>In einen Container setze ich Noten-Schlüssel und -Linien. Darunter in einem Absatz den Liedtext. Jede Silbe bekommt eine Note, die zum Text absolut positioniert ist (z.B. top:-12pt) und somit in die Notenlinien ragt.</p> </blockquote> <p>Murx, was ist mit Silben auf die mehrere Noten kommen? Und umgekehrt?</p> <blockquote> <p>Für Firefox habe ich die Feinabstimmung gemacht, schon bei Opera sitzen die Noten nicht in der richtigen Höhe. Jeder Browser hat eben so seine eigenen Vorstellungen, was 12pt sind. Keine Ahnung, ob auf px mehr Verlass ist.</p> </blockquote> <p>Browser sind einfach das falsche Werkzeug dafür.</p> <blockquote> <p>Mir geht es zunächst darum, die Lieder selbst auszudrucken.</p> </blockquote> <p>Also nicht Bastelei, sondern zielorientiert.</p> <blockquote> <p>Für das Internet kann ich immer noch grafisch das gelungene Ergebnis abgreifen.</p> </blockquote> <p>Z.B. PDF-Dateien?</p> <blockquote> <p>Bitte schaut mal den Code an.</p> </blockquote> <p>Nö. Bitte schau mein anderes Posting in diesem Thread an.</p> <p>Gruß<br> Kalk</p> https://forum.selfhtml.org/self/2015/mar/30/noten-punkt-ttf-im-html-dokument/1635952?srt=yes#m1635952 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2015-03-31T08:56:34Z 2015-03-31T08:56:34Z Interessantes Ergebnis - bitte verbessern <blockquote> <p>Bitte schaut mal den Code an.</p> </blockquote> <p>Hab ich kurz. Es kam weder <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ruby</span><span class="token punctuation">></span></span></code> noch <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span></code> vor. Wieder weggeschaut.</p> <p>LLAP</p> <div class="signature">-- <br> „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer) </div> https://forum.selfhtml.org/self/2015/mar/30/noten-punkt-ttf-im-html-dokument/1635966?srt=yes#m1635966 Felix Riesterer http://felix-riesterer.de 2015-03-31T11:11:28Z 2015-03-31T11:11:28Z Interessantes Ergebnis - bitte verbessern <p>Lieber Linuchs,</p> <p>kennt Dein Verständnis von musikalischer Notation auch Rhythmus...?</p> <p>Liebe Grüße,</p> <p>Felix Riesterer.</p> https://forum.selfhtml.org/self/2015/mar/30/noten-punkt-ttf-im-html-dokument/1635968?srt=yes#m1635968 Felix Riesterer http://felix-riesterer.de 2015-03-31T11:17:00Z 2015-03-31T11:17:00Z Interessantes Ergebnis - bitte verbessern <p>Lieber Linuchs,</p> <blockquote> <p>es geht auch ohne ein Fremd-Programm wie MuseScore.</p> </blockquote> <p>ja, <a href="http://my.vexflow.com/articles/40" rel="nofollow noopener noreferrer">sogar mit live anhören und mitlesen im Browser</a>.</p> <p>Liebe Grüße,</p> <p>Felix Riesterer.</p> https://forum.selfhtml.org/self/2015/mar/30/noten-punkt-ttf-im-html-dokument/1635959?srt=yes#m1635959 Der Martin 2015-03-31T10:27:54Z 2015-03-31T10:27:54Z Eingabe hier geht verloren <p>Hallo,</p> <blockquote> <p>Beim Klick auf "speichern" zuckt diese Schaltfläche weg.</p> </blockquote> <p>kann ich bestätigen, ebenfalls mit Opera 12.16 unter Linux. Das Zucken tritt auf, wenn man bis ans Seitenende scrollt und dann mit der Maus irgendwelche Links hovert (Threadbaum, Tread-Icons). Nach einem Moment scrollt die Seite dann aus heiterm Himmel ein paar Zeilen nach oben.</p> <blockquote> <p>Soll das ein Schutz gegen Spam sein?</p> </blockquote> <p>Interessante These. ;-)</p> <blockquote> <p>Beim zweiten Versuch scheint der Beitrag verloren zu sein. Was ist das?</p> </blockquote> <p>Merkwürdig ist das. Das hatte ich noch nicht. Wohl aber den Effekt (mit demselben Opera), dass die Seite beim Klicken auf "Vorschau" gleich wieder zum Text-Eingabefeld springt. Zur Posting-Vorschau darüber wäre schlauer.</p> <p>Ciao,<br> Martin</p> https://forum.selfhtml.org/self/2015/mar/30/noten-punkt-ttf-im-html-dokument/1635961?srt=yes#m1635961 Auge 2015-03-31T10:34:22Z 2015-03-31T10:34:22Z Eingabe hier geht verloren <p>Hallo</p> <blockquote> <blockquote> <p>Beim Klick auf "speichern" zuckt diese Schaltfläche weg.</p> </blockquote> <p>kann ich bestätigen, ebenfalls mit Opera 12.16 unter Linux.</p> </blockquote> <p>Mit Firefox unter Windows 7 kann ich das nicht beobachten.</p> <blockquote> <blockquote> <p>Beim zweiten Versuch scheint der Beitrag verloren zu sein. Was ist das?</p> </blockquote> <p>Merkwürdig ist das. Das hatte ich noch nicht. Wohl aber den Effekt (mit demselben Opera), dass die Seite beim Klicken auf "Vorschau" gleich wieder zum Text-Eingabefeld springt. Zur Posting-Vorschau darüber wäre schlauer.</p> </blockquote> <p>Das trifft auch auf den Firefox zu. Allgemein halte ich es nicht für günstig, den Threadbaum zwischen Posting(vorschau) und Eingabefeld anzuzeigen. In der Vorschau ist es zudem völlig falsch, zum Formular zu scrollen/springen, wenn ich doch explizit die Vorschau sehen will. Bei längeren Threads wird das schnell zur Scrollorgie.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war. Terry Pratchett, “Wachen! Wachen! </div> https://forum.selfhtml.org/self/2015/mar/30/noten-punkt-ttf-im-html-dokument/1636043?srt=yes#m1636043 Matthias Apsel 2015-03-31T21:08:22Z 2015-03-31T21:08:22Z Eingabe hier geht verloren <p>Hallo Auge,</p> <blockquote> <p>Das trifft auch auf den Firefox zu. Allgemein halte ich es nicht für günstig, den Threadbaum zwischen Posting(vorschau) und Eingabefeld anzuzeigen. In der Vorschau ist es zudem völlig falsch, zum Formular zu scrollen/springen, wenn ich doch explizit die Vorschau sehen will. Bei längeren Threads wird das schnell zur Scrollorgie.</p> </blockquote> <p>Dafür gibt es schon eine issue.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Signaturen sind bloed (Steel) </div> https://forum.selfhtml.org/self/2015/mar/30/noten-punkt-ttf-im-html-dokument/1635965?srt=yes#m1635965 Auge 2015-03-31T10:59:44Z 2015-03-31T11:00:00Z Noten (.ttf) im HTML-Dokument <p>Hallo</p> <blockquote> <p>Aber nun mal gleich deine Fachkenntnis angezapft. Was will denn Linuchs hier wirklich haben?</p> <p>Er will in HTML Noten darstellen auf Notenlinen.</p> </blockquote> <p>Nein, er will Noten auf Notenlinien in einem HTML-Dokument darstellen (ohne, dass das HTML-Noten (die es nicht gibt) sein müssten).</p> <blockquote> <p>Aber die will er nicht selber malen und dann daws Bild davon reinsetzen, sondern HTML (der Browser) soll z.B. mittelst eines speziellen Fonts Noten darstellen, …</p> </blockquote> <p>Bis auf die Erwähnung von HTML ist das soweit korrekt. Mittels eines Fonts will er die Notation von Liedern in der Website darstellen.</p> <blockquote> <p>… so dass die Noten auch in einer (eigenen) Beschreibungssprache vorliegen und z.B. von eine Synthy sofort verstanden werden können.</p> </blockquote> <p>Das ist, soweit es seine Beschreibung hergibt, <strong>keine</strong> Anforderung.</p> <p>Da es also, soweit bekannt, nur um die (optische) Ausgabe von Noten in einem HTML-Dokument geht, sollte ein Notensatzprogramm mit Export nach SVG, welches wiederum in einem HTML-Dokument nutzbar ist, die beste Wahl sein.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war. Terry Pratchett, “Wachen! Wachen! </div> https://forum.selfhtml.org/self/2015/mar/30/noten-punkt-ttf-im-html-dokument/1635967?srt=yes#m1635967 Felix Riesterer http://felix-riesterer.de 2015-03-31T11:12:34Z 2015-03-31T11:12:34Z Noten (.ttf) im HTML-Dokument <p>Lieber robertroth,</p> <blockquote> <p>Aber nun mal gleich deine Fachkenntnis angezapft. Was will denn Linuchs hier wirklich haben?</p> </blockquote> <p>so etwas wie <a href="http://www.vexflow.com/" rel="nofollow noopener noreferrer">VexFlow</a>.</p> <p>Liebe Grüße,</p> <p>Felix Riesterer.</p> https://forum.selfhtml.org/self/2015/mar/30/noten-punkt-ttf-im-html-dokument/1635971?srt=yes#m1635971 Tabellenkalk 2015-03-31T11:22:54Z 2015-03-31T11:23:19Z Noten (.ttf) im HTML-Dokument <p>Hallo,</p> <blockquote> <blockquote> <p>Aber nun mal gleich deine Fachkenntnis angezapft. Was will denn Linuchs hier wirklich haben?</p> </blockquote> <p>so etwas wie <a href="http://www.vexflow.com/" rel="nofollow noopener noreferrer">VexFlow</a>.</p> </blockquote> <p>Und ich dachte es geht um Noten?</p> <blockquote> <p>The score below was rendered in your browser.<br> options space=20 tabstave notation=true key=A time=4/4 notes :q =|: (5/2.5/3.7/4) :8 7-5h6/3 ^3^ 5h6-7/5 ^3^ :q 7V/4 | notes :8 t12p7/4 s5s3/4 :8 3s:16:5-7/5 :h p5/4 text :w, |#segno, ,|, :hd, , #tr options space=25 tabstave notation=true notes :q (5/4.5/5) (7/4.7/5)s(5/4.5/5) ^3^ notes :8 7-5/4 $.a./b.$ (5/4.5/5)h(7/5) =:| notes :8 (12/5.12/4)ds(5/5.5/4)u 3b4/5 notes :h (5V/6.5/4.6/3.7/2) $.italic.let ring$ =|= text :h, ,.font=Times-12-italic, D.S. al coda, |#coda text :h, ,.-1, .font=Arial-14-bold,A13 text ++, .23, #f</p> </blockquote> <p>pre-pre-pre-alpha halt...</p> <p>Gruß<br> Kalk</p> https://forum.selfhtml.org/self/2015/mar/30/noten-punkt-ttf-im-html-dokument/1635972?srt=yes#m1635972 Felix Riesterer http://felix-riesterer.de 2015-03-31T11:42:44Z 2015-03-31T11:42:44Z Noten (.ttf) im HTML-Dokument <p>Lieber Tabellenkalk,</p> <blockquote> <p>pre-pre-pre-alpha halt...</p> </blockquote> <p>ist es das? <a href="http://my.vexflow.com/articles/40" rel="nofollow noopener noreferrer">Diese Demo</a> und das dahinter stehende System (sieht mir etwas nach social networking feature aus) scheint schon etwas mehr als pre-pre-pre-alpha zu sein.</p> <p>Liebe Grüße,</p> <p>Felix Riesterer.</p> https://forum.selfhtml.org/self/2015/mar/30/noten-punkt-ttf-im-html-dokument/1635973?srt=yes#m1635973 Tabellenkalk 2015-03-31T12:16:22Z 2015-03-31T12:16:22Z Noten (.ttf) im HTML-Dokument <p>Hallo,</p> <blockquote> <p>ist es das? <a href="http://my.vexflow.com/articles/40" rel="nofollow noopener noreferrer">Diese Demo</a> und das dahinter stehende System (sieht mir etwas nach social networking feature aus) scheint schon etwas mehr als pre-pre-pre-alpha zu sein.</p> </blockquote> <p>"pre-pre-pre-alpha" ist von der Webseite zitiert. Aber mit aktiviertem JS sieht's aus, als könnte man ein pre schon mal streichen.</p> <p>Gruß<br> Kalk</p> https://forum.selfhtml.org/self/2015/mar/30/noten-punkt-ttf-im-html-dokument/1636064?srt=yes#m1636064 Auge 2015-04-01T08:30:38Z 2015-04-01T08:30:38Z Eingabe hier geht verloren <p>Hallo</p> <blockquote> <blockquote> <p>Das trifft auch auf den Firefox zu. Allgemein halte ich es nicht für günstig, den Threadbaum zwischen Posting(vorschau) und Eingabefeld anzuzeigen. In der Vorschau ist es zudem völlig falsch, zum Formular zu scrollen/springen, wenn ich doch explizit die Vorschau sehen will. Bei längeren Threads wird das schnell zur Scrollorgie.</p> </blockquote> <p>Dafür gibt es schon eine issue.</p> </blockquote> <p>Apropos Threadbaum in der Seite mit dem Postingformular und damit auch in der Vorschau. Kann es sein, dass in diesen Seiten der Threadbaum eine andere HTML- und/oder Klassenstruktur hat, als „draußen“? Mit ist nämlich folgendes aufgefallen. Ich habe das in einem Thread vorgeschlagene User-CSS, mit dem das aktuelle und die bereits gelesenen Postings stärker hervorgehoben werden, eingebaut und angepasst.</p> <pre><code class="block language-css"><span class="token selector">header.visited, header.visited h3 a</span><span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span>#d4d4d4<span class="token punctuation">}</span> <span class="token comment">/* besuchte Beiträge ausgrauen */</span> <span class="token selector">header.visited .author</span><span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span>#d4d4d4<span class="token punctuation">}</span> <span class="token comment">/* besuchte Beiträge ausgrauen */</span> <span class="token selector">header.visited .details>a</span><span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span>#d4d4d4 <span class="token important">!important</span><span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token comment">/* besuchte Beiträge ausgrauen */</span> <span class="token selector">.thread header .votes</span><span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span>#666<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token comment">/* besuchte Beiträge ausgrauen */</span> <span class="token selector">li.cf-tag</span><span class="token punctuation">{</span><span class="token property">background</span><span class="token punctuation">:</span> #eaf7fb <span class="token important">!important</span><span class="token punctuation">;</span> <span class="token property">border-color</span><span class="token punctuation">:</span> #89b3cb <span class="token important">!important</span><span class="token punctuation">}</span> <span class="token comment">/*tags unauffälliger */</span> <span class="token selector">article.thread.posting header.active</span> <span class="token punctuation">{</span><span class="token property">border</span><span class="token punctuation">:</span>1px solid #49939b<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token comment">/* aktuell geöffneten Beitrag hervorheben */</span> </code></pre> <p>Das funktioniert in den Übersichten und das funktioniert in der Ansicht des Postings. Wo die Regeln nicht angewendet werden, ist die Seite mit dem Formular und mit der Vorschau. Das mag so gewollt sein. Die endgültige Struktur steht ja auch noch nicht felsenfest fest, wie hier an mehreren Stellen zu lesen war. Gibt es einen Zeitplan, mit dem ich abschätzen kann, wann es sich lohnt, die nötigen Änderungen (einmalig) durchzuführen?</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war. Terry Pratchett, “Wachen! Wachen! </div> https://forum.selfhtml.org/self/2015/mar/30/noten-punkt-ttf-im-html-dokument/1636068?srt=yes#m1636068 Matthias Apsel 2015-04-01T09:17:10Z 2015-04-01T10:10:09Z Eingabe hier geht verloren <p>Hallo Auge,</p> <blockquote> <p>Apropos Threadbaum in der Seite mit dem Postingformular und damit auch in der Vorschau. Kann es sein, dass in diesen Seiten der Threadbaum eine andere HTML- und/oder Klassenstruktur hat, als „draußen“?</p> </blockquote> <p>Ja, und auch dafür gibt es die issue schon.</p> <blockquote> <p>Gibt es einen Zeitplan, mit dem ich abschätzen kann, wann es sich lohnt, die nötigen Änderungen (einmalig) durchzuführen?</p> </blockquote> <p>Nein. Ich finds schade, dass viele schon mit dem User-CSS arbeiten. Viele Hinweise und Anregungen werden mit Sicherheit in das allgemeine CSS eingearbeitet werden, die dann gar nicht von allen wahrgenommen werden.</p> <p><strong>edit</strong> bzw. sind schon eingearbeitet, nur noch nicht online</p> <p>Vielleicht sollten wir bei jeder CSS-Änderung die User-CSSe auskommentieren. <code>/* wegen Änderungen am allgemeinen CSS deaktiviert */</code> Aber da man Kommentare nicht schachteln kann, ist die einfachste Lösung löschen ;-)</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Signaturen sind bloed (Steel) </div> https://forum.selfhtml.org/self/2015/mar/30/noten-punkt-ttf-im-html-dokument/1636076?srt=yes#m1636076 Auge 2015-04-01T10:23:35Z 2015-04-01T10:23:35Z Eingabe hier geht verloren <p>Hallo</p> <blockquote> <blockquote> <p>Gibt es einen Zeitplan, mit dem ich abschätzen kann, wann es sich lohnt, die nötigen Änderungen (einmalig) durchzuführen?</p> </blockquote> <p>Nein. Ich finds schade, dass viele schon mit dem User-CSS arbeiten.</p> </blockquote> <p>Da der Threadbaum in mancher Hinsicht (momentan) wirklich unleserlich ist, war das echt notwendig.</p> <blockquote> <p>Viele Hinweise und Anregungen werden mit Sicherheit in das allgemeine CSS eingearbeitet werden, die dann gar nicht von allen wahrgenommen werden.</p> <p><strong>edit</strong> bzw. sind schon eingearbeitet, nur noch nicht online</p> </blockquote> <p>Solange es nicht online ist, möchte ich auch mein Behelfs-User-CSS behalten.</p> <blockquote> <p>Vielleicht sollten wir bei jeder CSS-Änderung die User-CSSe auskommentieren. <code>/* wegen Änderungen am allgemeinen CSS deaktiviert */</code> Aber da man Kommentare nicht schachteln kann, ist die einfachste Lösung löschen ;-)</p> </blockquote> <p>Wenn die Änderungen ausreichend dokumentiert werden, sollte das nicht nötig sein. Dazu würde es mMn reichen, wenn nach einer Änderung der Struktur und/oder des CSS in einem Posting auf die Commitmessages samt den dazugehörigen Diffs verwiesen wird. Wer ein User-CSS benutzt, sollte damit etwas anfangen können und wer zu dieser Zeit abwesend ist, kann auf Rückfrage auf den entsprechenden Thread verwiesen werden.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war. Terry Pratchett, “Wachen! Wachen! </div> https://forum.selfhtml.org/self/2015/mar/30/noten-punkt-ttf-im-html-dokument/1636129?srt=yes#m1636129 Camping_RIDER janosch.zoller@gmx.de http://www.campingrider.de 2015-04-01T12:09:03Z 2015-04-01T12:09:03Z Eingabe hier geht verloren <p>Aloha ;)</p> <blockquote> <p>Vielleicht sollten wir bei jeder CSS-Änderung die User-CSSe auskommentieren. <code>/* wegen Änderungen am allgemeinen CSS deaktiviert */</code> Aber da man Kommentare nicht schachteln kann, ist die einfachste Lösung löschen ;-)</p> </blockquote> <p>User-CSSe löschen, wie? Hehe, ich hör schon den Mob mit den Mistgabeln aufziehen xD</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller Erreichbar meist Mittwochs ab 21 Uhr im Self-TS (ts.selfhtml.org) oder sonst - wenn online - auf dem <a href="http://www.tsviewer.com/index.php?page=ts_viewer&ID=1060332" rel="nofollow noopener noreferrer">eigenen TeamSpeak-Server</a> (fritz.campingrider.de). # <a href="http://www.tsviewer.com/index.php?page=ts_viewer&ID=1060332" rel="nofollow noopener noreferrer">Facebook</a> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[ </div>