Typographie

Text

Genauso wie wir in unserem Koordinatensystem Formen zeichnen können, ist es auch möglich Schrift zu setzen. Die Positionierung basiert auf den selben Pixelangaben, wie sie bei Formen wie Kreisen und Quadraten genutzt wurden. Neben dem Nullpunkt unseres Textes (x/y), können wir mit dem dritten Parameter angeben, wie breit der Text maximal laufen darf, bis es zu einem Umbruch kommt:

text(Text:Text, x:Zahl, y:Zahl, Breite*:Zahl); 
function draw() {
  text("Hello World", 50, 50, 500);
}

Wie in jedem anderen Grafikprogramm, haben wir verschiedene Möglichkeiten das Aussehen und das Layout unseres Textes zu beeinflussen. Durch textAlign kann definiert werden (LEFT/RIGHT/CENTER) in welche Richtung von der angegebenen Koordinate aus (x/y) der Text verläuft:

textAlign(Ausrichtung:LEFT|RIGHT|CENTER); 
function draw() {
  textAlign(LEFT);
}

Die Schriftgröße textSize, der Zeilenabstand textLeading und der Schnitt textStyle können ebenfalls definiert werden. Wie bei den Farbangaben ist zu beachten, dass die Definitionen von oben nach unten bearbeitet werden und so lange fortbestand haben, bis diese durch eine andere Vorgabe überschrieben werden.

textSize(Schriftgröße:Zahl);
textLeading(Zeilenabstand:Zahl);
textStyle(Schriftschnitt:NORMAL|ITALIC|BOLD|BOLDITALIC); 
function draw() {
  textSize(20);
  textLeading(24);
  textStyle(ITALIC);
  text("Hello World", 50, 50);
}

Zeilenumbrüche

Zeilenumbrüche können nicht einfach in der text Funktion eingegeben werden. Diese müssen mit einer Art Sonderzeichen (\n) angezeigt werden:

function draw() {
  text("Hello\nWorld", 50, 50);
}

Schriften laden

Über die Jahre haben sich einige Schriften auf allen Systemen durchgesetzt (Arial, Verdana, Tahoma, Trebuchet MS, Times New Roman, Georgia, Courier New, Brush Script M7, Impact). Diese können einfach genutzt werden:

textFont(Schriftfamilie:Text|Font-Variable); 
function draw() {
  textFont("Times New Roman");
  text("Hello World", 50, 50);
}

Andere Schriften müssen erst geladen werden, damit diese genutzt werden können. Dies muss in der preload Funktion passieren:

loadFont(Pfad/Dateiname:Text); 
let meineSchrift;
function preload() {
  meineSchrift = loadFont('FHP-Bold.ttf');
}

function draw() {
    textFont(meineSchrift);
    text("Hello World", 50, 50);
}

Der Pfad zu den Schriftdateien muss korrekt angegeben werden. Wenn du dir unsicher bist, kopiere dein Schriften in den selben Ordner wie deine index.html Datei, dann musst du nur den korrekten Dateinamen angeben. Es kann manchmal Probleme geben, wenn Dateinamen Leerzeichen oder andere Sonderzeichen enthalten.

Textbreite

Wenn wir z.B. einen Text farbig hinterlegen wollen, müssen wir wissen wie breit der Text tatsächlich ist, da dies abhängig von Schriftgröße, Schriftschnitt, etc. ist, gibt es hierfür eine einfache Funktion um dies herauszufinden:

textWidth(Text:Text); 
function draw() {
  let textBreite = textWidth("Hello World");
  rect(0, 0, textBreite, 10);
}

/lectures/2d/typography/typo/sketch.jsView on GitHub

Zurück zum Anfang