Wie umrahmt man Zeichen?

[Linuchs]

Moin,

ich habe in Erinnerung, dass man Zeichen umrahmen kann. Etwa, wenn sich das Zeichen kaum vom Hintergrund (vorgegebene Boomwhacker-Farben) abhebt:

Mir fehlt das Stichwort für die Recherche. border oder shadow scheint es nicht zu sein.

Oder brauche ich da entspr. Schriftfonts?

Gruß, Linuchs

[Linuchs]

das Stichwort outline ist mir eingallen, habe einen Font heruntergeladen:

Ich möchte weiße Buchstaben mit schwarzer Umrandung und nicht weiße Umrandungen.

[Auge]

Hallo

ich habe in Erinnerung, dass man Zeichen umrahmen kann. Etwa, wenn sich das Zeichen kaum vom Hintergrund (vorgegebene Boomwhacker-Farben) abhebt:

Mir fehlt das Stichwort für die Recherche. border oder shadow scheint es nicht zu sein.

Man kann das mit text-shadow machen, es gibt aber auch noch text-stroke. Die Browserunterstützung ist recht groß, auch wenn man wohl einen Präfix braucht.

Oder brauche ich da entspr. Schriftfonts?

Nöö.

[edit]: Hier noch ein Artikel (englisch, von 2010), der die Möglichkeiten beschreibt.

Tschö, Auge

[Rolf B]

Hallo Auge,

text-shadow ist, gerade bei höheren Schriftgrößen, mies. Im Gegensatz zu box-shadow kann man keinen Spread-Radius angeben, nur einen Blur-Radius. Bei großen Zeichen braucht man einen größeren Blur-Radius, damit man davon etwas sieht, und dann ist der zu schnell verblurred.

Die Alternative ist ein vierfacher text-shadow, jeweils ein paar Pixel nach links oben, rechts oben, links unten und rechts unten versetzt, aber TOLL sieht das auch nicht aus.

Bei -webkit-text-stroke gehen allerdings filigranere Font-Anteile verloren. Gerade bei Zeichen wie ♯ oder ♭ sieht das echt doof aus. Für die ist die text-shadow-Lösung besser, weil der Schatten komplett hinter dem Zeichen bleibt.

Eine andere Lösung könnte noch SVG sein - ein kleines SVG für jeden Boombox-Kreis.

Rolf

[Auge]

Hallo

text-shadow ist, gerade bei höheren Schriftgrößen, mies. Im Gegensatz zu box-shadow kann man keinen Spread-Radius angeben, nur einen Blur-Radius. Bei großen Zeichen braucht man einen größeren Blur-Radius, damit man davon etwas sieht, und dann ist der zu schnell verblurred. Die Alternative ist ein vierfacher text-shadow, …

Das ist auch, was der im Edit meines Vorpostings verlinkte Artikel von Chris Coyier im Abschnitt Simulation vorschlägt.

h1 {
  color: white;
  text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
}

Bei -webkit-text-stroke gehen allerdings filigranere Font-Anteile verloren. Gerade bei Zeichen wie ♯ oder ♭ sieht das echt doof aus.

Je filigraner die Zeichen sind, … Das könnte auch für die Lattenzäune a.k.a. Sharps a.k.a. WasWeißIchNoch in Linuchs' Screenshot zutreffen.

Eine andere Lösung könnte noch SVG sein - ein kleines SVG für jeden Boombox-Kreis.

TIL: Boombox

Tschö, Auge

[Linuchs]

Hallo Auge,

danke für deine Lösung, die sieht gut aus:

Gruß, Linuchs

[Auge]

Hallo

danke für deine Lösung, die sieht gut aus:

Bitteschön.

Welchen Ansatz hast du genutzt?

Tschö, Auge

[Linuchs]

Welchen Ansatz hast du genutzt?

Nur für die weißen Buchstaben:

  .aufkleber > div.weiss {
    text-shadow:
    -1px -1px 0 #000,  html
     1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
  }

  <p>Aufkleber für die Pfeifen in Boomwhacker-Farben:</p>
  <div class="aufkleber">
      <div class="weiss bg_g"        >G</div>
      <div class="weiss bg_a"        >A</div>
      <div class="      bg_ais c_blk">A#</div>
      <div class="weiss bg_b"        >B</div>

[Rolf B]

Hallo Linuchs,

hoffentlich benutzt Du D♯ (♯) und nicht D#.

Rolf

[nix]

Ein (das?) große Unicode-Problem: es sind so viele „Dingse“ drin. Bei den meisten Menschen (und das dann IMO meist unbemerkt – ich gehöre auch dazu!) gehört die Mehrheit davon in die Kategorien „unbekannt“ und „für was das wohl gut ist?“.

[Gunnar Bittersmann]

@@nix

Ein (das?) große Unicode-Problem: es sind so viele „Dingse“ drin. Bei den meisten Menschen (und das dann IMO meist unbemerkt – ich gehöre auch dazu!) gehört die Mehrheit davon in die Kategorien „unbekannt“ und „für was das wohl gut ist?“.

Da hast du wohl recht. Indien und China stellen zusammen über ein Drittel der Weltbevölkerung. Mit Russland, dem arabischen Raum, Japan und Korea kommt man auf über 50%. Für die meisten Erdbewohner stellt sich da schon die Frage: lateinische Buchstaben – für was^[1] das wohl gut ist?

Kwakoni Yiquan

---

1. Ich habe die Wendung von dir so übernommen. In vernünftigem Deutsch heißt es „wofür“. ↩︎

[nix]

Und was benutzen die Meisten? 😏

[Gunnar Bittersmann]

@@Linuchs

ich habe in Erinnerung, dass man Zeichen umrahmen kann. Etwa, wenn sich das Zeichen kaum vom Hintergrund (vorgegebene Boomwhacker-Farben) abhebt

Im Gegensatz zu box-shadow gibt es bei text-shadow keinen spread radius

Man kann das Zeichen aber geringfügig(!) mit blur radius vom Hintergrund abheben; siehe die ersten beiden Beispiele im Codepen.

Und dann gibt’s da -webkit-text-stroke – anders als der Name es vermuten lässt auch in anderen Browsern implementiert; siehe drittes Beispiel.

Aber warum verwendest du nicht Text-Hintergrund-Farbkombinationen mit ausreichendem Farbkontrast? D.h. für jede Klasse (jeden Ton/Akkord) color und background-color angeben?

Kwakoni Yiquan

[nix]

Nur ein paar flüchtige Gedanken dazu:

Vor allem würde ich für „richtige Buchstaben mit Grafik drin“ plädieren. Und wenn’s nur wäre, weil eine sich ändernde Schriftart (ob nun als Design-Entscheidung oder weil man seitens der Clients da eigene Vorstellungen hat) einfach so mit einzieht. Und viel Gestaltungsspielraum ist einfach so mit eingepackt.

Und sonst?

• --webkit-text-stroke (alias --webkit-text-ccolor und --webkit-text-width˚) hätte nebenan noch ein Geschwisterchen namens -webkit-text-fill-color vorzuweisen.
• wäre was mit filter: … zu reißen? blur, contrast, drop-shadow, saturate und invert?

[Linuchs]

danke für die Anregung.

[Gunnar Bittersmann]

@@Linuchs

BTW, das könnte interessant für dich sein:

Savva Terentyev teilt mit uns seine Einblicke in die Geschichte der Musiktypografie und erzählt uns, worauf zu achten ist, wenn man gut Noten setzen will und worauf Schriftgestalter·innen ihr Augenmerk legen können, um passende Noten für Textschriften zu gestalten.

Typostammtisch Berlin am 29.02.

Kwakoni Yiquan

[Linuchs]

Hallo Gunnar,

passende Noten für Textschriften

Hmm ... bedeutet das, dass ich Noten auf HTML-Seiten zeigen könnte ohne Notationsprogramm? Das wäre sehr hilfreich für meine Liedtexte, damit zumindest die ersten Takte des Liedes zu sehen sind.

Ich arbeite mit MuseScore. Bisher hauptsächlich, um mp3 Dateien zu erzeugen, die als audio-Tags mit dem Mischpult gesteuert werden können.

Karaoke-Funktion: Das erste Audio oder Video (Master) steuert die Textanzeige, die aktuelle Textpassage wird per Hintergrund-Farbe hervorgehoben. Andersrum kann man auf einen Text klicken und der Song läuft ab dort.

Gruß, Linuchs

[Gunnar Bittersmann]

@@Linuchs

Hallo Gunnar,

passende Noten für Textschriften

Hmm ... bedeutet das, dass ich Noten auf HTML-Seiten zeigen könnte ohne Notationsprogramm?

Nein, ich denke, da geht’s um Druck. Farbe auf totes Holz – die Älteren werden sich erinnern.

Kwakoni Yiquan

[nix]

Also wenn’s edel werden soll, dann hadert man an der Stelle, druckt lieber auf Lumpen!

Und sonst? DTP hat’s vorgemacht und das, was man „im CSS“ mittlerweile alles rund um Schrift(art)en findet, spricht nicht gerade dagegen, daß man da, was die grundlegende Gestaltung angeht, keine größeren Unterschiede macht. Ergo: die interessante Schnittmenge bzgl. der Thematik dürfte nicht gerade klein sein.

[nix]

… bedeutet das, dass ich Noten auf HTML-Seiten zeigen könnte ohne Notationsprogramm …

Tja, also … man könnte die da nötigen Striche, Punkte usw. natürlich auch malen lassen. So wie die vorgeschlagenen umkreisten Buchstaben auch. Aber das ist hier wohl nicht gemeint.

Also einfach mal schnell(!) im Unicode gestöbert. Aber viel mehr als 🎶, 🎵, 🎼, ♩, ♪, ♫ und ♬ ist da wohl nicht drin. Und da die Darstellung auch sehr davon abhängt, mit welcher Schriftart (usw.) diese erfolgt, ist das damit erzielte Vergnügen wohl kein großes.

Also doch ein Notationsprogramm? Das hängt anscheinend sehr davon ab, was mit den damit erstellten Ergebnissen geschehen, wie die angeboten werden sollen. Als schlichte Bilder (an der Stelle zähle ich jetzt einfach auch PDF dazu)? Als Sammlung irgendwie positionierter Noten- und ähnlicher Bilder? Ja womöglich gar als SVG-Paket? Da müßte man erst mal wissen, was solche Software, vor allem bzgl. der Export-Optionen, anzibieten hat. Und wie die dann in die eigene Umgebung rein passen könnte.

[Matthias Scharwies]

Servus!

Moin,

ich habe in Erinnerung, dass man Zeichen umrahmen kann. Etwa, wenn sich das Zeichen kaum vom Hintergrund (vorgegebene Boomwhacker-Farben) abhebt:

Mir fehlt das Stichwort für die Recherche. border oder shadow scheint es nicht zu sein.

Ich habe auf Mastodon einen anderen Ansatz gefunden. Dort wird die Hintergrundfabe durch einen CSS-Filter gejagt, der dann eine entsprechend dunkle oder helle Schriftfarbe mit hohem Kontrast ausspuckt.

Hier ist das Boomwacker-Beispiel:

SVG/Tutorials/Filter/Anwendung_in_CSS#Automatisch_kontrastreiche_Schriftfarbe

ToDo: Drunter das ganze als Noten.

Herzliche Grüße

Matthias Scharwies

[Linuchs]

Hallo Matthias,

Hier ist das Boomwacker-Beispiel:

Stark, was css so bietet ...

Die weißen Buchstaben stehen für die weißen Tasten, die schwarzen für die schwarzen:

Das Instrument nenne ich „Mundorgel“, per Schlauch kann ich Luft in die Löcher blasen. Manche Pfeifen sind doppelt und dreifach, dafür fehlen zwei oder drei Töne.

Hat jemand einen Tipp, wie die Kreise besser an den Zinnpfeifen haften?

Hatte sie zuerst mit Tapetenkleister angeklebt. Einmal scharf hingucken und sie fielen ab.

Nun habe ich auf Papier (100g) oben Klebefilm (gegen Schmutz) und unten doppelseitigen Klebefilm, aber sie schmiegen sich nicht an die Pfeifen.

Gruß, Linuchs

[Rolf B]

Hallo Linuchs,

Eine Gewindestange anlöten, die Karte draufspießen und mit einer Mutter sichern?

Die Pfeife in Kartengröße leicht anschmirgeln, UHU Metall auftragen, und Karte gut anpressen? Pattex Repair Extreme ginge sicher auch.

An linker und rechter Kartenseite ein dünnes Loch durch Karte und Pfeife bohren, einen passenden Hohlraumdübel einsetzen und die Karte mit einem Schräubchen befestigen?

Ahem...

Die Pfeife großzügig mit Tesafilm (am besten die Paketversion) umwickeln und die Karte dann mit doppelseitigem Klebeband an der Tesaschicht festmachen. Es gibt auch metallgraues Panzertape, hat Aldi regelmäßig im Angebot, das fällt vielleicht weniger auf. Oder du könntest gleich das Tesa um Karte UND Pfeife wickeln.

Spaß beiseite -

aber sie schmiegen sich nicht an die Pfeifen.

Ich würde:

• die Karte stärker als nötig vorformen, z.B. mit einem Besenstiel oder Staubsaugerrohr. Und zwar bevor Klebeband draufkommt. Eventuell könnte es auch helfen, die Karte aus 2 dünneren Schichten zu machen und die Schichten auf einem Rundstab zusammenzukleben. Dadurch hält die Form, sie könnte nur ggf. zu gut halten…
• doppelseitiges Klebeband auf die Rückseite der Karte kleben, so dass die komplette Fläche bedeckt ist (und den Überstand abschneiden)
• und dann auf die Pfeife kleben.

Wie sauber muss sich das Werk nachher entfernen lassen? Wenn gar nicht, könnte die UHU/Pattex-Idee immer noch brauchbar sein. Bis zu dem Tag, wo Du das Ding vererbst und der Erbe ein Vermögen für die Restaurierung der besudelten Pfeifen raushauen muss 😜

Rolf

[Linuchs]

Hallo Rolf,

Wie sauber muss sich das Werk nachher entfernen lassen?

Bei den meisten Sachen achte ich darauf, dass ihnen kein Leid geschieht. Alte Restaurator-Weisheit.

Gruß, Linuchs

[nix]

Dann solltest Du nicht zuletzt auf die verwendeten Materialien achten! So manches Zinnteller ist schon von Wänden gefallen, weil sich die Materialien der Nägel einfach so und in aller Gemütlichkeit (das kann schon mal Jahre dauern) langsam durchs Zinn gefressen haben!

(Mehr kann ich dazu aber auch nicht sagen, das ist nur „peripheres Wissen“.)

[Linuchs]

langsam durchs Zinn gefressen haben!

Habe mich bemüht (nicht erfolgreich „er hat sich stets bemüht ...“), eine Kirchenorgel aus der Nähe zu begutachten.

Aus Videos und Fotos vermute ich, dass die nur mit Holz in Berührung kommen, das ist bei mir auch so. Mal schauen, wie das in 200 Jahren aussieht.

Mit dem Erbe könnte ich wohl eine Prüfung alle 100 Jahre verfügen. Nur die Rückmeldung ist problematisch, wie mailt man an die Hölle?

[Rolf B]

Hallo Linuchs,

Wie mailt man an die Hölle?

Dazu muss sich der Prüfbeauftragte an ein Medium seines Vertrauens wenden. Eine kleine Seance als Rückmeldekanal ist doch wohl nicht zu viel verlangt.

Du kannst Dich natürlich auch derart an diese Orgel binden, dass deine Seele daran kleben bleibt, dann kannst Du regelmäßig spuken und Dich überzeugen, dass geprüft wurde. Wenn nicht, heulst Du in den Pfeifen so lange rum, bis dein Wille erfüllt wurde.

Rolf

[Gunnar Bittersmann]

@@Linuchs

Hast du ’nen Leierkasten auseinandergenommen?

Das Instrument nenne ich „Mundorgel“, per Schlauch kann ich Luft in die Löcher blasen.

Sowas in der Art habe ich ohne Schlauch. Passt in die Hosentasche. Das Instrument nenne ich „Mundharmonika“.^[1] 🤪

Kwakoni Yiquan

---

1. Ja, mir ist bewusst, dass eine Mundi eher mit ’nem Akkordeon verwandt ist als mit ’nem Leierkasten. ↩︎

[Linuchs]

Hast du ’nen Leierkasten auseinandergenommen?

Nee, vor einigen Jahren im Web einzelne Pfeifen als Wandschmuck entdeckt und mir gedacht: Sieht hübsch aus, muss aber noch einen Zusatznutzen haben.

Idee: So einen „Wandschmuck“ mit Midi anzusteuern. Da habe ich von einer aufgegebenen Kirchenorgel den größten zusammenhängenenden Block gekauft.

Lag ein paar Jahre im Karton, nun hängt es an der Wand. Mal schauen, ob und wann ich den nächsten Schritt mache und die untere Leiste durch einen Windkanal ersetze. Ob wohl mit einem PC-Lüfter genug Wind erzeugt werden kann? Viele offene Fragen.

Gruß, Linuchs

[MudGuard]

Hi,

Hat jemand einen Tipp, wie die Kreise besser an den Zinnpfeifen haften?

indem Du sie unten vor die Pfeifen auf das Holz klebst …

cu,
Andreas a/k/a MudGuard

[Linuchs]

indem Du sie unten vor die Pfeifen auf das Holz klebst …

Ja, ist eine Idee. Da sie lose im Gestell stehen, macht es aber Sinn, sie zu markieren. Auf der Rückseite hab ich sie mit Filzstift durchnummeriert.

Übrigens kann ich auch mit einer Pfeife ein einfaches Liedchen spielen. Verschiedene Töne erklingen durch Eintauchen in Wasser. Je kleiner die Luftsäule, desto höher der Ton.

Und dann könnte ich ein paar Pfeifen mitnehmen in einen Kindergarten und die Melodie mit farbigen Karten dirigieren. Deshalb die Anlehnung an Boomwhacker.

Auch ein Glockenspiel könnte ich farbig markieren, ein kleines Orchester gründen.

Gruß, Linuchs