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.

Die Ausgabe des Bildes mit dem gewünschten Text erfolgt über <img src=$CMS_REF(...)$.

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>

Zu allgemeinen Hinweisen zur Syntax von Header-Funktionen siehe einleitende Seite Funktionen.

Schematische Darstellung

Schematische Darstellung der Parameterauswirkung

Parameter der "Font"-Funktion (Übersicht)

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

Attribut	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

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.

Pflichtparameter

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 unter Installierte Fonts (→Dokumentation für Administratoren) beschrieben.

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:

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>

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

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.

Auf transparenten Hintergrundbildern wird von der Font-Funktion kein Text gerendert!

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>

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

Mithilfe 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>

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 der Funktion

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:

Attribut	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.

Beispiel:

Breite des Bildes: $CMS_VALUE(font.width)$

Zur Ausgabe des Bildes mit dem über den Parameter text angegebenen Text wird folgende Syntax verwendet:

<img src="$CMS_REF(font)$"/>

Beispiele zur "Font"-Funktion

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.

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 Bildes ermittelt.

Eine exemplarische Ausgabe lautet:

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

Druckversion | Seitenanfang