Mjchael: Breite der UTF8-Zeichen als Liste

Hallo,
Ich bin Autor des Gitarrenbuches auf den Wikibooks, und Moderator in zwei Gitarrenforen.
Ich beabsichtige Akkordbilder mit UTF8-Zeichen zu erstellen.
     Ⅰ        Ⅱ       Ⅲ
╓─█─┬───┬─▢─┬
╟─█─┼───┼─◯─┼
╟─█─┼─◼─┼─⬤─┼
╟─█─┼───┼─◼─┼
╟─█─┼───┼─◼─┼
╙─█─┴───┴─⚫─┴
Ich habe schon sehr viele Tabellen und Homepages durchforstet, aber leider habe ich keine Informationen über die Zeichenbreite gefunden.
Mein Problem ist die variable Breite der Zeichen. Wenn ich mit Nummern und Buchstaben (eingekreist) etc. arbeiten möchte, zerschießt es mir jedes mal das Design.

Habt ihr einen Tipp für mich, wo ich die UTF8-Zeichen nach der Breite sortiert finden kann?
Oder hat sonst schon jemand versucht Akkord- und Skalenbilder mit UTF8-Zeichen zu erstellen, und hätte einen Link für mich?

Ich wäre für jeden Fingerzeig dankbar.

Mit freundlichen Grüßen
Mjchael

http://www.gitarre-spielen-lernen.de/forum/
http://de.wikibooks.org/wiki/Benutzer:Mjchael

  1. Ich beabsichtige Akkordbilder mit UTF8-Zeichen zu erstellen.
         Ⅰ        Ⅱ       Ⅲ
    ╓─█─┬───┬──▢┬
    ╟─█─┼───┼─◯─┼
    ╟─█─┼─◼─┼─⬤─┼
    ╟─█─┼───┼─◼─┼
    ╟─█─┼───┼─◼─┼
    ╙─█─┴───┴─⚫─┴

    Du möchtest das gesamte Gitter des Notenblattes nur mit den Sonderzeichen machen? Aus welchen Gründen diese Mehrarbeit? Ein einfaches Bild würde diese Aufgabe doch auch übernehmen, oder hast du etwas vor wo du das unbedingt benötigst?

    Mein Problem ist die variable Breite der Zeichen.
    Ich wäre für jeden Fingerzeig dankbar.

    Denk an deine Gesundheit und tu das nicht. Denk daran, dass du soetwas auch warten musst und es jedesmal eine Tortur sein wird, die neuen Strophen so zu erschaffen - und das ist nur ein Problem deines Standpunktes aus gesehen.

    Ein bisschen CSS und ein kleines Hintergrundbild können wie ich das sehe, ein Weg zum Seelenfrieden werden. Wenn du das nicht beherrscht, neige ich dir dazu zu raten, ein komplettes Bild dafür zu nutzen und es einfach einzubinden. Oder du beantwortest meine obige Frage und wir schauen was sinnvoll ist.

    1. Danke erst mal für alle Antworten.

      Bilder habe ich ein paar hundert als SVG-Grafik gezeichnet, und auch eingebunden.

      http://commons.wikimedia.org/w/index.php?title=Special%3AListFiles&limit=500&user=Mjchael

      Das Problem ist, dass man für jeden neuen Akkord, und für jede Skala neue Bilder zeichnen muss. Und ich habe eine gute Vorstellung davon, wie lange so etwas dauert.

      Gäbe es einige Akkorde, die mit einem UTF8-Zeichensatz geschrieben wurden, so muss man nur wenige Zeichen austauschen, und hätte sofort einen neuen Akkord.
      Und das als recht ansehnliche Grafik.
      Skalen für Gitarre könnten schnell aus vorgefertigten Bausteinen zusammenstellen werden, und einzelne Töne könnten leicht eingefärbt werden.
      Alles in allem wesentlich schneller als durch einen Grafik-Uploard. Denn bei einem Wikibooks-Upload kommt noch die ganze Arbeit mit der Registrierung der Datei hinzu.

      Gäbe es UTF8-Akkorde, könnte man diese ohne Probleme einfach und schnell kopieren und einfügen. Dazu benötigt man nur eine UTF8-fähige Homepage.

      Für Gitarrenforen wäre es eine enorme Erleichterung.

      Vergleicht selbst den Unterschied:

      ╓─█─┬─━─┬─━─┬ ||-Z-|---|---|-
      ╟─█─┼─━─┼─━─┼ ||-Z-|---|---|-
      ╟─█─┼─▆─┼─━─┼ ||-Z-|-M-|---|-
      ╟─█─┼─━─┼─▆─┼ ||-Z-|---|-K-|-
      ╟─█─┼─━─┼─▆─┼ ||-Z-|---|-R-|-
      ╙─█─┴─━─┴─━─┴ ||-Z-|---|---|-

      Würde ich zu den entsprechenden UTF8 Zeichen die passenden horizontalen Linien finden könnten die Grafiken noch besser aussehen.
      Die Grafiken könnten extrem leicht verkleinert werden. Eine ganze Zeile mit nur einem <tag> oder einem [BBCode].

      In Gitarrenforen würde diese Variante schnell Mode werden, und man könnte sich viele Diagramme mal eben schnell mit Copy und Past für seine Projekte verwenden, ohne dabei viel beachten zu müssen.

      Ein JavaScript, könnte mit wenigen Buttons und einigen Arrays ganz schnell komplette Akkorde, Skalen und Tabulaturen liefern, die deutlich besser aussehen, als die üblichen ASCII-Diagramme.

      Wenn keiner eine Hilfe weiß, muss ich wohl oder übel jedes Zeichen eine bestimmte Anzahl kopieren, dann der Größe nach sortieren, und dann die Pixel ausrechnen. Ich suche dazu schon einen JS-Code, um die Position eines bestimmten Buchstaben oder einer Grafik, die ich hinten anhänge, auf dem Bildschirm zu ermitteln.

      Die Idee kam mir, da ich mich noch an alte DOS-Programme erinnern kann, die komplette Noten mit dem ASCII-Zeichensatz erstellt haben.

      Gruß Mjchael

      1. Moin!

        Bilder habe ich ein paar hundert als SVG-Grafik gezeichnet, und auch eingebunden.

        http://commons.wikimedia.org/w/index.php?title=Special%3AListFiles&limit=500&user=Mjchael

        Das Problem ist, dass man für jeden neuen Akkord, und für jede Skala neue Bilder zeichnen muss. Und ich habe eine gute Vorstellung davon, wie lange so etwas dauert.

        Das heißt ja aber im Umkehrschluss, dass man die SVG-Grafiken mit einem Skript erzeugen kann, sofern man weiß, welcher Akkord wie angezeigt werden muss. Damit reduziert sich das Problem darauf, einen Webserver mit Skriptfähigkeit zu finden, dem man das SVG-Zeichnen beibringt, und man muss dann die Parameter des einzugebenden Grafiklinks kennen. Dürfte insgesamt kaum aufwendiger sein, als das mit den Zeichen.

        - Sven Rautenberg

        1. :o)) Man merkt, ihr seit alle reine Programmierer, und es scheint euch schwer zu Fallen in die Situation der Anwender von Foren zu versetzen.

          Bei SVG-Grafiken bleibt das Problem mit dem Upload. Und die ganze Arbeit bleibt letztlich an mir kleben. Ein UTF8-Akkorddiagramm kann von jedem User in Foren kopiert und eingefügt werden. Die notwendigen Zeichen, die man in einem Gitarrenbund auf einer Seite eingefügt werden dürfen, müssen nur irgendwo kopiert vorliegen. Und man kann sie ebenso leicht einfügen, wie die UTF8-Grafiken auf den sozialen Netzwerken.

          ▒▒▒▒▒▒█▓▓█▒██▓▓▓██▒█▓▓█
          ▒▒▒▒▒█▓▒▒▓█▓▓▓▓▓▓▓█▓▒▒▓█
          ▒▒▒▒▒█▓▒▒▓▓▓▓▓▓▓▓▓▓▓▒▒▓█
          ▒▒▒▒▒▒█▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓█
          ▒▒▒▒▒▒▒█▓▓▓▓▓▓▓▓▓▓▓▓▓█
          ▒▒▒▒▒▒▒█▓▓█▓▓▓▓▓▓█▓▓▓█
          ▒▒▒▒▒▒▒█▓▓██▓▓▓▓▓██▓▓█
          ▒▒▒▒▒▒█▓▓▓▓▒▒█▓█▒▒▓▓▓▓█
          ▒▒▒▒▒█▓▓▒▒▓▒▒███▒▒▓▒▒▓▓█
          ▒▒▒▒▒█▓▓▒▒▓▒▒▒█▒▒▒▓▒▒▓▓█
          ▒▒▒▒▒█▓▓▓▓▓▓▒▒▒▒▒▓▓▓▓▓▓█
          ▒▒▒▒▒▒█▓▓▓▓▓▓███▓▓▓▓▓▓█
          ▒▒▒▒▒▒▒█▓▓▓▓▓▓▓▓▓▓▓▓▓█
          ▒▒▒▒▒▒█▓▓▓▓▒▒▒▒▒▒▒▓▓▓▓█
          ▒▒▒▒▒█▓▓▓▓▒▒▒▒▒▒▒▒▒▓▓▓▓█
          ▒▒▒▒█▓▓▓█▓▒▒▒▒▒▒▒▒▒▓█▓▓▓█
          ▒▒██▓▓▓█▓▒▒▒██▒██▒▒▒▓█▓▓▓██
          ▒█▓▓▓▓█▓▒▒▒▒█▓█▓█▒▒▒▓█▓▓▓▓█
          █▓██▓▓█▓▒▒▒▒█▒▓▒█▒▒▒▒▓█▓▓██▓█
          █▓▓▓▓█▓▓▒▒▒▒█▓▒▓█▒▒▒▒▓▓█▓▓▓▓█
          ▒█▓▓▓█▓▓▒▒▒▒▒█▒█▒▒▒▒▒▓▓█▓▓▓█
          ▒▒████▓▓▒▒▒▒▒▒█▒▒▒▒▒▒▓▓████
          ▒▒▒▒▒█▓▓▓▒▒▒▒▒▒▒▒▒▒▒▓▓▓█
          ▒▒▒▒▒▒█▓▓▓▒▒▒▒▒▒▒▒▒▓▓▓█
          ▒▒▒▒▒▒█▓▓▓▓▒▒▒▒▒▒▒▓▓▓▓█
          ▒▒▒▒▒▒▒█▓▓▓▓▓█▓█▓▓▓▓▓█
          ▒▒▒▒▒▒▒▒█▓▓▓▓▓█▓▓▓▓▓█
          ▒▒▒▒▒████▓▓▓▓▓█▓▓▓▓▓████
          ▒▒▒▒█▓▓▓▓▓▓▓▓▓█▓▓▓▓▓▓▓▓▓

          Das kostet, wenn ein mal eine Hand voll Vorlagen zur Verfügung stehen, von den Membern der Foren keinerlei Programmierfähigkeiten. Nur ein wenig Copy&Past, genau so, wie sie es mit den ASCII-Tabulaturen machen.

          Das Zusammenstellen der Zeichen ist ein enormer Arbeitsaufwand.
          Daher frage ich ja hier die Profis um Rat.
          Der Umgang mit der Vorlage ist dagegen ein Kinderspiel.

          Als jahrelanger Forenuser weiß ich wovon ich rede.

          Gruß Mjchael

          1. Hallo,

            :o)) Man merkt, ihr seit alle reine Programmierer, und es scheint euch schwer zu Fallen in die Situation der Anwender von Foren zu versetzen.

            ich verstehe deine Kritik nicht ganz.

            Bei SVG-Grafiken bleibt das Problem mit dem Upload.

            Hast du Svens angedeuteten Ansatz wirklich verstanden? Er hat ja gerade _nicht_ vorgeschlagen, unzählige SVG-Grafiken irgendwo abzulegen, sondern ein Script (PHP, Perl, Java, whatever) zu schreiben, das diese Grafiken dynamisch erzeugt. Dieses Script wäre ja gerade _nicht_ einfach so für jeden kopierbar, sondern nur dessen Output.

            Ein UTF8-Akkorddiagramm kann von jedem User in Foren kopiert und eingefügt werden. Die notwendigen Zeichen, die man in einem Gitarrenbund auf einer Seite eingefügt werden dürfen, müssen nur irgendwo kopiert vorliegen. Und man kann sie ebenso leicht einfügen, wie die UTF8-Grafiken auf den sozialen Netzwerken.

            Das klingt jetzt eher wieder so, als würdest du die leichte Kopierbarkeit als Vorteil darstellen. Was willst du wirklich?

            Das Zusammenstellen der Zeichen ist ein enormer Arbeitsaufwand.

            Klar. Ein Aufwand, den man sich mit einem Script wesentlich vereinfachen kann.

            Als jahrelanger Forenuser weiß ich wovon ich rede.

            Hmm. Ich weiß nicht, was du damit sagen willst.

            Ciao,
             Martin

            --
            Chef:         Zum vierten Mal in dieser Woche erwische ich Sie nun schon beim Zuspätkommen. Was haben Sie dazu zu sagen?
            Angestellter: Dann muss heute Donnerstag sein.
            Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
            1. Skripte müssen in die Forensoftware eingebaut werden. Ich bin allerdings nicht Administrator in den Foren, sondern nur Moderator.

              UTF8-Zeichen müssen nirgendwo eingebunden werden, man benötigt kein Skript oder ähnliches. Weiterhin benötigt man keinerlei Programmierkenntnisse (so dass es auch die Member des Bordes leicht anwenden können).

              UTF8 Grafiken könnten so ohne administrativem Aufwand von einem Forum ins andere kopiert und modifiziert werden, oder in die Wikibooks eingefügt werden (wobei dort noch ein einfacher Syntax für Tabellen zur Verfügung stehen.) Man kann es sogar ohne Probleme in Word (etc.) einfügen, und der Speicherbedarf der Grafiken ist (im Vergleich zu SVG) minimal.

              Man braucht nur eine Software die UTF8-Zeichen unterstützt, und gegebenenfalls noch den passenden Font, der aber für jede Plattform kostenlos erhältlich ist, und von den meisten Systemen standardmäßig vorinstalliert ist.  Kein JavaScript, kein HTML, kein PHP. Es wäre, wenn es klappen würde, ein Arbeiten mit dem kleinsten gemeinsamen Nenner.

              Was meine Kritik angeht:
              Ich habe nach der Breite der UTF8-Zeichen gefragt.
              Mir schweben eine Reihe von Anwendungsmöglichkeiten vor, und ich sehe eine Reihe von Vorteile. Ob, und wie weit diese praktikabel sind, kann ich nur aufgrund meiner Erfahrung als Moderator in einem Gitarrenboard, und Autor auf den Wikibooks beurteilen.
              Diese Möglichkeit wird aber von vornherein zerredet, ohne der Durchführbarkeit auch nur den Ansatz einer Chance zu bieten. Es werden viele Lösungsvorschläge geliefert, die aber an dem Anwendungszweck der mir vorschwebt, vorbei gehen. Ich habe den Eindruck, mich für eine (wenn sie klappt) pfiffige Idee rechtfertigen zu müssen. Von daher die Kritik.
              Aber sie war nicht so böse gemeint, wie sie vielleicht bei einigen angekommen sein mag.

              Wie dem auch sei: Ich danke euch für die vielen Anregungen.

              Ich werde mich mit der Möglichkeit, SVG-Grafiken per JavaScript (oder PHP oder Java oder Flash) zu erstellen weiter auseinandersetzen, und wie ich diese in Bulletin Boards (phpBB) einbinden kann.

              Doch die eingangs gestellte Frage nach der Breite der UTF8-Zeichen werde ich an anderer Stelle oder in eigener Regie nachgehen.

              Gruß Mjchael

              1. Moin Mjchael,

                Doch die eingangs gestellte Frage nach der Breite der UTF8-Zeichen werde ich an anderer Stelle oder in eigener Regie nachgehen.

                Wurde doch schon beantwortet: die Breite von Zeichen ist abhängig von der Schriftart. Punkt.

                Was du suchst, ist eine Monospace-Schrift.

                LG,
                 CK

                1. Tschuldigung, dass ich erst jetzt antworte. Hatte zu tun.

                  Danke für die Hilfe.

                  Die Schrift ist:
                  font-family: Courier,'Courier New',sans-serif;

                  Ich kenne diese Schriftart eigentlich nur als nichtproportionale Schriftart. Bei den UTF-8-Schriftzeichen wird es auf meinem Rechner proportional (also mit unterschiedlicher Breite) angezeigt.

                  Ich vermute, dass ich eine freie nichtproportionale Schriftart (also auch bei den UTF8-Schriftzeichen nicht-proportional) finden muss, die ich zur Not per CSS in die Homepage einbinden lassen kann.

                  @font-face { font-family:MyMonospaceFont; src:url(MyMonospaceFont.eot), url(MyMonospaceFont.pfr); }

                  Das könnte der entscheidende Hinweis gewesen sein. Sollte das vorher schon einer gesagt haben, und ich es nur überlesen haben, bitte ich denjenigen um Entschuldigung. Ich habe halt daran gehakt, dass die Schriftart ja in meinem Verständnis nichtproportional definiert war. Da lag ich wohl im Irrtum.

                  Gruß Mjchael

                  1. Hallo,

                    font-family: Courier,'Courier New',sans-serif;

                    okay, also eine Festbreitenschrift.

                    Ich kenne diese Schriftart eigentlich nur als nichtproportionale Schriftart. Bei den UTF-8-Schriftzeichen wird es auf meinem Rechner proportional (also mit unterschiedlicher Breite) angezeigt.

                    Nochmal: Es gibt keine UTF-8-Zeichen. UTF-8 ist lediglich eine Codierung, also eine Vorschrift, wie die Nummer des Zeichens (der Codepoint) in Bytes abgebildet wird. Mit der Darstellung hat das absolut gar nichts zu tun.

                    Es kann allerdings sein, dass die auf deinem System vorhandene Courier oder Courier New (bzw. die vom System ausgewählte Ersatzschriftart) die entsprechenden Zeichen nicht enthält. Dann versucht der Browser, diese Zeichen in einer anderen vorhandenen Schriftart mit ähnlichen Eigenschaften zu finden, wobei "ähnlich" durchaus leicht von der ursprünglich gewünschten Schrift abweichen kann.

                    So long,
                     Martin

                    --
                    "Mutti, hier steht, das Theater sucht Statisten. Was sind Statisten?" - "Das sind Leute, die nur rumstehen und nichts zu sagen haben." - "So wie Papa?"
                    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
                    1. Hi,

                      font-family: Courier,'Courier New',sans-serif;
                      okay, also eine Festbreitenschrift.

                      vorausgesetzt, daß Courier oder Courier New vorhanden ist. Ansonsten wird anstelle der serifierten Festbreitenschrift eine nicht-serifierte Nicht-Festbreitenschrift genommen.
                      Warum hier nicht monospace als generische Schrift angegeben wurde, erschließt sich mir nicht.

                      cu,
                      Andreas

                      --
                      Warum nennt sich Andreas hier MudGuard?
                      O o ostern ...
                      Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
                      1. Hallo,

                        font-family: Courier,'Courier New',sans-serif;
                        okay, also eine Festbreitenschrift.
                        vorausgesetzt, daß Courier oder Courier New vorhanden ist. Ansonsten wird anstelle der serifierten Festbreitenschrift eine nicht-serifierte Nicht-Festbreitenschrift genommen.

                        autsch, ja - der Widerspruch ist mir gar nicht aufgefallen.

                        Warum hier nicht monospace als generische Schrift angegeben wurde, erschließt sich mir nicht.

                        Ja klar, das wäre hier das einzig Sinnvolle.

                        Ciao,
                         Martin

                        --
                        Schildkröten können mehr über den Weg berichten als Hasen.
                        Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
                  2. @@Mjchael:

                    nuqneH

                    Ich vermute, dass ich eine freie nichtproportionale Schriftart (also auch bei den UTF8-Schriftzeichen nicht-proportional) finden muss, die ich zur Not per CSS in die Homepage einbinden lassen kann. […]
                    Das könnte der entscheidende Hinweis gewesen sein. Sollte das vorher schon einer gesagt haben, und ich es nur überlesen haben, bitte ich denjenigen um Entschuldigung.

                    Ja, den Hinweis auf eine dicktengleiche Schrift gab ich in meiner ersten Antwort.

                    Den Hinweis auf Webfonts und eine solche zu erstellen (falls es keine passende fertige gibt) in einer weiteren Antwort.

                    Aber das Ignorieren von Antworten scheint bei dir System zu haben, du redest immer noch von Dingen, die es nicht gibt („UTF8-Schriftzeichen“).

                    Qapla'

                    --
                    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
              2. Ich gäbe etwas darum ich würde überhaupt erstmal dein Darstellungsproblem verstehen.

                Dazu eine Frage: Ist dir klar, dass UTF-8 (eine Schriftcodierung) und Monospaceschriften (eine Schriftenfamilie) *keinen* Widerspruch darstellen?

                Gruß

                Michael

                1. Dazu eine Frage: Ist dir klar, dass UTF-8 (eine Schriftcodierung) und Monospaceschriften (eine Schriftenfamilie) *keinen* Widerspruch darstellen?

                  Um es noch deutlicher zu sagen: Du nutzt UTF-8 als Schriftcodierung und wählst eine Monospaceschrift. Und dein Größenproblem löst sich dahingehend auf, dass definitionsgemäß alle Zeichen gleichgroß sind.

                  Gruß

                  Michael

          2. Om nah hoo pez nyeetz, Mjchael!

            Du könntest immer noch, wie bereits von Gunnar vorgeschlagen, auf Tabellen ausweichen. Du musst lediglich dafür sorgen, dass eine Tabellenzelle eine gewisse Mindestbreite hat. Das Zeichen positionierst du in der Mitte. Wenn die Seiten keine Hintergrundgrafik werden sollen, damit sie beim Kopieren auch dabei sind, könnte folgende (ungetestete) Idee zielführend sein:

            HTML
            <td><span>█</span></td>

            CSS
            td {border: 0 none; text-align: center; width: 42px; overflow: hidden;}

            td span::before, td span::after {content: "─────";}

            Matthias

            --
            1/z ist kein Blatt Papier.

            1. Om nah hoo pez nyeetz, Matthias Apsel!

              Wenn die Seiten keine Hintergrundgrafik werden sollen,

              Saiten!

              Matthias

              --
              1/z ist kein Blatt Papier.

      2. @@Mjchael:

        nuqneH

        Gäbe es einige Akkorde, die mit einem UTF8-Zeichensatz geschrieben wurden

        Nochmal: Es gibt keinen UTF-8-Zeichensatz. Mache dir den Unterschied zwischen Zeichensatz (bspw. Unicode) und Zeichencodierung (bspw. UTF-8) klar!

        Skalen für Gitarre könnten schnell aus vorgefertigten Bausteinen zusammenstellen werden, und einzelne Töne könnten leicht eingefärbt werden.

        Erstelle dir die Bausteine als SVG und dann daraus einen Webfont. (yatil hat in seinem Artikel ein Tool dafür verlinkt.) Dann kannst du sie nach Belieben zusammensetzen und auch färben.

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        1. Tach!

          Gäbe es einige Akkorde, die mit einem UTF8-Zeichensatz geschrieben wurden

          Nochmal: Es gibt keinen UTF-8-Zeichensatz. Mache dir den Unterschied zwischen Zeichensatz (bspw. Unicode) und Zeichencodierung (bspw. UTF-8) klar!

          Für sein Problem spielt vielmehr eine Rolle, dass er den Unterschied zwischen Zeichen und deren Darstellung nicht beachtet. Selbst wenn sämtliche musikalische Zeichen in einer für sein Anliegen brauchbaren Form in einem Zeichensatz vorhanden wären, steht dazu ja nicht zwangsläufig unumgehbar festgeschrieben, dass diese stets mit einer definierten Höhe und Breite auszugeben sind. Zwischen Zeichen und ihrer Darstellung steht noch der Font, der die Anweisungen zum Zeichnen der Zeichen enthält.

          Und dann bezweifle ich doch ganz stark, dass er mit reinen Textsymbolen zum Ziele kommt. Texte sind üblicherweise in ihrer Zeile "gefangen". Noten werden in ihrem System über mehrere Zeilen dargestellt (nicht alle, ich weiß). Man kann da vermutlich nur den Hintergrund mit einem Zeilenbild versehen und dann die Noten einzeln und absolut drauf positionieren, was einen Conteinar (span/div) erfordert. Dann kann man es auch gleich mit weniger Auswand zeichnen.

          Vergleicht selbst den Unterschied:
          ╓─█─┬─━─┬─━─┬ ||-Z-|---|---|-
          ╟─█─┼─━─┼─━─┼ ||-Z-|---|---|-
          ╟─█─┼─▆─┼─━─┼ ||-Z-|-M-|---|-
          ╟─█─┼─━─┼─▆─┼ ||-Z-|---|-K-|-
          ╟─█─┼─━─┼─▆─┼ ||-Z-|---|-R-|-
          ╙─█─┴─━─┴─━─┴ ||-Z-|---|---|-

          Mach ich, erst Firefox dann Chrome:

          Firefox

          Chrome

          dedlfix.

  2. @@Mjchael:

    nuqneH

    Ich beabsichtige Akkordbilder mit UTF8-Zeichen zu erstellen.

    Das scheitert schon daran, dass es keine UTF-8-Zeichen gibt. (Zeichensatz vs. Zeichencodierung. Zeichen gibt es in Zeichensätzen. Unicode ist einer, UTF-8 ist keiner.)

    Ich habe schon sehr viele Tabellen und Homepages durchforstet, aber leider habe ich keine Informationen über die Zeichenbreite gefunden.

    In dicktengleichen (Monoscpace-)Schriften ist sie gleich.

    Ich wäre für jeden Fingerzeig dankbar.

    Wie wär’s mit dem Griffbrett als Tabelle? Zeichen in Zellen mittig positioniert, Saiten (horizontale Linien) als Hintergrundbild (kann auch per Gradient beschrieben werden).

    Oder eben für jeden Akkord ein Bild generieren. Kann auch per Script geschehen, dem du als Parameter den Fingersatz übergibst, bspw. (3, 2, 3, 0, 0, -1) für D.

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. @@Gunnar Bittersmann:

      nuqneH

      bspw. (3, 2, 3, 0, 0, -1) für D.

      (2, 3, 2, 0, 0, -1). Ich sollte mal wieder meine Klampfe zur Hand nehmen.

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    2. hi,

      Das scheitert schon daran, dass es keine UTF-8-Zeichen gibt.

      Schöne Seite, bau da mal noch eine if-Schleife ein ;)

      Hotti

  3. Hi,

    wenn dein Problem darin besteht, dass du Kontrolle darüber benötigst wie Zeichen in mehreren aufeinanderfolgenden Zeilen zueinander stehen (konkret: dass sie genau untereinander stehen), dann wage ich die Behauptung dass dies nur mit Monospace Schriften möglich ist.
    Nicht dass es nicht vielleicht doch möglich wäre mit Proportionalschriften Buchstaben genau untereinader zu platzieren, das ginge aber nur um den Preis, dass der Inhalt der Folgezeile vom Inhalt der darüberliegenden Zeile abhängt. Allein die Vorstellung erzeugt bereits Gehirnsausen.

  4. Hallo,

    Oder hat sonst schon jemand versucht Akkord- und Skalenbilder mit UTF8-Zeichen zu erstellen, und hätte einen Link für mich?

    Die Leute von Lilypond haben sowas bereits gemacht. Dort nennt sich das Fretboard, bzw. fret diagram.