WebDevTeam’s Blog

Es gibt sicherlich eine Menge Tools, um sich die installierten Fonts als Vorschau anzuzeigen. Eines davon ist fontxplorer (Freeware): klein, einfach, schnell.

Um sich einen eigenen Text anzeigen zu lassen, sind zwei Schritte notwendig:

Alternativ geht z.B. auch der Font Picker (Adobe Air).

So, ich habe auch einen Beitrag zum Thema “Text Umbrechen” zu leisten. Danke (!) an die Mitautoren für die zwei Beiträge:

• Text-Overflow – worauf wir alle gewartet haben
• Silbentrennung

Ich hatte dies schon einmal (June 14th, 2007) in meinem alten Blog geschrieben:

Firefox und IE word wrap, Bugeintrag bei mozilla…

Funktioniert aber trotzdem nicht im Firefox.

Einfache Möglichkeit: [wbr] einfügen – www.quirksmode.org

Mit Prototype

<div id="a" style="width: 20px;">aaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<script  type="text/javascript"
   src="http://www.prototypejs.org/assets/2007/5/1/prototype.js"></script>
<script type="text/javascript">
   $("a").innerHTML=$("a").innerHTML.split("").join("<wbr>");
</script>

Mit jQuery

<div class="j" style="width: 20px;">jjjjjjjjjjjjjjjjjjjjjjjj</div>
<script type="text/javascript"
   src="http://jquery.com/src/jquery-latest.js"></script>
<script type="text/javascript">
   $(".j").html($(".j").html().split('').join('<wbr>'));
</script>

Problem
Das Problem ist dann nur, dass alles, was umbrechen kann, auch umbricht! D.h. “Dies ist ein Textbeispiel” wird durch die Skripte zu

D<wbr/>i<wbr/>e<wbr/>s<wbr/> <wbr/>i<wbr/>s<wbr/>t<wbr/> <wbr/>e<wbr/>i<wbr/>n<wbr/>
<wbr/>T<wbr/>e<wbr/>x<wbr/>t<wbr/>b<wbr/>e<wbr/>i<wbr/>s<wbr/>p<wbr/>i<wbr/>e<wbr/>l

und bricht natürlich überall, wo das Ende eines umrahmenden Elements (mit einer festen Breite) erreicht ist und nicht nur bei den Leerzeichen! Es kann also so brechen:

Dies ist ein Textb
eispiel

obwohl es evtl. per default bei den Leerzeichen umbrechen würde:

Dies ist ein
Textbeispiel

Interessant dazu auch:
Wrapping Text Inside Pre Tags

Es gibt ja einige Möglichkeiten, Schriften zu ersetzen. Wir sind gestern über Cufón gestolpert. Mir war das bislang überhaupt nicht bekannt, aber es macht einen guten Eindruck bzgl. der Geschwindigkeit.

Einen Vergleich zwischen sIFR (sIFR 2, sIFR3 beta, sIFR Generator) und Cufón findet man hier.

Update: Man hat bei Cufón erstmal leider einen “Blob” Effekt, d.h. man sieht erst die normale Schrift, dann die umgewandelte. sIFR macht dies anders: alle Elemente für sIFR werden erst einmal per CSS mit

visibility:hidden;

versteckt, dann rennt das sIFR Script durch die Seite. Dadurch erscheinen sie erst dann, wenn sIFR fertig ist.

Update 20.04.

Dank Twitter (@gracesmith) habe ich noch einen Artikel zu vermelden: “Exploring Cufón, a sIFR alternative for font embedding“. Dort geht es auch noch einmal um die Benutzung und die Gegenüberstellung zu sIFR.

Smashing Magazine

Wenn man mal Zeit hat

• Slideshows In Web Design: When And How To Use Them
• 70 New, Useful AJAX And JavaScript Techniques
• 40 Useful JavaScript Libraries
• Ask SM [CSS/JS]: Divs of Equal Height, Dealing with IE 6
• Showcase of Beautiful Fashion Websites
• How To Use Icons To Support Content In Web Design
• Ultimate Round-Up For Version Control with Subversion

Smashing Magazine

Das SmashingMagazine hat ja sehr viele schöne Artikel. Gestern habe ich kurz den Artikel 50 Useful Design Tools For Beautiful Web Typography angeschaut. Dort sind nützliche Verweise enthalten:

• Font Stacks
• Listen von Schriftarten, die auf welcher Plattform vorhanden sind
• Tools, um Pixel in EM und umgekehrt umzurechnen
• Tools, wo man sich die schriftbezogenen Änderungen im CSS gleich als Vorschau ansehen kann
• Schriftartersetzungen (u.a. auch ein jQuery sIFR Plugin)
• Grid Tools
• Free Fonts
• usw.

Zu Beginn des Artikels wird auch gleich auf 50 Extremely Useful And Powerful CSS Tools verwiesen, was man sich auch mal ansehen sollte… Nur die Zeit müsste man haben.