eleqtriq

Ich verfiel dem Desktop-Publishing in dem Moment, als ich das erste mal mit Freehand 3 einen Text an einen Pfad anfügte. Es war magisch. Auf einmal konnten in wenigen Stunden Designs geschaffen werden für die es zuvor noch tagelanger Arbeit bedurft hatte. Wenn man sich Graphik-Design aus den frühen 80er/90er Jahren anschaut ist gut zu erkennen, welchen Einfluss die neue Technologie auf die Bildsprache der Zeit hatte. Verzerrte Buchstaben die sich schwerelos im Raum bewegen, rotieren drehen und kreiseln - es erinnert irgendwie an früher, mit Effekten überladene Stereoaufnahmen aus den Sechzigern, als Musikproduzenten um jeden Preis zeigen wollten welche Möglichkeiten in der neuen Technologie steckten.

Ich habe mir nun schon seit einiger Zeit den Kopf zerbrochen wie man diesen "gewarpten" Text mit CSS und HTML erzeugen könnte. CSS3 bringt die notwendigen Bordmittel mit: Rotation, Scherung, Matrix, Verschieben. Man muss also nur jeden einzelnen Letter individuell transformieren und an die richtige Position verschieben um einen schicken Text zu erzeugen, der einem Pfad folgt. Klickt auf das Bild unten um euch den Proof of Concept anzuschauen. Die gesamte Typographie wurde ausschließlich mit HTML und CSS erzeugt, kein Bitmap, Flash oder SVG in Sicht (Vorausgesetzt das Google Font Directory ist nicht gerade mal wieder down).

Selbstverständlich ist es nicht praktikabel die ganzen Transformationen von Hand vorzunehmen, in Bezug auf Arbeitsaufwand wären wir dann wieder zurück in den Achtzigern. Aus diesem Grund nahm ichs als sportliche Herausforderung, ein Tool fürs Textwarpen zu basteln. Wegen meinen AS3 Experimenten hatte ich schon genug Erfahrung mit Bezier Mathematik um zu wissen wie man die Winkel und Abstände berechnet. Leider existiert in CSS3 immer noch nicht so etwas wie :nth-letter, deswegen muss leider jeder Buchstabe in einen Span gewickelt werden, die vom W3C empfohlene Methode um einzelne Buchstaben in Worten zu stylen. Ich bin trotzdem nicht wirklich glücklich damit und entwickle derzeit noch eine alternative Warpingmethode, die dynamisch mit Javascript funktioniert. Ich werde sie hier posten wenn es soweit ist.

Das Tool erlaubt es, jeden Text an einen beliebigen Pfad anzufügen oder um einen Kreis zu rotieren. Klickt "Generate HTML" um den entsprechenden HTML Code zu erzeugen, den ihr dann in Eure Seite kopieren könnt. Hier gehts zum Warptool.

Technologie

CSSWarp besteht hauptsächlich aus HTML5 und Javascript. Die HTML5 Canvas wird benutzt um die Kurven und Kreise zu zeichnen. jQuery hilf bei der DOM-Manipulation. Zu guter Letzt habe ich alles noch ein wenig mit CSS3-Animationen aufgepeppt für all die glücklichen, die mit Webkit oder Fox>3 auf meine Seite kommen (also die meisten Besucher). Ich habe die App erfolgreich auf dem IE9 getestet, ältere Versionen werden verständlicherweise nicht unterstützt.

Einbindung von Schrift

Font Warping taugt nichts, solange man es nicht auf wirklich viele Schriften anwenden kann. Deswegen bietet CSSWarp Zugang zum Google Font-Directory und die Möglichkeit, lokal installierte Schriften einzubinden (letzteres ist zugegebenermaßen nicht ganz einfach, die In-App Dokumentation gibt hierzu etwas ausführlichere Info). Wenn Ihr Flash installiert habt zeigt Euch die App ein Listing der lokal installierten Schriften. Ich würde liebend gerne Support für Webfont-Dienste wie Typekit bieten, sehe aber derzeit nicht wie das ohne die Mitarbeit dieser Dienstleister möglich sein sollte. Im Moment sieht's jedenfalls so aus, dass Ihr eine Kopie Eures Webfonts lokal installiert haben solltet. Vergesst nicht, den Font hinterher mittels geeigneter @font-face Deklaration einzubinden bevor Ihr Eure Seiten hochladet.

Wie gut CSSWarp mit Font-Replacement Techniken zusammenarbeitet muss ich noch testen. Bezüglich sIFR erwarte Ich inkonsistentes Browserverhalten, da nicht jeder Browser CSS-Transformationen auf Flash-Objekten unterstützt. sIFR würde ich aber ohnehin nicht empfehlen, da in diesem Falle eine Flash-Player Instanz für jeden einzelnen Buchstaben initiiert werden würde, also eine ganz gute Methode um eine Kernschmelze in Eurer CPU zu erzeugen. Cufon wird wahrscheinlich igendwie funktionieren, aber da Cufon das Bitmap erzeugt *bevor* CSSWarp seine Transformationen anwendet müsst Ihr wohl unregelmäßiges Kerning und unscharfe Schrift einplanen.

Zu guter Letzt noch einige Worte über Dateigrößen. Jede einzelne Transformation im CSS muss in vier Varianten vorhanden sein: -ms-, -o-, -moz- and-webkit-. Man sollte also erwarten, dass sich die gesamten Herstellerpräfixe zu einer inakzeptablen Größe addieren. Trotzdem ist das CSS für das obige Beispiel unter 3Kb (gZipped) gegenüber ca. 30Kb (qualitätsabhängig) für die gleiche Grafik als Jpeg. Scheinbar ein klarer Fall, aber man darf nicht vergessen dass die verwendeten Schriften sich auf zusätzliche 200Kb summieren. Am Ende ist es wie immer eine Frage der Abwägung: werden die Schriften nur einmal oder mehrere Male verwendet? Sind Durchsuchbarkeit und Maschinenlesbarkeit wichtig? Wenn all diese Fragen in die Entscheidung einbezogen werden, kann diese Methode dazu beitragen das visuelle Erlebnis einer Webseite zu bereichern.

Wie gehts weiter?

Noch gibt es Einiges zu tun. Zuerst muss ich den Code noch ein wenig aufräumen. Leider ist es unter der Haube mit der Zeit ein wenig durcheinander geworden und ich entschuldige mich schonmal im Voraus für jeden Event-Listener den ich vergaß zu löschen. Anschließend habe ich geplant Kerning-Tabellen zu integrieren, und dann sind da noch die ganzen Nice-to-haves: lokales Speichern, Undo/Redo und nicht zuletzt dynamisches Warpen mit Javascript.

Nehmt Euch etwas Zeit um mit der App herumzuspielen. Ich bin für jedes Feedback und selbstverständlich auch Bug-Reports dankbar, die mir helfen die App zu verbessern:

Open Example

Trackback

20 Kommentare zu „Aus dem Labor: Text-Warping mit CSS3“

  1. Kommentar by Castles Sa. 5. Mär 2011, 09:14

    very cool, well done.

  2. Pingback by CSS3 Text-Warping | Design Newz Do. 10. Mär 2011, 02:41

    […] CSS3 Text-Warping […]

  3. Pingback by CSS3 Text Warp by Eleqtriq.com | Don Relyea's Blog Do. 10. Mär 2011, 03:33

    […] Weber at Eleqtriq.com has a variety of useful tutorials on HTML 5 and has a great blog to check out if you are into keeping up with HTML 5 and […]

  4. Pingback by CSS3 Text-Warping | The best Tutorials Do. 10. Mär 2011, 03:58

    […] CSS3 Text-Warping CSS3 Text-Warping […]

  5. Pingback by CSS3 Text-Warping | The best Tutorials Do. 10. Mär 2011, 05:10

    […] CSS3 Text-Warping […]

  6. Kommentar by duopixel Do. 10. Mär 2011, 10:00

    This is amazing! This should be all over the web, already posted it to Hacker News.

  7. Pingback by CSS3 Text-Warping | WebDevKungfu Do. 10. Mär 2011, 17:02

    […] CSS3 Text-Warping […]

  8. Pingback by Warp & Gradient Tools – CSS3 Release Do. 17. Mär 2011, 19:05

    […] that looks as if it were created with Illustrators attach to path tool. Read the developers very own presentation of this handy tool.Visit CSS […]

  9. Pingback by Must Read Links for Web Designers and Developers – Volume 6 | Tech King Fr. 18. Mär 2011, 15:02

    […] CSS3 Text Warping […]

  10. Trackback by Visual-Blast Magazine Do. 7. Apr 2011, 03:04

    CSS3 Text to Path Generator – CSSWarp Online Tool…

    Online tool that allows you to attach any text to an arbitrary bezier path or a circle and create Illustrator like “warped” text with pure CSS and HTML…….

  11. Kommentar by duopixel Do. 28. Jul 2011, 05:36

    Not working right for me anymore on Chrome 12 :(

    When I enter the text is along the path, but when I move the bezier curve the x y positions don’t update, but the rotation does. If I click on Warp It! then it does work.

  12. Kommentar by Dirk Do. 28. Jul 2011, 11:06

    Hello Duopixel, I’m aware that there is a problem with Chrome 12 (which wasn’t present in V. 11 btw. :( ). Hope I will find time soon to debug :/ Thank you, Dirk.

  13. Kommentar by drawby Do. 1. Sep 2011, 02:51

    this is REALLY sweet! can you make text fill a path (rather than go around it) or is their already html5 support for that?

  14. Kommentar by AzizMostafa Fr. 7. Okt 2011, 18:45

    That’s Fantastic! Think my Flower Crosswords can go online.
    http://www.Typophile.com/node/51401
    Either by stair step rotating text around concentric circles:
    http://www.Typophile.com/files/Key-Whls.pdf
    Or by inserting text in a clockwise + counterclockwise manner:
    http://www.Powerwordpuzzles.com/sunbursts/
    All the Best

  15. Kommentar by Jacob Mo. 17. Okt 2011, 17:48

    This is amazing! I suggest an option to upload/display a raster background image to easily follow a path that was defined in Illustrator.

  16. Kommentar by Peter Löbel Fr. 21. Okt 2011, 17:51

    Hallo Dirk,
    das ist einfach Klasse. Vielleicht solltest Du Dich mal beim Microsoft Blend Team melden. Die müssen ja nun alle Silverlight Features für HTML-CSS anpassen. Und lass Dich gut bezahlen, Du bist es wert. ;-)

    Viele Grüsse aus der schönen Schweiz ins schöne Hilden.

    Peter

  17. Kommentar by Dirk Mo. 7. Nov 2011, 14:20

    Danke :). Mal nachdenken: „Silverlight“ – was war nochmal „Silverlight“? ;)

  18. Kommentar by Zoltan Di. 15. Nov 2011, 22:25

    Hey … cool stuff!

    Any chance you will be releasing the code for this anytime soon? It would be great to be able to have a library that can produce these curves by adding some „warping“ attributes inside an HTML tag. I would love to give that a shot, if you are willing. :-)

  19. Kommentar by Luke Mi. 16. Nov 2011, 20:47

    This is great, I’d love to see this combined with animation for some accesible HTML5 kinetic text.

  20. Kommentar by Dirk Fr. 25. Nov 2011, 19:44

    Hey Zolltan, nice to see you here, I’m an avid reader of your blog :) (actually was experimenting with cssSandpaper to bring textwarping to IE<9). I will definetely upload it to github when I have a little time to clean up everything. Hopefully during holiday season.