• Skalen für den goldenen Schnitt
• Fibonacci Reihen, gern auch einfach nur ein paar Zahlenkolonnen
• Ein Zeilenzähler der auch Grundlinienrastersysteme nutzt
• Das Briefbogenfensterlein einfach mal als Maske
• Spickzettel für wirklich täglich Detailtypo-Rätsel
• Schriftgrad-Vergleiche statt Messungen

Besonders überflüssig finde ich inzwischen eigentlich die Standardfunktion eines jeden Typometers: Schriftgrade auszumessen. Im Allgemeinen bin ich doch meist in der glücklichen Situation nicht einen bestehenden Entwurf nachzusetzen, sondern einen Neuen zu erstellen. Da hilft es nicht ausmessen zu können, wie groß ich meine Schrift jetzt gesetzt habe – das kann ich auch einfach in Indesign nachschauen. Viel interessanter wäre wie groß z.B. meine 10-Punkt Schrift im Vergleich zu ein paar anderen 10-Punkt Typen ausschaut.
Ich brauche auch keine Pica, Zoll, oder Sonstwas-Skala – der Goldene Schnitt, 2:3, 3:4, sind mir in meiner täglichen Arbeit viel wichtiger.

Noch im Pre-Beta-Stadium

Aktuell ist mein eigenes kleines Typometer noch in einem frühen Stadium und einige Sachen sind auch noch nichtmal ansatzweise so gelöst wie ich es mir wünschen würde doch bald wird es hoffentlich eine Vorabversion geben die ich dann auch hier zum Download bereitstellen werde.

Wie geht’s weiter

• Weiteres Element für Proportionsmessung einbauen
• 72Quadrat-Logo drauf und nen bissel aufhübschen
• Detailtypo-Block und andere Spickzettel rein
• Eine erste Testbelichtung vornehmen

Weitere typografische Helferlein

Neben dem Typometer habe ich noch ein paar andere Helferlein in der Pipeline. Zum Beispiel ein Tool zur Berechnung eines typografischen Basis-Systems aus Headline, Zwischenheadline, Grundschrift und Bildunterschrift unter Einhaltung einer möglichst sinnvollen Grundlinienraster-Beziehung der einzelnen Elemente untereinander. Aktuell habe ich das Werkzeug in Form einer kleinen Tabellenkalkulation erstellt, dochmal schauen ob’s nicht doch noch anders zu lösen wäre.

Natürlich sollte in Zukunft auch inhaltlich wieder etwas öfter ein neuer Beitrag erscheinen, auch wenn ich sicherlich nicht zu einem wirklich fleißigen Blogger mehr werde.

Es hat sich natürlich – vor allem auch technisch – manches verändert:

Die Startseite

Meine Startseite zeigt nun – ganz trendy – meine aktuellsten Twitter Meldungen und ein paar der letzten Beiträge in schlichter Textform, und weil mein Portfolio sicherlich ein wichtiger Bereich auf 72Quadrat ist eine Diaschau einiger Arbeitsproben.
Die Diaschau läuft – wie das gesamte Portfolio – mit Slideshowpro, einem wirklich angenehmen Flash-Diaschau-Plugin. Vor allem ist die Geschichte dank Slideshowpro-Director ausgesprochen leicht zu verwalten.

Das Magazin und Das Labor

Die ehemaligen Kategorien Weblinks und Labor sind nun direkt im Magazin untergebracht. So daß sich 72Quadrat nur noch in Magazin und Portfolio gliedert. Das Magazin ist also nun der eigentliche Blog-Part geworden.
Alle Artikel sind nun – mehr oder weniger stringent – verschlagwortet oder wie man neudeutsch gerne sagt getaggt. So daß auch eine direkte Navigation über die Schlagworte möglich ist.

Weblinks

Die Blog-Kategorie Weblinks ist ja im Magazin gelandet, und zusätzlich gibt es un – eine aktuell noch recht dürftige – klassische Linkliste. Diese wird ergänzt durch Bookmarks die ich bei delicio.us poste, so daß auch aktuelle kleine Fundstücke aus dem Netz in meinen Weblinks zu finden sind.

Das Portfolio

Am Meisten hat sich sicherlich im Portfolio getan. Bisher waren auch im Portfolio die Arbeitsproben in Form ganz normaler Blog-Beiträge zu finden die sich strikt nach Ihrer Aktualität sortierten, und in verschiedene Unterkategorien aufteilten. Das ist nun Geschichte. Statt dessen gibt es eine Auswahl verschiedener Proben ohne lange Beschreibungen die sich mit ein bissel Ajax auf einer einzigen Seite in Kategorien darstellen lassen.
Das Ganze wird – wie schon kurz beschrieben – durch Slideshowpro gefüttert, und anders als bisher nicht bloß die Flash-Diaschau sondern das gesamte Portfolio. Denn dank der neuen Slideshowpro-Director-API können die Bilder auch in Form klassischer PHP/HTML Seiten dargestellt werden.

• Ein paar Beiträge hier auf 72Quadrat zu meiner Abschlußarbeit
• Eine kleine Fehlersammlung
• www.fchlcr.de

Die wichtigsten Neuerungen

• MacBook Pro 2,2Ghz Santa-Rosa mit LED-Display und 160GBHD
• Cinema Display 23 Zoll
• OKI 5600 Farblaserdrucker

Sonst noch neu

• Crumpler Wack-O-Phone
• XT-Stand Laptop Ständer
• Crumpler The Slip

Keine halben Sachen

Meinen alte Kombination G5 plus iBook wollte ich eigentlich schon seid nem Jahr in die Frührente schicken doch es dauert halt dann immer doch länger als man denkt. Dafür hab’ ich dann aber auch keine halben Sachen gemacht und gleich die Peripherie mitaufgefrischt.

OKI C6500N Farblaser

Zu meinem guten alten Laserdrucker-Veteran dem Apple Laserwriter Select hat sich ein frischer A4-Farblaserdrucker gesellt. Zwar leider ein GDI-Drucker der dummerweise halt im RGB-Modus arbeitet, aber trotzdem eine ausgesprochen hohe Druckqualität aufs Papier bringt und dies für einen Farblaser zudem auch zu einem recht angenehmen Seitenpreis von ca. 23 Cent pro Fotoseite. Hier ein Test des Druckers auf druckerchannel.de

Schließlich habe ich beim Profiler noch ein ordentliches ICC-Profil erstellen lassen, so daß auf die Farbwiedergabe für einen Laserdrucker sehr gut ist. Der Drucker ist nun schon seid ein paar Wochen in Betrieb und gefällt mir eigentlich sehr gut. Ein Test in der Indesign CS3 Trial ergab auch, daß der Druck direkt aus dem Programm sehr gut ausschaut. Aus der Vorgängerversion war’s ärgerlicherweise recht grobauflösend.

23 Zoll Cinema Display

Zuvor arbeitete ich an meinem G5 an zwei 17″ Geräten. Einem 17″ CRT-Monitor von Apple und einem Samsung TFT: Beide in einer Auflösung von 1280 x 1024 Pixeln. Für meinen Umstieg auf’s Macbook Pro musste also eine vergleichbare Bildschirmarbeitsfläche auf meinen Schreibtisch. Zunächst war der interressante HP 2065 20 Zoll-TFT auf meinem Einkaufszettel, doch das Teil war einfach zu hässlich und irgendwie traue ich der PC-Welt nicht so recht. Meine Wahl viel also auf ein gebrauchtes 23 Zoll Apple Cinema Display – eine wunderbare Wahl. Ich muß zwar den Bildschirm noch möglichst bald kalibrieren, doch die 1920 x 1200 Pixel sind ein Traum. Zusammen mit meinem Macbook Pro habe ich nun 3,6 Mio Pixel Arbeitfläche – vorher an meinem G5 hatte ich noch 2,6 Mio zur Verfügung.

WD MyBook 500GB Festplatte

Trotz der Aufrüstung meines Macbook Pros mit der 160GB Festplatte musste einfach zusätzlicher Speicherplatz her. Vor allem halte ich es dank meiner ärgerlichen Schwäche allerlei Dinge in Zügen, Restaurants oder sonst wo, liegen zu lassen für lebensnotwendig ein Backup meines Computers auf dem Schreibtisch stehen zu haben, und zum anderen können 160GB verdammt schnell extrem knapp werden.

Ich kann die WD-Festplatte wirklich wärmstens empfehlen. Dank Firewire 800 ist sie ausgesprochen flott unterwegs, ist nicht allzu aufdringlich was Design und Lautstärke angeht, und zudem recht preiswert. Auch der simple Knopf auf der Festplatte der sie automatisch abmeldet und ausschaltet ist ganz nett.

Für meine Backups nutze ich zum einen das bereits mit der Festplatte mitgelieferte Retrospect Express, und für mein Systembackup das wunderbare kleine Programm Super Duper.

Safety first – Der Taschentick

O.K. ich habe einen kleinen Taschentick und packe meine Maschine immer recht gut ein. Nun hat sich (dank eines recht interessanten 19 Euro Angebots) neben meine Crumpler »Verry Busy Man« (siehe Flickr)eine »Wack o Phone« (auch Flickr) gesellt. Mal schauen. Die Tasche ist nen gutes Stückl kleiner als meine alte – genauergesagt ist sie sogar so klein, daß mein neues MacbooK Pro nicht rein passt. Naja, vielleicht sieht man sie bald bei Ebay wieder.
Nicht bei Ebay landet die wirklich nette Crumpler Neoprenhülle, die sich anders als die alte Tucano-Hülle meines iBooks auch wirklich komplett aufklappen lässt um das Macbook pro auch geöffnet auf der Tasche verwenden zu können. Um dann das gute Stück wirlich vor jedem Kratzer zu bewahren landet dann noch der Slip von Crumpler zwischen Tastatur und Bildschirm, und nebenbei eignet sich das Teil unterwegs wirklich als Mousepad.
Ich hatte zunächst eine Networx Neoprenhülle gekauft, doch irgendwie konnte ich das Networx Logo dann doch nicht so recht ertragen und ich bin auf Crumpler The Gimp umgestiegen.

Nen ordentlicher Laptop-Ständer

So nen Laptop wird ja recht schnell ziemlich warm. Außerdem ist’s einfach angenehmer wenn das Teil zum tippen ein wenig geneigt ist. Leider sind die meisten Laptop-Ständer extrem häßlich oder unangenehm teuer.
In einer Ausgabe der Maclife dand ich dann einen Test des XT-Stands, der zwar auch im normalen Handel für unverschämt viel Geld über die Ladentheke geht, aber bei Ebay auch regelmäßig als Versteigerung zu finden ist. Bei meinem fünften Ersteigerungsversuch schließlich kam ich dann aber doch für (ich glaube) 35,00 Euro an das Teil, und ich kann den XT-Stand wirklich nur empfehlen. Ausgesprochen klein zusammenfaltbar, so daß man Ihn auch mal mitnehmen kann, und sehr solide verarbeitet.

Wie gut ist das neue Santa-Rosa Macbook Pro – Ein erster Test

Das neue LED-Display

Ich muß schon zugeben, ich bin bin recht beeindruckt von dem neuen Macbook Pro. Das neue LED-Display ist unglaublich hell, so daß ich es eigentlich immer zwei Stufen dunkler nutze. Auch ein Flackern des Displays wie an manchen Stellen beschrieben kann ich keineswegs feststellen. Die Qualität des Displays ist auch abgesehen von der angesprochenen hervorragenden Helligkeit sehr gut. Wenn man aus dem idealen senkrechten Betrachtungswinkel herausgeht gibt es zwar einen klar merklichen Gelbstich, doch der Konrtast schwindet dafür kaum, so daß auch in ungünstigen Winkeln das Display lesbar bleibt. Insgesamt würde ich einfach mal behaupten, daß das Display für ein Laptopdisplay wunderbar ist.

Performance

Aktuell sitze ich nun seid ca. 2 Wochen vor dem neuen Teil und es ist wirklich erstaunlich. Ich hätte nicht gedacht, daß das MBP so schnell ist. O.K. mein alter G5 brauchte sicherlich mal wieder ein frisches System und wurde wahrscheinlich von den 30 kleinen Systemhelferlein in die Knie gezwungen, doch das MBP rennt wirklich enorm.

Besonders sympathisch aufgefallen ist mir die Olga. So eine Type hab’ ich schon lang nicht mehr gesehen: Sie hat in dem Regular-Schnitt den Charakter einer ausgesprochen klassischen Renaissance Antiqua, doch wirkt doch ausgesprochen zeitgemäß und entspricht dem aktuellen Schriftgeschmack. Dabei ist sie merkwürdig genug und nicht ein weiterer uninspirierter Klon. Insbesondere die derben Einschnitte und harten Kurven – die wohl einem Linoleumschnitt nachempfunden sind – geben der Schrift in diesen Schnitten ein ausgesprochen interressantes Extra. Vielleicht sind die Einschnitte manchem etwas zu extrem, aber das sei dahingestellt – ich find’s eine schöne treffende Idee. Endlich mal wieder was neues.

Konzept-Text zur Olga

As a designer I know how much pleasure can arise from working on a book or magazine design with »experimental« content and background, like art, illustration or design issues. The choice of typeface is exciting and important, but very often underestimated. In this area of book or magazine design there is often a need for a good working text typeface for use in combination with a prominent and extraordinary typeface for titling and emphasis. Finding the right pair can be difficult and it is not uncommon that the result doesn’t work very well. Having this problem in mind I wanted to design a typefamily with different styles where one style is suitable for bodytext and where the other is experimental and suitable for titling and emphasis. The result is Olga regular and Olga lino. Olga regular is a modern renaissance antiqua with a solid, warm and organic character which makes it legible. Olga lino is based on Olga regular, but is also inspired by linocut illustration technique. With the bold character and the sharp cuts the typeface reflects the roughness and strength of linocut. To keep the handmade and irregular image, Olga lino has different glyphs for the same character.

Da stellt sich nur die Fraqe: Wann wird die Olga das Licht der Welt erblicken, und wo wird man sie wohl einsetzen – hoffentlich in einem ähnlich inspiriertem Magazin. Ich würd’s Olga auf jedenfall wünschen.

Links zur Olga

• Mehr auf der Seite von Christina Bee (kruzbi.de)
• Olga ist unter den TDC2 2007 : Winning Entries

Winning Entries 2007

Text / Type Family

• Corundum Text von Joshua Darden
• Greta Text von Peter Bilak
• Untitled von Joshua Darden
• EMT Lorena von Eduardo Manso
• Olga von Christina Bee
• Tisa von Mitja Miklavčič

Type System / Superfamily

• Arno Pro von Robert Slimbach
• Beorcana von Carl Crossgrove
• Fakir von Underware
• Nassim von Titus Nemeth
• Midan von Kameel Hawa
• Palatino Sans and Palatino Sans Informal von Hermann Zapf and Akira Kobayashi
• Quiosco von Cyrus Highsmith
• Xtra Sans von Jarno Lukkarila

Display

• Flexion von John Langdon
• Manicotti von David Jonathan Ross
• Peanut von Michael Clark
• Subtil von Hanno Bennert and Alexander Gialouris

Pi & Ornament

• Gregoria von Elena Albertoni

Doch damit nicht genug – Auch meine Flickr-Bilder sind wieder anwesend. Nachdem das Plugin in den letzten Wochen – oder waren es Monate? – einige Probleme hatte, funktioniert es jetzt wieder wunderbar, doch nun sind auch wieder meine kleinen Bildchen auf 72Quadrat zu sehen – neuerdings sind meine typografischen Versuche dort übrigens prominent im Kopf vertreten. (siehe hier)

Nach ersten Anfängen – Ich glaub’ es war 2005 – mit einer Serifenbetonten habe ich vor ein paar Wochen die wenigen schon vorgezeichneten Versalien von ihren Serifen befreit und krätftig an den Formen geschraubt. Vielleicht bekommt mein Schätzchen irgendwann Ihre Serifen wieder, doch vorerst ist genug zu tun. Heute sind zumindest die Minuskeln hinzugekommen teils noch recht grob und unvollkommen oder schlicht zu eigensinnig, doch auch das werde ich den Staben schon noch austreiben.

Doch die Arbeit ist eine regelrechte Freude und man sollte vielleicht wieder jeden einzelnen Studenten und Gestalter der täglich mit Buchstaben hantiert dazu zwingen einmal eine Schrift zu zeichnen. Es war nicht nur eine große Freude die Formen zu entwickeln – es war auch ungemein lehrreich.

Die nächsten Schritte

• Grauwert einiger Zeichen angleichen (insbesondere die Versalinen XYWZ)
• Einigen Buchstaben ihre Macken austreiben – Es werden täglich mehr.
• Die Ziffern zeichnen – auf jeden Fall nicht nur Versalziffern
• Interpunktion
• Sonderzeichen
• Ein paar Alternativformen von denen ich mich nicht trennen kann
• Zurichtung endlich fest zurren
• Kerning,… Kerning,…

Ach ja, das Schätzchen braucht noch einen Namen – wem da was einfällt, immer her damit.

Eine weitere Youtube Perle

Wo wir schon mal bei Youtube sind und ich meine innere Hürde vor’m Youtube-Linken gerade mal so nett überwunden habe, möchte ich noch auf einen weiteren sehr schönen aber auch sehr melancholischen Animations-Kurzfilm verlinken: Father and Daughter von Michael Dudok De Wit unbedingt anschauen!

Was im Portfolio so geschehen ist

Zunächst einmal habe ich meine Slideshow-Pro-Diaschau im Kopf der Seite recht kräftig überarbeitet. Das gute Stück ist nun deutlich in meinem Portfolio-Braun-Grau gehalten, hat dank einer neuen Version kleine Thumbnails erhalten und auch die Geschichte mit dem Link zu weiteren Diaschauen aus anderen Kategorien meines Portfolios habe ich etwas klarer und hoffentlich auch verständlicher gemacht – so denke ich zumindest.

Unter der Diaschau gibt’s nun einen kleinen Einstiegstext in dem man durch eine Liste mit ein bissel von dem schon angesprochenen Ajax-Kram verschiedene Arbeitsproben aus meinen Portfolio-Kategorien einblenden kann.

Nebenbei hat das Portfolio nun auch eine ganz schlichte horizontale Unternavigation. Wie übrigens auch alle anderen Seiten nun eine solche Subnavi spendiert bekommen haben.

Neuerungen im Magazin

Hier gibt’s eigentlich neben der neuen Subnavigation nur einen neuen Header ganz ohne flashige Spielereien und ähnliches Zeug. Vielleicht gibt’s in bälde mal wieder ein kleines Sideblog für’s Magazin auf 72Quadrat – wenn ich nur wüßte wie ich das sinnvoll einbinde.

Sonst noch

• Die Kontaktseite liefert nun neben nem Emailformular auch ganz klassisch Postanschrift, Telefonnummer und meine Chat-Namen.
• Das Archiv ist etwas schlichter geworden und verfügt nicht mehr über eine Listung der Beiträge nach den zugeordneten Kategorien. Das entsprechende Wordpress-Plugin war aber leider eh nicht in der Lage das Archiv einigemaßen ordentlich und hübsch in der Kategorie-Ansicht darzustellen – darum also raus damit.
• Die Weblinks haben natürlich jetzt auch wieder ihre Subnavigation bekommen. Die war ja eine ganze Zeit lang schlicht nicht vorhanden. Umso öfter ich mir die Seite aber anschaue umso dringlicher wirkt der Kopf hier ziemlich mies.
• Nen bissel Fehlerkrams wie inkonsistente Beschriftungen bei meiner Bildergalerie, dumme Links zu den hässlichen Einzelbildseiten Derselbigen oder auch ein bisschen CSS-Aufräumen und Plugin-Müll entsorgen. Inzwischen ist meine Bildergalerie deaktiviert.
• Schließlich hab ich den Cache für mein Blog wieder aktiviert. So richtig flott ist’s aber auch auf diesem neuen Server leider nicht.
• Dank einer neuen Version meiner Portfolio-Diaschau kann man jetzt 72Quadrat auch endlich wieder ohne das dümmliche WWW nutzen und ganz frisch und frei auf http://72quadrat.de rumsurfen ohne immer auf http://www.72quadrat.de umgeleitet zu werden.

Denn natürlich bringt so ein Umzug auch immer ein paar Probeleme mit sich – wie richtige Umzüge im wahren Leben eben auch.

• Irgendwie ist mir meine Titelschrift beim Umzug kaputt gegangen. Darum sehen die Headlines noch ziemlich dirty aus. (Beispiel) Darum bin ich mal vorerst auf was komisches Handgemachtes umgestiegen
• Das alte Kontaktformular war wohl auch nicht mit meinem neuen Server kompatibel, aber ich hab einfach ein neues rausgesucht.
• Bisher läuft auch die Startseite noch nicht so recht. Die kleine Liste mit den neusten Beiträgen will noch nicht erscheinen.

Neues Jahr – neues 72Quadrat

Neben so schlicht schnödem Technik-Gedöns soll 2007 natürlich auch noch ein paar andere Neuigkeiten bereit halten. So liegt eine etwas optimierte Fassung des Portfolios schon in der Pipeline und auch an manch anderen Stellen werde ich sicherlich wieder Hand anlegen. Einfach weil es etwas juckt zwischen den Fingern, und jetzt wo der Server wieder hungrig ist, und ich nicht mehr in der Wartschleife liege sollte ich mich auch mal am Riemen reißen und wieder regelmäßiger schreiben…

Wegweiser Schrift

Ich bin ja bereits stolzer Besitzer der Klassiker Lesetypografie und Detailtypografie aus dem Hermann Schmidtz Verlag. Leider hat es dieses kleine Heftchen immer noch nicht in mein Buchregal geschafft. Vielleicht ändert sich das ja mal. (Verlags-Link)

EinEinBandBand

Schon wieder ein Typo-Buch – und ein besonders schönes dazu. Einband-Gestaltung kommt leider nicht allzu oft auf meinen Schribtisch, doch dieses feine Buch dürfte dort durchaus mal landen. (siehe Verlags-Link)

Type-Select – Der Farbfächer des Typografen

Das Teile hatte ich schon des öfteren in der Hand – doch ich konnte mich bisher noch nie dazu durchringenes wirklich zu kaufen. (siehe Verlags-Link)

100 T-Varianten

So jetzt aber auch die letzte Typo-Geschenkidee aus dem Hermann Schidtz Verlag – versprochen! Doch für nen Timo sind 100 T-Varianten ja vielleicht ganz nett. (Verlags-Link)

spatium »Hamburgefonts«

Das aktuelle Schriftmuster-Magazin-Heft von Spatium würd’ mir unterm Baum natürlich auchgefallen. (siehe Shop)

Typotheque Kalender 2007

Ich will ja wieder ein bissel mehr offline leben. Darum fang ich nächstes Jahr doch einfach mal mit meinem Kalender an. Bei Typotheque gibt’s einen feinen kleinen Taschen-Kalender der mir verdammt gut gefallen würde. (siehe hier) Update: Das wird mir schon geschenkt !!

Buchstaben für die Bude

Neulicht hatten Lene und ich ja schon überlegt, wo wir in unserer Bude ein paar wunderschöne Buchstaben anbringen können. Jetzt habe ich dank dem Fontblog auch einen Laden in Hamburg gefunden wo man solch nette Staben bekommt.

Radl-Thermo-Trikot

Tja ja, der Timo muß sich ja wirklich mal etwas mehr bewegen. Vielleicht würde da ein Langarm-Thermo-Trikot helfen?

Und auf das gleiche Paket habe ich schließlich eine Kopie von 72Quadrat gestellt. Ich will da jetzt mal lieber nicht hinlinken, damit Google die Seite nicht gleich indiziert, aber die Adresse ist: www.timohoener.de/72quadrat_v1/ und es ist wirklich deutlich flüssiger, obwohl dort keinerlei Caching aktiviert ist.

Schlußendlich habe ich mich an meinen derzeitigen Provider gewendet um zu besprechen wie ich meinen Umzug am besten abwickle, doch neben zwei Ideen für meinen Umzugsabwicklung hatte ich wohl die dritte Möglichkeit ganz vergessen. Bei meinem derzeitigen Provider einfach – zum gleichen Preis – auf einen neuen Server umzuziehen. Das gefällt mir natürlich mit Abstand am besten und so wird in Zukunft vielleicht mal wieder alles etwas flüssiger hier.

Zusätzlich stehen noch einige kleinere Faceliftings in’s Haus, die sich einfach während der Umzugsarbeit aufdrängten. Ich bin auf jedenfall schon einmal sehr gespannt, was der Umzug bringen wird.

Update

Die Flickr-Bildergalerie auf meine Homepage ist inzwischen verschwunden da das Plugin einfach nur noch MISERABEL funktioniert und mich zu tode nervt.

Wie das mit den Links bei Lightbox 2 so ist

Die Darstellung der vergrößerten Bildansicht wird bei meinem Blog – wie auch bei einigen anderen – durch das wunderbare Lightbox 2 Script erzeugt. Diesem Script ist es ja möglich einem Bild eine Bildbeschreibungszeile zu gönnen. Genau diese Zeile verwende ich um den Link darzustellen. Auch die Frage ob Links in dieser Unterzeile wurde auf der Seite von Lightbox 2 (etwas weiter unten) gestellt und beantwortet:

Can I insert links in the caption?
Yes, but you need to convert quotes and greater and less than symbols into their html entity equivalents. For example:
<a href=»images/image-4.jpg« rel=»lightbox« title=«&lt;a href=&quot;link.html&quot;&gt;my link&lt;/a&gt;«>Image</a>

Also noch einmal kurz zurück zu den Lightbox-Basics

Wenn das Lightbox-Script wie auf der Website beschrieben korrekt installiert wurde und es durch beispielsweise folgende Zeilen geladen wurde:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

So wird das Script durch einen einfachen Link gestartet mit entsprechend gesetztem Tag rel="lightbox" in dem Link-Tag gestartet. Will man mehrere Bilder als Gruppe darstellen und auch durch die Bilder blättern können, so kommt einfach eine eindeutige Albenbeschreibung in eckigen Klammern hinzu: rel="lightbox[album1]".

Bei einer Reihe von drei Bildern würde das also so ausschauen:
<a href="images/image-1.jpg" rel="lightbox[album1]">thumbnailimage #1</a>
<a href="images/image-2.jpg" rel="lightbox[album1]">thumbnailimage #2</a>
<a href="images/image-2.jpg" rel="lightbox[album1]">thumbnailimage #3</a>

Die Bildbeschreibung einfügen
Um nun zu einem Bild eine Bildunterschrift anzuzeigen fügt man noch einen weitere Kleinigkeit dem Link-Tag hinzu: Das Title-Element.
Ein Link würde also inkl. der Bildunterschrift folgendermaßen ausschauen:
<a href="images/image-1.jpg" rel="lightbox[album1]" title="Bildunterschrift">thumbnailimage #1</a>

Und schließlich einen Link als Bildunterschrift

So. Nun haben wir wunderbar einfach Bildunterschriften eingefügt, und wie in der FAQ-Frage auf der Lightbox2 Website unter der Frage »Can I insert links in the caption?« schon kurz beantwortet wurde, ist es natürlich auch möglich Links in diese Bildunterschrift zu packen.

Man könnte zunächst meinen, daß man einfach einen Link wie z.B. <a href="http://www.meinlink.de">Link</a> einfach in die Title-Geschichte einbaut und fertig. Das würde dann z.B. so ausschauen:<a href="images/image-1.jpg" rel="lightbox[album1]" title="<a href="http://www.meinlink.de">Link</a>">thumbnailimage #1</a>.

Doch ganz so einfach geht’s leider nicht.
In dem Title-Element dürfen selbstverständlich keine weiteren Tags reingeschachtelt werden. Das würde den Link-Tag vollkommen zerschießen und der Browser wüsste nicht mehr was er mit so nem zerschossenen Link anfangen soll. Damit die Sache aber trotzdem funktioniert, werden einfach die Sonderzeichen wie Anführungszeichen, und die Größer-Klein-Zeichen in HTML-Entities umgewandelt. Denn das Lightbox-Script macht schließlich nichts anderes als diesen Text dann unter das Bild als HTML-Text zu schreiben – ganz so als hätte man es per Hand reingeschrieben.

Hier eine kleine Liste der zu ersetzenden Zeichen:

• « = &quot;
• < = &lt;
• > = &gt;

Wenn man dies nun auf unseren Link-Tag anwendet, schaut er schließlich folgendermaßen aus. Zur besseren Übersicht habe ich einmal die ersetzen Zeichen fett gesetzt.
<a href="images/image-1.jpg" rel="lightbox[album1]" title="&lt;a href=&quot;http://www.meinlink.de&quot;&gt;Link&lt;/a&gt;">thumbnailimage #1</a>

Die ganze Schose für das Flickr-Plugin verwenden

So, nun habe ich einmal geschildet wie das mit Lightbox2 ausschaut wenn man die Links händisch in statische HTML-Seiten einbaut. Natürlich geht das ganze auch in einer PHP Umgebung und auch mit dem wunderbaren Flickr-Photgalerie Plugin für Wordpress.

Beispielhaft will ich einmal meine Umsetzung für meine Hauptseiten einer Photogalerie zeigen – wie z.B. die Seite mit den Typo-Fundsachen Das Flickr-Album hab ich entfernt. Man kann ja für das Flickr-Plugin eigene Template-Dateien anlegen. In dem Fall der Galerie-Übersichtsseite ist die entsprechende Template-Datei. photoalbum-album.html und liegt im Wordpress-Theme Ordner rum. Anhand dieser Datei möchte ich einmal aufzeigen wie man da nun die Links in die Lightbox-Darstellung reinbekommt. Inzwischen hat das Flickr-Photogalerie-Plugin bereits eine Lightbox2 Unterstützung serienmäßig vorbereitet, doch ich nutze weiterhin meine händische Einarbeitung, da ich Lightbox2 auch an anderen Stellen verwende und die Javascript-Daten nicht x-mal neuladen möchte.

Zunächst an welcher Stelle geht’s nu los?
Die Darstellung der einzelnen Bilder auf der Galerie-Übersichtsseite wird innerhalb eines PHP-Loops erzeugt. Den Loop findet man in der Datei recht flott: Es geht um den Kram zwischen <?php foreach ($photos as $photo):?> und <?php endforeach?>. Ich habe unten einen Screenshot aus Textmate erstellt, wo man meinen Code auch lesen kann. Jetzt wäre wahrscheinlich ein guter Augenblick sich den mal anzuschauen…

In unserem Fall geht es ja vor allem um den Link-Tag, den ich nun einmal kurz Schritt für Schritt – also Zeile für Zeile – erläutern will.

Zeile 27: href
Direkt nach dem öffnen des a-Tags beginnt’s natürlich mit href. Die Zeile ist nicht weiter spannend, und verweist einfach auf das Bild selbst. Das Flickr-Plugin generiert den entsprechenden korrekten Link aus der echo Befehl, den ich hier nicht weiter erklären will:
href="<?php echo $photo['sizes']['Medium']['source']?>"

Zeile 28 rel
Hier wird’s schon ein bissel interessanter da wir anfangen Lightbox2-artige Dinge zu tun. Damit Lightbox2 überhaupt genutzt wird muß halt das rel-Tag genutzt werden.:
rel="lightbox[<?php echo $album['title']?>]"
Damit die Bilder auch als Set dargestellt werden wird in den eckigen Klammern der immer identische Titel des Albums mithilfe des Befehls echo $album['title'] ausgegeben.

Bei meinem Album mit den Typo-Fundsachen schaute diese Zeile schließlich im Ergebnis folgendermaßen aus:
rel="lightbox[Typo Fundsachen]"

Zeile 29: title
In dieser Zeile geht’s nun schließlich an’s Eingemachte. Die Geschichte beginnt zunächst mit:
title="<?php echo htmlentities($photo['title'])?> wodurch einfach der Titel des Bildes ausgegeben wird. durch echo htmlentities wird der Titel auch in korrekten Entities ausgegeben, was für Umlaute in Bildtiteln ganz sinnvoll ist.

Nach dem Titel folgt nun endlich der eigentliche Link in der Bildbeschreibung. Der Bereich wirkt vielleicht ziemlich erschreckend, ist aber wenn man genau hinschaut dann doch verständlich:
&lt;a href=&quot;album/<?php echo $album['id']?>/photo/<?php echo $photo['id']?>/<?php echo $album['pagename2'] .'-'. $photo['pagename']?>&quot; &gt;[mehr]&lt;/a&gt;

Der Link zu einer Bildseite schaut halt bei dem Flickr-Plugin etwas kurios aus, und ist auch nicht gerade besonders kurz:
http://www.72quadrat.de/blog/photos/album/99593/album/99593/photo/3126402/Typo_Fundsachen-Druck_eines_alten_BuchdruckKlischees.html.
Dieser ganze Kram muß nun für jedes Bild generiert werden, und nicht’s anderes tut der Rest der Zeile.

Die Geschichte beginnt mit <a href="album/… wodurch zunächst einmal auf die Hauptseite des Flickr-Plugins verwiesen wird. In meinem Fall liegt das Plugin auf der Seite photos. Wie zu erkennen ist, wurden die Anführungszeichen und die Größer-Klein-Zeichen (s.o.) Lightbox2-entsprechend in HTML-Entities umgewandelt. Ich will mir mal ersparen den ganzen Rest jetzt zu erklären. Durch die diversen PHP-Befehle wird schlicht die URL zu dem Bild geschriben:
…?php echo $album['id']?>/photo//…
Nach dem letzten PHP-Befehl für die Erstellung der korrekten URL wird schließlich das Link-Tag geschlossen – wieder indem die Anführungszeichen und Co in Entities umgewandelt werden, und es wird der Text angegeben, der den Link abbildet – bei mir das Wort »mehr« in eckigen Klammern:
…" >[mehr]</a>.

Soweit erstmal…

Hab’s soeben beim Gerrit von praegnanz.de zum erstenmal in all seiner Pracht in einem Screenshot von SpOn gesehen: Lila Schriftbrei auf weißem Grund. Das ist also unsere neue Bildschirmtypografie. Grund für diese lilafarbene Krankheit sind die hochgelobten Subpixel – immerhin gibt es von MS laut Wikipedia auch ein Online-Programm zur Optimierung der Problematik: Den ClearType Tuner für Windows XP. Doch mal ganz ehrlich: Wer wird das wohl benutzen? 10% der User?

Immerhin ist Cleartype eine ziemlich ordentliche Technik der Schriftglättung, und das Problem der lila Texte wird nur bei einigen Usern auftauchen. Bleibt also zu hoffen daß solche Probleme nicht die Regel sind, und Gerrits Screenshot da die Ausnahme bildet. Natürlich ist Schriftglättung bei größeren Schriftgraden eine wunderbare Sache, doch bei 8 Pixel-Typo? Naja, ich bin auf jedenfall sehr gespannt. Etwas irritierend ist, daß man im Netz vor allem auf Schriftbeispiele mit kurisver Typografie stößt. Wie z.B. hier bei MS – klar, da kommen Pixelschriften einfach nicht mit. Doch das Gros der Bildschirmtypografie in kleinen Graden wird – gottlob – nicht von kurisven Schnitten oder Antiquas geprägt. Wobei auch ein Screenshot auf mezzoblue (ganz unten links ohne Cleartype, rechts mit) macht mir etwas Angst – ist das wirklich besser?