Apr 29 2009

canvas.text für jeden Browser

Tag: CanvasPatrick @ 10:16 pm

In den vergangenen Monaten habe ich schon viel über Canvas geschrieben. Doch etwas fehlte mir um damit umfassendere, grapfische Projekte umzusetzen: Die Möglichkeit Text zu integrieren.

Methoden zum Darstellen von Text sind in den (vorläufigen) Spezifikationen des Canvas-Elementes bereits vorgesehen.

Aktuelle Versionen von Webkit, Safari4 (Beta), Chrome 2 (Beta) und Firefox 3.5 (Beta) implementieren die Canvas-Text-Methoden, doch für die breite Masse eingesetzter Browser gilt dies nicht.

Die Lösung liefert ein Javascript-Bibliothek mit dem einfachen und treffenden Namen canvas-text.

Diese Bibliothek fügt die drei HTML5-Methoden zum Zeichnen von Text in Canvas (strokeText, fillText und measureText) den Browsers hinzu, die diese Funktionen nicht von Haus aus beherrschen (Firefox 2/3.0, Internet Explorer 6+, Opera 9+, Safari 3 und Chrome 1.0).

Canvas-text wurde so umgesetzt, dass es die Richtlinien des W3C und des WHATWG für das canvas-Elemente nach HTML5 erfüllt. Außer der ExCanvas-Bibliothek für den Internet Explorer und der canvas.text.js-Datei werden keine anderen Dateien benötigt.

Vorhandene browser-spezifische Implementierungen werden nicht überschrieben, es sei denn, man gibt dies explizit an.

Der Einbau sieht wie folgt aus:

<!--[if IE]><script type="text/javascript" src="excanvas.js" /><![endif]-->
<script type="text/javascript" src="canvas.text.js" />

Um canvas.text auch zu nutzen,benötigt man nun noch Schriftarten. Typeface.js bietet einige Font-Files an. Eine größere Auswahl gibt es bei Mada’s Playground. Diese müssen unbedingt in einem Ordner mit dem Namen faces abgelegt werden, der sich im selben Verzeichnis wie die Datei canvas.text.js befindet.

Zudem gilt es zu beachten:

Der Dateiname canvas.text.js darf NICHT geändert werden!

Die Schriftartendateien müssen klein geschrieben werden und dem Format family-weight-style.js entsprechen. Family gibt den Namen der Schriftart an wie Arial oder Times new roman, weight steht für die Stärke (bold [=fett] oder normal) und style für den Stil (italic [=kursiv] oder normal).

Bei Schriften mit mehreren Wörtern werden die Leerzeichen durch Unterstriche ( _ ) ersetzt.

Hier ein korrektes Beispiel: optimer-normal-normal.js

Die Schriftarten-Dateien müssen nicht explizit eingebunden werden. Dies geschieht per Ajax zur Laufzeit.

Die browsereigenen canvas.text-Umsetzungen lassen sich per Schalter deaktivieren. Dafür ist folgender Aufruf geeignet:

<script type="text/javascript" src="canvas.text.js?reimplement=true" />

Auf der Projektseite von canvas.text finden sich 5 Live-Demos, die die Möglichkeiten aufzeigen. Ein Blick in den Quellcode zeigt auch einige Kniffe zur Umsetzung.

Zu guter letzt noch ein Codeschnipsel, wie man in Canvas dann damit umgeht:

canvas.font = "20px 'optimer'";
canvas.strokeStyle = "rgb(0,0,200)";
canvas.textAlign = 'left';
canvas.textBaseline = 'middle';
canvas.fillText('Ein normaler Beispieltext ...', 150, 100);
canvas.font = "bold 25px 'optimer'";
canvas.strokeText('... und noch ein fetter Beispieltext', 150, 200);

Apr 27 2009

Überblick: CSS-Hacks

Tag: AllgemeinesPatrick @ 8:19 pm

An dieser Stelle möchte ich heute die geläufigste CSS-Hacks präsentieren, die man ab und an mal braucht – vor allem wenns um Microsofts Internet Explorer geht. Diese sind danach geordnet, welche Browser sie ansprechen.

CSS-Hacks nennt Selektoren, die nur von bestimmten Browsern interpretiert und angewandt werden. So kann man Unterschiede in der Darstellung wie beispielweise beim Box-Modell des Internet Explorers durch spezifische Angaben korrigieren.

Selector-Hacks:

IE 6 (und darunter) [Star-HTML-Hack]

* html #uno  { … }

IE 7 (und darunter) [Star-Plus-HTML-Hack]

*:first-child+html #dos { … }

IE 7 und moderne Browsers [Kind-Selektor]

html>body #tres { … }

Moderne Browsers (ohne IE 7)

html>/**/body #cuatro { … }

Opera 9.27 (und darunter)

html:first-child #cinco { … }

Safari

html[xmlns*=""] body:last-child #seis { … }

Safari 3+, Chrome 1+, Opera9+, FF 3.5+

body:nth-of-type(1) #siete { … }

Safari 3+, Chrome 1+, Opera9+, FF 3.5+

body:first-of-type #ocho {  … }

Safari 3, Chrome 1+

@media screen and (-webkit-min-device-pixel-ratio:0) {

#diez  { …  }

}

Attribute-Hacks:

IE 6 (und darunter)

once { _color:blue }

IE 7 (und darunter)

doce { *color: blue }


Apr 24 2009

Die ganze Welt der Domains…

Tag: AllgemeinesTobi @ 11:17 pm

…auf einer Karte. Vor ein paar Wochen berichteten wir über eine Aktion bei United Domains, an der wir selbst teil nahmen. Die Domainweltkarte ließ nicht lange auf sich warten, vielen Dank United Domains! Nachdem die Rolle mit der Karte nach dem ersten Auspacken nun schon wieder ein paar Tage in der Ecke stand, habe ich sie mir spontan noch einmal vorgeknöpft. Sie wird die weiße, doch sehr triste, Wand in unserem Büro zieren. Und wenn ich mal keine Lust habe zu arbeiten, lerne ich ein paar Länder und ihr Hauptstädte…ähh Domains meine ich. ;)

Das man in seinem Blog über den Erhalt der Weltkarte berichtet und ein Foto von sich un der Karte veröffentlicht ist übrigens Teil 2 der Aktion. Das Bild wir auf der Seite von United Domain veröffentlicht und man erhält einen Link auf seinen Blog.

Der dritte und letzte Teil der Aktion ist, dass die 10 besten Fotos zusammen mit der URL des zugehörigen Blog in Zeitschriften wie wie c’t oder Internet World Business veröffentlicht werden. Wir lassen uns überraschen. :)

Domainweltkarte Büro


Apr 20 2009

Grafische Darstellung von Sortieralgorithmen mit Canvas

Tag: CanvasPatrick @ 9:56 pm

Auf seiner Page Nihilogic zeite Jacob Seidelin vor wenigen Tagen grafische Darstellungen der gängigsten Sortieralgorithmen. Umgesetzt hat er dies nur mitteln Canvas und Javascript.

Angeregt durch einen Bericht von Aldo Cortesi über die Visualisierung von Algorithmen, machte er sich dran, die bestehende Python/Cairo-Bibliothek in Javascript umzusetzen und zu Darstellung Canvas zu nutzen.

Seidelin brauchte zur Realisierung seines Vorhabens lediglich einen Vormittag. Der Code ist – wie er selbst zugibt – nur “quick and dirty”, also unsauber und in keinster Weise optimiert.

Man kann etliche Einstellungen an seiner Demonstration ändern. Vor allem di Auswahl zwischen den grundverschiedenen Algorithmen finde ich hervorragend. Zur Wahl stehen: Quicksort, Heapsort, Selection Sort, Insertion Sort, Bubblesort und Shell Sort. Die meisten kenne ich selbst noch von Informatikvorlesungen.

Heapsort darstellt mit Canvas