Kategorien
Design JavaScript & jQuery Webdesign

Plumin.js verändert Schriften mit JavaScript

Dank CSS gibt es zahlreiche Möglichkeiten, Texte zu gestalten. Mit Webfonts kann man zudem individuelle Schriften verwenden. Die JavaScript-Bibliothek Plumin.js geht noch einen Schritt weiter. Sie erlaubt es, eine Schrift innerhalb einer Website zu manipulieren. Schriftzeichen können dabei durch individuelle Formen ausgetauscht werden.

pluminjs-teaser_DE

Schrift auswählen und Buchstaben manipulieren

Während man bei den meisten JavaScript-Bibliotheken jene HTML-Elemente ansprechen muss, auf welche die Bibliothek angewendet werden soll, ist das bei Plumin.js nicht nötig. Hier wird eine Schriftart angesprochen, die mit der Bibliothek manipuliert werden soll. An allen Verwendungsstellen dieser Schriftart im Dokument wirken sich die gemachten Veränderungen aus.

pluminjs

Als erstes wird eine nicht sichtbare HTML5-Zeichenfläche erstellt, die intern von Plumin.js genutzt wird.

<canvas id="plumin-canvas" width="1024" height="1024" hidden />

Im nächsten Schritt wird die Zeichenfläche der Bibliothek zur Verfügung gestellt.

plumin.paper.setup("plumin-canvas");

Anschließend wird eine Funktion erstellt, in der die zu manipulierende Schrift, die zu ersetzenden Zeichen und die Formen, welche die Zeichen ersetzen sollen, definiert werden.

(function(p) {
  …
})(plumin)

Alles, was nun folgt, muss sich innerhalb dieser Funktion befinden. Als erstes wird dort der Name der Schrift angegeben, die verändert werden soll.

var schrift = p.Font({
  familyName: "NameDerSchrift",
  ascender: 800,
  descender: -200
});

„familyName“ definiert also den Namen der Schrift. Optional kann man noch Werte für die Ober- und Unterlänge („ascender“ und „descender“) der Schrift angeben. Das hilft bei der späteren Positionierung der Formen.

Als nächstes legen wir die Zeichen, die durch eigene Formen ausgetauscht werden sollen, fest. Dazu wird für jedes Zeichen ein Name („name“) vergeben. Über die Eigenschaft „unicode“ gibt man das Zeichen und über „advanceWidth“ die Breite des Zeichens an.

var A = p.Glyph({
  name: "A",
  unicode: "A",
  advanceWidth: 500
});

Im Beispiel wird der Buchstabe A der Variablen „A“ hinzugefügt. Im dritten Schritt legen wir eine Form an, welche ein Zeichen ersetzen soll.

var formA = p.Path.RegularPolygon({
  center: [250, 350],
  sides: 3,
  radius: 350
});

formA.rotate(180);

Hier erzeugen wir per „RegularPolgyon()“ ein gleichseitiges Dreieck. Der Mittelpunkt der Form wird per „center“ definiert, die Anzahl der Seiten per „sides“ und der Radius per „radius“. Dieses Dreieck drehen wir dann per „rotate()“, so dass die Spitze nach oben zeigt.

Anschließend weisen wir die Form dem Buchstaben A zu.

A.addContour(formA);

Im letzten Schritt fügen wir alle manipulierten Buchstaben der Schrift hinzu.

font.addGlyphs([A]).updateOTCommands().addToFonts();

Überall im Dokument, wo die Schrift zum Einsatz kommt, ersetzen wir so nun alle großen As durch das Dreieck, welches mittels Plumin.js erzeugt wurde.

pluminjs_beispiel
Beispiel für einen per Plumin.js manipulierten Text

Schöne Spielerei, aber nützlich in passenden Projekten

Man kann Plumin.js natürlich sehr schön als Spielerei einsetzen, wie es auf der Website der Bibliothek gemacht wurde. Man kann es aber auch einsetzen, um bestimmte Zeichen mit eigens erstellten Icons zu ersetzen, um auf einen Webfont verzichten zu können. Plumin.js steht unter der MIT-Lizenz und kommt ohne zusätzliche JavaScript-Bibliotheken wie jQuery aus. Die MIT-Lizenz erlaubt den kostenfreien Einsatz für persönliche und kommerzielle Zwecke, also auch in Kundenprojekten.

Die Dokumentation auf der Website ist recht dürftig. Aber sowohl auf der Website als auch im Downloadpaket sind einige Beispiele integriert, die einen guten Einblick in die Bibliothek geben.

(dpe)

Von Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet.

Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.