Startseite
Startseite
Online Dokumentation

Startseite / Vorlagenentwicklung / Vorlagensyntax / Funktionen / im Header / Font

Font

Die Funktion Font kann eingesetzt werden, um aus einem Text in einer True-Type-Schrift (.ttf) eine Grafik zu erzeugen. Dazu kann jede benutzerspezifische auf dem Server gespeicherte Schrift verwendet werden.

Der Einsatzzweck der Funktion sind grafische Navigationen, Überschriften usw..

Entgegen der Anweisungsfunktion font (vgl. Anweisung $CMS_VALUE(font(...))$) können Grafiken mit mehrzeiligen Texten erstellt werden.

Die Font-Funktion liefert ein Rückgabeobjekt, welches über eine $CMS_VALUE(...)$-Anweisung Informationen zum erzeugten Bild liefert.

Syntax der Font-Funktion

Der Grundaufbau der Funktion Font sieht wie folgt aus:

<CMS_FUNCTION name="Font" resultname="BEZEICHNER">
  <CMS_PARAM name="alpha" value="WERT" />
  <CMS_PARAM name="boxjustify" value="SCHLÜSSELBEGRIFF" />
  <CMS_PARAM name="boxvalign" value="SCHLÜSSELBEGRIFF" />
  <CMS_PARAM name="color" value="FARBE" />
  <CMS_PARAM name="filetype" value="SCHLÜSSELBEGRIFF" />
  <CMS_PARAM name="font" value="BEZEICHNER" />
  <CMS_PARAM name="justify" value="SCHLÜSSELBEGRIFF" />
  <CMS_PARAM name="lineheight" value="WERT" />
  <CMS_PARAM name="media" value="BEZEICHNER" />
  <CMS_PARAM name="resolution" value="BEZEICHNER" />
  <CMS_PARAM name="size" value="WERT" />
  <CMS_PARAM name="style" value="SCHLÜSSELBEGRIFF" />
  <CMS_PARAM name="width" value="WERT" />
  <CMS_PARAM name="xoffset" value="WERT" />
  <CMS_PARAM name="yoffset" value="WERT" />
  <CMS_CDATA_PARAM name="text"><![CDATA[WERT]]></CMS_CDATA_PARAM>
  ...
  <CMS_VALUE_PARAM name="text" value="BEZEICHNER" />
</CMS_FUNCTION>

Schematische Darstellung

Schematische Darstellung der Parameterauswirkung

Parameter der Font-Funktion

Für die Font-Funktion lassen sich folgende Parameter angeben:

Attribute

Bedeutung

mögliche Werte

Pflichtparameter

alpha

Deckungsgrad des Textes

Ganzzahl

nein

boxjustify

Horizontale Ausrichtung eines Textbereichs

left, center, right

nein

boxvalign

Vertikale Ausrichtung eines Textbereichs

top, center, bottom

nein

color

Schriftfarbe

Farbwert in Hexdezimalschreibweise

nein

filetype

Dateityp des erzeugten Bildes

jpg, png

nein

font

Schriftart

Bezeichner

ja

justify

Horizontale Textausrichtung

left, center, right

nein

lineheight

Zeilenhöhe

Ganzzahl

nein

media

Hintergrundbild;
bestimmt die Breite und Höhe des Bildbereichs

Bezeichner

ja

size

Schriftgröße

Ganzzahl

nein

style

Schriftstil

Schlüsselwörter

schriftabhängig

text

Darzustellender Text

Zeichen

ja

width

Breite eines Textbereichs

Ganzzahl

ja

xoffset

Horizontale Verschiebung eines Textbereichs

Ganzzahl

nein

yoffset

Vertikale Verschiebung eines Textbereichs

Ganzzahl

nein

    
Wichtig Bei den Parametern font, media, text und width handelt es sich um Pflichtparameter.
Zusätzlich zu beachten ist, dass die Parameter font, media und width mindestens einmal vor der ersten Verwendung des Parameters text definiert werden müssen.
Der Parameter style ist von der verwendeten Schriftart abhängig. Ob es sich dabei um einen Pflichtparameter handelt, ist abhängig von der ausgewählten Schriftart.
Alle anderen Parameter sind optionale Parameter.

Parameter font

Mit dem Parameter font wird angegeben, welche Schriftart für das Rendern des Texts verwendet werden soll. Als Wert des Parameters ist der symbolische Bezeichner (Referenzname) einer im FirstSpirit-Server hinterlegten True-Type-Schrift (Abkürzung: TTF, englisch für True Type Font) anzugeben.

Wird kein Bezeichner oder kein gültiger Bezeichner angegeben, wird während der Vorschau und Generierung ein Fehler ausgegeben.

Schriften werden im FirstSpirit-Server über den ServerManager angelegt. Die einzelnen Schritte werden im FirstSpirit Handbuch für Administratoren beschrieben.

Wichtig Dieser Parameter muss vor dem ersten Aufruf eines text-Parameters angegeben werden! 

<CMS_FUNCTION name="Font" resultname="name">
  <CMS_PARAM name="font" value="BEZEICHNER" />
  ...
  <CMS_CDATA_PARAM name="text"><![CDATA[...]]></CMS_CDATA_PARAM>
  ...
</CMS_FUNCTION>

Parameter width

Mit dem Parameter width wird die Breite eines Textbereiches (siehe Schematische Darstellung) angegeben. Die Angabe der Breite eines Textbereiches erfolgt in Pixel und sollte kleiner sein, als die Breite des Bildbereiches bzw. Hintergrundbildes.

Ist der darzustellende Text breiter, als der angegebene Wert für den Textbereich, so erfolgt ein automatischer Umbruch. Maßgeblich für den Umbruch ist das letzte Leerzeichen vor der Überschreitung der angegebenen Breite des Textbereiches. Der Umbruch erfolgt nach diesem Leerzeichen.

Hierzu ein Beispiel:

<CMS_FUNCTION name="Font" resultname="font">
  <CMS_PARAM name="width" value="120" />
  <CMS_PARAM name="size" value="14" />
  <CMS_PARAM name="media" value="background" />
  <CMS_PARAM name="color" value="#000000" />
  <CMS_PARAM name="boxjustify" value="center" />
  <CMS_PARAM name="justify" value="left" />
  <CMS_PARAM name="font" value="arial" />
  <CMS_CDATA_PARAM name="text"><![CDATA[Dies ist ein Beispielsatz für einen Textbereich]]></CMS_CDATA_PARAM>
</CMS_FUNCTION>

Der angegebene Text im Beispiel benötigt mehr Platz als 120 Pixel. Die 120 Pixel werden erstmalig mit dem Wort Beispielsatz überschritten und dann mit dem Wort einen. Daher wird der Text mit zwei Umbrüchen dargestellt:

Wichtig Dieser Parameter muss vor dem ersten Aufruf eines text-Parameters angegeben werden!

Parameter media

Mit dem Parameter media wird das Hintergrundbild festgelegt, auf dem die Textbereiche gerendert werden. Das Hintergrundbild legt damit die Breite und Höhe des mittels der Font-Funktion erzeugten Bildes fest.

Der Parameter erwartet als Wert den Referenznamen eines Bilds aus der Medien-Verwaltung. Dem Referenznamen muss kein media: vorangestellt werden:

<CMS_FUNCTION name="Font" resultname="name">
  <CMS_PARAM name="media" value="BEZEICHNER" />
  ...
  <CMS_CDATA_PARAM name="text"><![CDATA[...]]></CMS_CDATA_PARAM>
  ...
</CMS_FUNCTION>

Wichtig Dieser Parameter muss vor dem ersten Aufruf eines text-Parameters angegeben werden!

Wichtig Handelt es sich beim Bild aus der Medien-Verwaltung um ein transparentes GIF- oder PNG-Bild, so ist auch das erzeugte Bild ein transparentes PNG-Bild. Ansonsten wird ein Bild mit schwarzem Hintergrund erzeugt.
Wichtig Auf transparenten Hintergrundbildern wird von der Font-Funktion kein Text gerendert!
Wichtig Bei der Verwendung von transparenten PNG-Bildern kann es zu Anzeigefehlern kommen, da einige Browser (z.B. der IE) den Alphakanal (=Transparenz) nicht richtig darstellen können!

Parameter text

Mit dem Parameter text wird der Inhalt eines Textbereichs angegeben. Die Angabe des Inhaltes kann entweder mit Hilfe von Ausdrücken oder aber als Definition eines Vorlagenfragmentes (vergleichbar mit einer Absatzvorlage) erfolgen.

Ein Bild, welches durch die Funktion Font erzeugt wurde, kann mehrere Textbereiche enthalten.

Definition unter Verwendung von Ausdrücken:

<CMS_FUNCTION name="Font" resultname="BEZEICHNER">
  <CMS_PARAM name="font" value="BEZEICHNER" />
  <CMS_PARAM name="media" value="BEZEICHNER" />
  <CMS_PARAM name="width" value="WERT" />
  ...
  <CMS_VALUE_PARAM name="text" value="AUSDRUCK" />
  ...
</CMS_FUNCTION>

Definition eines Vorlagenfragmentes (vergleichbar mit einer Absatzvorlage):

<CMS_FUNCTION name="Font" resultname="BEZEICHNER">
  <CMS_PARAM name="font" value="BEZEICHNER" />
  <CMS_PARAM name="media" value="BEZEICHNER" />
  <CMS_PARAM name="width" value="WERT" />
  ...
  <CMS_CDATA_PARAM name="text">
    <![CDATA[
      RUMPF DES VORLAGENFRAGMENTES
    ]]>
  </CMS_CDATA_PARAM>
  ...
</CMS_FUNCTION>

Wichtig Bei der Erzeugung eines Textbereiches wird der jeweils letzte Wert eines Parameters verwendet: 
<CMS_FUNCTION name="Font" resultname="schriftzug">
  <CMS_PARAM name="font" value="arial" />
  <CMS_PARAM name="media" value="wiese" />
  <CMS_PARAM name="width" value="150" />
  <CMS_PARAM name="size" value="12" />
  <CMS_CDATA_PARAM name="text">
    <![CDATA[
      1. Textbereich
    ]]>
  </CMS_CDATA_PARAM>
  <CMS_PARAM name="width" value="100" />
  <CMS_PARAM name="size" value="14" />
  <CMS_CDATA_PARAM name="text">
    <![CDATA[
      2. Textbereich
    ]]>
  </CMS_CDATA_PARAM>
</CMS_FUNCTION>

Im Beispiel werden die Parameter font, media, width und size für den Textbereich 1. Textbereich mit den Werten arial, wiese, 150 und 12 verwendet.

Für den Textbereich 2. Textbereich werden die gleichen Parameter verwendet, jedoch mit den Werten arial, wiese, 100 und 14.

Optionale Parameter

Parameter filetype

Ein Bild, welches durch die Font-Funktion erzeugt wird, ist standardmäßig eine PNG-Datei (Portable Network Graphics). Der Parameterwert für eine manuelle Angabe lautet: png.

Mit dem Parameter filetype kann statt einer PNG-Datei auch eine JPEG-Datei (Joint Photographic Experts Group) erstellt werden (Wert: jpg).

<CMS_FUNCTION name="Font" resultname="name">
  <CMS_PARAM name="filetype" value="png" />
  ...
</CMS_FUNCTION>

<CMS_FUNCTION name="Font" resultname="name">
  <CMS_PARAM name="filetype" value="jpg" />
  ...
</CMS_FUNCTION>

Parameter size

Mit Hilfe des Parameters size kann die Schriftgröße in Punkten (Zeichen: pt) für einen Textbereich angegeben werden. Wird der Parameter nicht angegeben, so wird für den Textbereich als Schriftgröße 14 Punkte verwendet.

<CMS_FUNCTION name="Font" resultname="name">
  <CMS_PARAM name="size" value="GANZZAHL" />
  ...
</CMS_FUNCTION>

Parameter color

Mit dem Parameter color kann die Schriftfarbe für einen Textbereich angegeben werden. Die Angabe erfolgt in sechsstelliger Hexadezimal-Schreibweise mit vorangestelltem # (z.B. #123456). Wird der Parameter nicht angegeben, so wird der Textbereich mit schwarzer Schriftfarbe (#000000) erzeugt.

<CMS_FUNCTION name="Font" resultname="name">
  <CMS_PARAM name="color" value="FARBE" />
  ...
</CMS_FUNCTION>

Parameter alpha

Durch den Parameter alpha wird die Deckkraft eines Textbereichs in Prozent angegeben. Wird der Wert mit 100 (Standardeinstellung) angegeben, ist die Schrift des Textbereichs vollständig deckend. Wird ein Wert <100 angegeben, wird der Textbereich vor dem Hintergrundbild transparenter, bis er bei einem Wert von 0 vollständig transparent (also nicht mehr sichtbar) ist.

<CMS_FUNCTION name="Font" resultname="name">
  <CMS_PARAM name="alpha" value="GANZZAHL" />
  ...
</CMS_FUNCTION>

Wichtig Die Angabe von 0 führt dazu, dass die Schrift vollständig transparent und somit nicht sichtbar mehr ist!

Parameter lineheight

Mit dem Parameter lineheight wird die Zeilenhöhe einer Zeile (in einem Textbereich) in Punkten (Einheit: pt) angegeben. Die Vorbelegung dieses Wertes ist der doppelte Wert des size-Parameters.

Wird ein Wert angegeben, der kleiner als der size-definierte Wert ist, so überschneiden sich die einzelnen Textzeilen.

<CMS_FUNCTION name="Font" resultname="name">
  <CMS_PARAM name="lineheight" value="GANZZAHL" />
  ...
</CMS_FUNCTION>

Parameter style

Einige Schriftarten unterstützen die Angabe eines speziellen Schriftstils. Mit dem Parameter style lassen sich die einzelnen Schriftstile angeben.

Einige gebräuchliche Schriftstile sind: italic (für Kursiv) und bold (für Fett).

<CMS_FUNCTION name="Font" resultname="name">
  <CMS_PARAM name="style" value="SCHLÜSSELBEGRIFF" />
  ...
</CMS_FUNCTION>

Parameter boxjustify

Mit dem Parameter boxjustify wird die horizontale Ausrichtung eines Textbereiches auf der Hintergrundgrafik festgelegt. Die Ausrichtung wirkt sich nur auf den Textbereich aus und nicht auf den Inhalt (siehe auch: Schematische Darstellung).

Die Breite eines Textbereiches ergibt sich aus der Angabe des Parameters width und dem Textinhalt (Parameter text).

Gültige Werte sind: left (linksbündig = Vorbelegung), center (zentriert) und right (rechtsbündig).

<CMS_FUNCTION name="Font" resultname="name">
  <CMS_PARAM name="boxjustify" value="SCHLÜSSELBEGRIFF" />
  ...
</CMS_FUNCTION>

Parameter boxvalign

Mit dem Parameter boxvalign wird die vertikale Ausrichtung eines Textbereiches auf der Hintergrundgrafik festgelegt. Die Ausrichtung wirkt sich nur auf den Textbereich aus und nicht auf den Inhalt (siehe auch: Schematische Darstellung).

Die Breite eines Textbereiches ergibt sich aus der Angabe des Parameters width und dem Textinhalt (Parameter text).

Gültige Werte sind: top (oben = Vorbelegung), center (mittig) und right (unten).

<CMS_FUNCTION name="Font" resultname="name">
  <CMS_PARAM name="boxvalign" value="SCHLÜSSELBEGRIFF" />
  ...
</CMS_FUNCTION>

Parameter justify

Mit dem Parameter justify wird die horizontale Ausrichtung eines Textbereich-Inhalts festgelegt. Die Ausrichtung wirkt sich nur auf den Inhalt aus und nicht auf den Textbereich (siehe auch: Schematische Darstellung).

Die Breite eines Textbereiches ergibt sich aus der Angabe des Parameters width und dem Textinhalt (Parameter text).

Gültige Werte sind: left (linksbündig = Vorbelegung), center (zentriert) und right (rechtsbündig).

<CMS_FUNCTION name="Font" resultname="name">
  <CMS_PARAM name="justify" value="SCHLÜSSELBEGRIFF" />
  ...
</CMS_FUNCTION>

Parameter xoffset

Mit dem Parameter xoffset ist es möglich, einen Textbereich auf der Hintergrundgrafik horizontal zu verschieben.

Der Parameter erwartet als Wert eine Ganzzahl. Bei einer negativen Ganzzahl wird der Textbereich nach links, bei einer positiven nach rechts verschoben.

<CMS_FUNCTION name="Font" resultname="name">
  <CMS_PARAM name="xoffset" value="GANZZAHL" />
  ...
</CMS_FUNCTION>

Parameter yoffset

Mit dem Parameter yoffset ist es möglich, einen Textbereich auf der Hintergrundgrafik vertikal zu verschieben.

Der Parameter erwartet als Wert eine Ganzzahl. Bei einer negativen Ganzzahl wird der Textbereich nach oben, bei einer positiven nach unten verschoben.

<CMS_FUNCTION name="Font" resultname="name">
  <CMS_PARAM name="yoffset" value="GANZZAHL" />
  ...
</CMS_FUNCTION>

Rückgabeobjekt

Mit dem Rückgabeobjekt der Font-Funktionen können mit Methoden Informationen zum erzeugten Bild (z.B. Breite und Höhe) ermittelt werden. Der Name des Objektes ist der bei resultname vergebene Bezeichner.

Auf folgende Attribute können auf dem Rückgabeobjekt der Funktion Font zugegriffen werden:

Attribute

Beschreibung

BEZEICHNER.height

Liefert die Höhe des erzeugten Bildes in Pixel zurück.

BEZEICHNER.width

Liefert die Breite des erzeugten Bildes in Pixel zurück.

  

Beispiele zur Funktion Font

Nachfolgend werden einige Beispiele zur Verwendung der Anweisung innerhalb von Vorlagen gezeigt. Die Beispiele sollen die konkrete Auswirkung der Anweisung verdeutlichen und eine Hilfe für den Vorlagenentwickler bei der Erstellung eigener Vorlagen sein.

Wichtig Für die Verwendung innerhalb eines Projekts, müssen die hier gezeigten Beispiele angepasst werden! Beispielsweise müssen Variablennamen auf die spezifischen Variablennamen des Projekts geändert werden, in dem die Anweisung verwendet werden soll.

1. Beispiel: Ein Textbereich mit automatischem Zeilenumbruch

<CMS_FUNCTION name="Font" resultname="font">
  <CMS_PARAM name="width" value="120" />
  <CMS_PARAM name="size" value="14" />
  <CMS_PARAM name="media" value="background" />
  <CMS_PARAM name="color" value="#000000" />
  <CMS_PARAM name="boxjustify" value="center" />
  <CMS_PARAM name="justify" value="left" />
  <CMS_PARAM name="font" value="arial" />
  <CMS_CDATA_PARAM name="text"><![CDATA[Dies ist ein Beispielsatz für einen Textbereich]]></CMS_CDATA_PARAM>
</CMS_FUNCTION>

  • Im Beispiel wird ein Textbereich mit der Breite von 120 Pixeln definiert.
  • Als Hintergrund soll das Bild mit dem Referenznamen background dienen.
  • Die Schriftgröße wird mit 14 Punkt definiert.
  • Es soll die Schrift mit dem Referenznamen arial verwendet werden.
  • Die Schriftfarbe soll schwarz sein (#000000).
  • Der Textbereich soll zentriert ausgerichtet werden, der Inhalt des Textbereichs linksbündig.

Der Text wird wie folgt ausgegeben:

Dies ist ein 
Beispielsatz für 
einen Textbereich

2. Beispiel: Absolute Positionierung von Textbereichen

<CMS_FUNCTION name="Font" resultname="font">
  <CMS_PARAM name="width" value="120" />
  <CMS_PARAM name="font" value="arial" />
  <CMS_PARAM name="size" value="12" />
  <CMS_PARAM name="media" value="background" />
  <CMS_PARAM name="color" value="#000000" />
  <CMS_PARAM name="xoffset" value="5" />
  <CMS_PARAM name="yoffset" value="5" />
  <CMS_CDATA_PARAM name="text"><![CDATA[Dies]]></CMS_CDATA_PARAM>
  <CMS_PARAM name="size" value="12" />
  <CMS_PARAM name="color" value="#999999" />
  <CMS_PARAM name="xoffset" value="15" />
  <CMS_PARAM name="yoffset" value="15" />
  <CMS_CDATA_PARAM name="text"><![CDATA[ist]]></CMS_CDATA_PARAM>
  <CMS_PARAM name="size" value="12" />
  <CMS_PARAM name="color" value="#666666" />
  <CMS_PARAM name="xoffset" value="25" />
  <CMS_PARAM name="yoffset" value="25" />
  <CMS_CDATA_PARAM name="text"><![CDATA[ein]]></CMS_CDATA_PARAM>
  <CMS_PARAM name="size" value="12" />
  <CMS_PARAM name="color" value="#000000" />
  <CMS_PARAM name="xoffset" value="35" />
  <CMS_PARAM name="yoffset" value="35" />
  <CMS_CDATA_PARAM name="text"><![CDATA[Beispielsatz.]]></CMS_CDATA_PARAM>
</CMS_FUNCTION>

Im Beispiel wird der Satz "Dies ist ein Beispielsatz." in Treppenform definiert.

Jedes einzelne Wort soll pro Wort wachsend mit einem Versatz von horizontal und vertikal 10 Pixeln dargestellt werden. Die Berechnung soll absolut von der linken oberen Ecke der Hintergrundgrafik erfolgen.

Das Ergebnis sieht wie folgt aus:

3. Beispiel: Ausgabe von Breite und Höhe

Definition der Font-Funktion:

<CMS_FUNCTION name="Font" resultname="font">
  <CMS_PARAM name="width" value="120" />
  <CMS_PARAM name="size" value="14" />
  <CMS_PARAM name="media" value="background" />
  <CMS_PARAM name="color" value="#000000" />
  <CMS_PARAM name="boxjustify" value="center" />
  <CMS_PARAM name="justify" value="left" />
  <CMS_PARAM name="font" value="arial" />
  <CMS_CDATA_PARAM name="text"><![CDATA[Dies ist ein Beispielsatz für einen Textbereich]]></CMS_CDATA_PARAM>
</CMS_FUNCTION>

Aufruf der Font-Funktion unter Verwendung der Breite und Höhe:

$CMS_SET(set_font, font)$
<img src="$CMS_REF(set_font)$" width="$CMS_VALUE(set_font.width)$" height="$CMS_VALUE(set_font.height)$">

Das Beispiel gibt das erzeugte Bild aus (siehe 1. Beispiel). Für die HTML-Attribute width und height werden die Größen des Bilds ermittelt.

Eine examplarische Ausgabe lautet:

<img src="/fs4preview/preview/671041/file/fontimage/bPQfrNllCZXXycTcCpNZ7w.png" width="254" height="219">

Druckversion | Seitenanfang

© 2005 - 2015 e-Spirit AG | Alle Rechte vorbehalten. | Letzte Änderung: 2014-07-21