Mehrfach-Konturtexteffekte in CSS

• CSS text-stroke akzeptiert nur einen einzelnen Wert, aber wenn man denselben Buchstaben in mehreren Ebenen übereinanderlegt und für jede Ebene Konturstärke und Farbe unterschiedlich festlegt, lässt sich ein retroartiger Mehrfach-Konturtexteffekt erzeugen
• Mit dem Texteffekt aus Graphic Japan : from woodblock and zen to manga and kawaii als Referenz ergab sich ein ähnlicheres Resultat, als für mehrere Elemente unterschiedliche text-stroke-width-Werte gesetzt wurden
• Durch die Kombination von text-stroke-width, text-stroke-color und z-index pro Ebene lassen sich Reihenfolge und Farbe der Konturen steuern, während die ursprüngliche Buchstabenform auch bei größerer Stärke erhalten bleibt
• Da das Rendering je nach Browser unterschiedlich ausfällt, wirkt Firefox glatter als Chrome und Safari; setzt man mehrere Zeichen in eine Zeile, verschmelzen ihre Formen miteinander
• Das Ergebnis hängt stark von der gewählten Schriftart ab, und bei großer font-size kann Flimmern auftreten; für Experimente oder die Bildgenerierung mit css-doodle ist das brauchbar, für den Produktionseinsatz aber ungeeignet

---

Implementierungsansatz

• Derselbe Buchstabe wird in mehreren Ebenen übereinandergelegt und jede Ebene erhält eine andere text-stroke-width, um einen Texteffekt zu erzeugen, der näher an dem in Graphic Japan : from woodblock and zen to manga and kawaii gezeigten liegt

-webkit-text-stroke-color: @pn(--c, #f4e1e8);
-webkit-text-stroke-width: $em(.08n+.02(1-(-1)^n));

• Gibt man jeder Ebene eine andere Farbe und legt sie in der gewünschten Reihenfolge übereinander, lassen sich Farbe und Reihenfolge der Konturen steuern

-webkit-text-stroke-color: @pn(#f4e1e8, #cc0d55);
-webkit-text-stroke-width: @i(*3px);

Rendering und Einschränkungen

• Firefox bietet ein glatteres Rendering als Chrome und Safari
• Setzt man mehrere Zeichen in eine Zeile, verschmelzen ihre Formen miteinander

@content: '秋收冬藏';

• Um schnell mit verschiedenen Schriftarten zu experimentieren, wurde die Funktion @google-font hinzugefügt, damit Schriften schneller geladen werden

font-family: @google-font(Matemasie);
@content: 'b';

font-family: @google-font(Tangerine);
@content: 'Love';

font-family: @google-font('Cherry Bomb One');
@content: '+';

• Die Performance ist nicht so gut wie bei CSS-Filtern; besonders mit größerer font-size kann Flimmern sichtbar werden
• Zusätzliche Beispiele wurden mit css-doodle erzeugt; das CodePen des ersten Beispiels ist unter https://codepen.io/yuanchuan/pen/ogzarGo verfügbar

[GN⁺]

Hacker-News-Kommentare

• Dieser Beitrag stammt vom Autor von css-doodle und wurde mit css-doodle erstellt. Diese Web-Komponente erlaubt es, die im Blog verwendete abgewandelte CSS-Syntax direkt in HTML einzubetten.
  Ein Beispiel sieht so aus:
  @grid: 15 / 90%;
border-radius: 50%;
background: hsl(@t(/20), 70%, 60%);
scale: sin(@atan2(@dx, @dy) + @ts);
  Abgesehen vom Laden der Komponentendefinition wird kein JavaScript benötigt, und es funktioniert in normalem HTML, Markdown, Frameworks usw.
  https://css-doodle.com/

  • Danke für die Erklärung. Seit ich 2018 aus der Frontend-Arbeit ausgestiegen bin, habe ich fast keine Ahnung mehr, was CSS inzwischen alles kann.
    Ein großer Teil des CSS auf dieser Seite sieht für mich wie kryptischer Code aus. In einer Zeit vieler standardisierter Stile applausiere ich dem Autor für etwas Neues und Cooles

• Ich frage mich, warum die CSS-Rendering-Engine von Firefox offenbar die weichere Darstellung bevorzugt. Die Implementierung wirkt dramatisch anders, aber vielleicht sieht es nur so aus, weil es sich um einen Grenzfall beim Rendering handelt

  • Stroke-Expansion ist ein komplexes Thema, und es gibt nicht nur ein einziges vernünftiges Ergebnis; subjektive Vorlieben, viele Grenzfälle und falsche Antworten spielen alle mit hinein.
    Firefox hat sich dafür entschieden, an allen Punkten anhand der Distanz zu erweitern; das ist eine vernünftige Antwort und vermutlich die allgemeinste Methode. Deshalb werden spitze Cusps zu Kurven erweitert.
    Andere Browser haben sich entschieden, die Cusps beizubehalten; auch das kann vernünftig sein und ist rechnerisch wohl deutlich günstiger. Wenn man jedoch stärker erweitert als die Merkmalsgröße, also den Abstand zwischen den Knoten, entstehen viele degenerierte Fälle, sodass es etwa beim vierten roten Ring klar falsch aussieht.
    box-shadow ist ein weiterer Fall, in dem eine Erweiterung stattfindet. Das ist der vierte Längenwert, die spread distance. Wenn die Ecke ein Cusp ist, ist auch die Schattenecke ein Cusp; ist sie rund, wird auch die Schattenecke rund. Eine hilfreiche Abbildung gibt es unter https://drafts.csswg.org/css-backgrounds/#shadow-shape.
    Mit einem kleinen Trick kann man 0.1px border-radius setzen; dann sieht die Box weiterhin quadratisch aus, aber der erweiterte Schatten wird gekrümmt. Das ist manchmal nützlich. Zurück zum ursprünglichen Beitrag: Wenn man statt Cusp-Knoten eine Schriftart mit sehr feinen Kurven verwendet, würden Chromium/Safari wohl näher an Firefox heranrücken
  • Den Rundungseffekt von Firefox mag ich nicht vollständig, aber die Chrome-Interpretation erzeugt falsche spitze Auswüchse, sodass sie sich einfach falsch anfühlt.
    Intuitiv würde ich erwarten, dass sich eine sternförmige Kontur eher einem gewöhnlichen Hexagon annähert, aber kein Browser schafft das wirklich
  • miter join ist Safari, round join ist eher Chrome
  • Firefox sieht nach SDF aus. Es wirkt wie distanzbasiertes Rendering zur kürzesten Entfernung zum Objekt, und bei Chrome weiß ich nicht so recht, was da passiert
  • Die Firefox-Version sieht exakt so aus, wie man es von einer schrittweise abgeschnittenen SDF-Ausgabe des betreffenden Zeichens erwarten würde.
    Die runden Ecken der ersten Ebene wären alle im gleichen Abstand zur jeweils nächstgelegenen Ecke des ursprünglichen Zeichens

• Ich mag das Design dieses Blogs wirklich. Es ist einfach, klar und inhaltsorientiert

  • Ja. Es gibt viele Beiträge, die CSS/SVG/canvas sehr klar zeigen.
    Die Daily-Sketch-Serie oder auch CSS Animation with offset-path machen genauso viel Spaß

• Durch diesen Beitrag habe ich https://css-doodle.com zum ersten Mal kennengelernt.
  Vor ein paar Monaten habe ich mit der HTML Canvas API etwas Ähnliches gemacht, wusste aber nicht, dass man auch mit CSS solche kleinen spielerischen Dinge bauen kann. Gefällt mir sehr

• Ich habe das Fiddle auf das Apple-Logo und die Farben umgestellt, und dabei frisst der erste Ring einen Teil des Apfels weg. Der obere Teil des Apfels wird abgeschnitten; ich würde gern wissen, warum das so ist.
  --c: #5EBD3E,#FFB900,#F78200,#E23838,#973999,#009CDF;
@content: '';

• Ich frage mich, was der beste Weg ist, Text mit doppelter Kontur zu erzeugen, ohne ausgefallene Unicode-Zeichen zu verwenden und dabei trotzdem die von der Schrift empfohlene Darstellung beizubehalten.
  Momentan nutze ich auf my blog ausgefallene Zeichen, aber das schadet den Suchergebnissen. Ich bin gerade dabei, den Blog von manuellem HTML auf 11ty umzustellen und würde ihn dabei gern gleichzeitig verbessern.
  Zusätzlich würde ich mich auch über Meinungen zum aktuellen Blog-Design freuen

• Cool. Schade nur, dass die Rendering-Unterschiede zwischen Browsern so groß sind.
  Ich frage mich, ob jemand dasselbe auch mit Schatten ausprobiert hat. Schatten lassen sich vermutlich ebenfalls stapeln

  • Um eine Kontur zu erzeugen, müsste man den Schatten kreisförmig ausbreiten, sodass die Gesamtform am Ende ungefähr gegen einen Kreis konvergiert und die Buchstabenform kaum noch nachvollzieht

• Mein erster Gedanke war, ein Emoji in den content einzusetzen. Stattdessen bekam ich nur ein Quadrat für unbekannte Zeichen. Ich hatte wohl auf irgendeine Art von Magie gehofft

  • Bei mir wurde das Emoji zwar gerendert, aber es gab überhaupt keinen Kontureffekt, sondern nur das nackte Emoji selbst
  • Mit der Schriftart Noto Emoji funktioniert es