Word anpassen

Mit sog. Format-Definitionsdateien können Sie Exporte individuell gestalten und an ihre Bedürfnisse anpassen. Format-Definitionsdateien sind HTML-Dateien mit speziellen Platzhaltern, die beim Export mit ihren Veranstaltungsdaten ersetzt werden. Über Stil-Vorgaben (Schriftgröße, Farbe, etc.) in Form von CSS-Angaben können Sie das Aussehen der Exporte bestimmen.

Auf dieser Seite finden Sie eine Anleitung, wie Sie so eine Format-Definitionsdatei erstellen können. Sie benötigen dabei ein paar wenige Grundkenntnisse in HTML und CSS. Vieles könne Sie aber einfach kopieren und verändern.

Inhalt:

  1. Dateiformat und Dateiname
  2. Grundstruktur
  3. Platzhalter für Veranstaltungsdaten
  4. Platzhalter für Bedingungen
  5. Weitere Platzhalter
  6. Weiterführenden Hinweise und Elemente

Vorlagen für Format-Definitionsdateien, die Sie als Grundlage für eigene Entwicklungen verwenden können, finden Sie hier (Git-Repository).

 

1. Dateiformat und Dateiname

Format-Definitionsdateien sind reine Text-Dateien, d.h. Sie benötigen einen einfachen Texteditor (z.B. Microsoft Editor, OSX TextEdit oder andere ), der Text ohne Formatierungsangaben erstellen kann. Sie können diese Format-Definitionsdateien z.B. nicht als Word Datei erstellen.

Der Dateiname Ihrer Format-Definitionsdatei setzt sich aus drei Elementen Zusammen: 1. Selbstgewählter Name, 2. Mittelteil und 3. Dateiendung.

1. der erste Teil besteht aus einem von Ihnen selbstgewählten Bezeichnung, z.B. "meinExport1"

2. Der Mittelteil bestimmt den Dateityp der exportierten Datei. Sie können MS-Word, OpenDocument oder PDF-Dateien erstellen. Die entsprechenden möglichen Mittelteile lauten "html2docx", "html2odt" oder "html2pdf".

3. Die Dateiendung der Format-Definitionsdatei lautet: .html

Der gesamte Dateiname lautet dann z.B. "meinExport1.html2docx.html".

2. Grundstruktur

Die Format-Definitionsdatei besteht aus folgendem HTML-Grundgerüst (=Template):

<html>
  <head>
  <style type="text/css">
  * {
  font-family:Arial,Helvetica,sans-serif; 
  }
  </style>
  </head>
  <body>
    <div id="header">Kopfzeile</div>
    <div id="content">Inhaltsbereich</div>
    <div id="footer">Fußzeile</div>
  </body>
</html>

Erstellen Sie eine Datei mit diesem Grundgerüst und testen Sie sie auf der Export-Seite von evangelische-termine.de:

 

Sie erhalten eine Docx-Datei mit den Worten "Kopfzeile", "Inhaltsbereich" und "Fußzeile" jeweils im entsprechenden Bereich in der Schriftart Arial. Alles, was innhalb des HTML-Tags div mit dem Attribut id="header" befindet, landet in der Kopfzeile, mit dem Attribut id="content" in dem Inhaltsbereich und mit dem Attribut id="footer" in der Fußzeile. Sowohl das div mit id="header" als auch das mit id="footer" können weggelassen werden, wenn keine Kopf- oder Fußzeile benötigt wird. Die Attribute dürfen nur einmal in dem Grundgerüst enthalten sein.

Ändern Sie die Schriftart, indem Sie

font-family:Arial,Helvetica,sans-serif;

in

font-family:Times,serif;

ändern.

In die verschiedenen Bereiche können Sie nun ihre gewünschten Inhalte einfügen. Achten Sie dabei immer darauf, dass die HTML-Tags richtig gesetzt sind und an der richtigen Stelle geschlossen sind.

Erstellen Sie z.B. eine Überschrift im content-Bereich:

<div id="content">
<h2 class="title">Veranstaltungen</h2>
</div>

Für die Anpassung der Schriftgröße und -farbe ergänzen Sie eine CSS-Klasse title. CSS-Klassen werden bei der Definition mit vorangestelltem Punkt gekennzeichnet:

<style type="text/css">
* {
  font-family:Arial,Helvetica,sans-serif;
}
.title {
  font-size:16pt;
  color:#066;
}
</style>

Weitere Informationen zu CSS finden Sie hier: https://wiki.selfhtml.org/wiki/CSS

3. Platzhalter für Veranstaltungsdaten

Für die Ausgabe der Veranstaltungsdaten wie Datum oder Titel einer Veranstaltung werden Platzhalter eingesetzt, die dann während des Exports mit den Werten aus der Datenbank ersetzt werden. Dabei wird in einer Schleife ein definierter Bereich für jede exportierte Veranstaltung durchlaufen.

Platzhalter sind Schlüsselworte, die in geschweiften Klammern eingeschlossen sind.

Der Anfang und das Ende der Schleife müssen mit folgendem Platzhalter markiert werden:

{loop:start}
<p>Dieser Bereich wiederholt sich für jede Veranstaltung</p>
{loop:end}

{loop:start} und {loop:end} markieren den Bereich, der für jede Veranstaltung wiederholt wird.

Für die Werte der einzelnen Veranstaltung gibt es den Platzhalter {elem:XXXX}, wobei XXXX für verschiedene Elemente einer Veranstaltung steht. {elem:_event_TITLE} gibt den Titel der Veranstaltung aus, {elem:DATUM} die Datumsangaben.

Eine Übersicht über alle Elemente finden Sie hier.

Beispiel: Ausgabe von Datum und Titel für jede Veranstaltung

{loop:start}
<p>{elem:DATUM} {elem:_event_TITLE}</p>
{loop:end}

Testen Sie Ihren Export. Sie werden merken, dass das Leerzeichen zwischen dem Datum und dem Titel verlorengeht. Sie müssen hier noch den Platzhalter {space} einfügen. Für die einzelnen Absätze der Veranstaltungen könnten Sie noch die Schriftgröße ändern und dafür noch eine Style-Angabe hinzufügen. Um den Titel fett zu drucken, können Sie den HTML-Tag <strong> verwenden. Die gesamte Format-Definitionsdatei sollte nun folgendermaßen aussehen:

<html>
<head>
<style type="text/css">
* {
    font-family:Arial,Helvetica,sans-serif;
}
.title {
    font-size:16pt;
    color:#066;
}
.vera {
    font-size:11pt;
}
</style>
</head>
<body>

<div id="header">Kopfzeile</div>

<div id="content">
    <h2 class="title">Veranstaltungen</h2>
    {loop:start}
    <p class="vera">{elem:DATUM}{space}<strong>{elem:_event_TITLE}</strong></p>
    {loop:end}
</div>

<div id="footer">Fußzeile</div>

</body>
</html>

 

4. Platzhalter für Bedingungen

Häufig kommt es vor, dass Sie bestimmte Werte nur anzeigen möchten, wenn eine bestimmte Bedingung zutrifft. Z.B. soll ein Zeilenumbruch und die Kurzbeschreibung nur ausgegeben werden, wenn auch eine eingegeben wurde. Dafür gibt es verschiedene "Wenn"-Platzhalter.

1. Prüfung auf "nicht leer" oder "vorhanden"

Platzhalter: {if:XXXX} ... {if:end}

Nach dem "if:" befindet sich das Element XXXX, auf dessen vorhandensein getestet wird, innerhalb der beiden Platzhalter ist die gewünschte Ausgabe, die erfolgt, wenn die Bedingung wahr ist.

Beispiel: Wenn eine Kurzbeschreibung vorhanden ist, füge einen Zeilenumbruch und die Kurzbeschreibung ein: {if:_event_SHORT_DESCRIPTION}<br />{elem:_event_SHORT_DESCRIPTION}{if:end}. Der gesamte Absatz innerhalb der Schleife:

<p class="vera">{elem:DATUM}{space}<strong>{elem:_event_TITLE}</strong>
{if:_event_SHORT_DESCRIPTION}<br />{elem:_event_SHORT_DESCRIPTION}{if:end}</p>

2. Prüfung auf einen bestimmten Wert

Platzhalter {ifis:XXXX,YYYY} ... {ifis:end}

Nach dem "ifis:" befindet sich das Element XXXX, das auf Gleichheit mit dem Wert YYYY nach dem Komma getestet wird.

Beispiel: Füge bei allen Sonntagen das Wort "So:" und einen Zeilenumbruch ein: {ifis:WOCHENTAG_START_LANG,Sonntag}So:<br />{ifis:end}

<p class="vera">{ifis:WOCHENTAG_START_LANG,Sonntag}So:<br />{ifis:end}
{elem:DATUM}{space}<strong>{elem:_event_TITLE}</strong></p>

3. Prüfung auf "ist nicht"

Platzhalter: {ifisnot:XXXX,YYYY} ... {ifisnot:end}

Nach dem "ifisnot:" befindet sich das Element XXXX, das auf Ungleichheit mit dem Wert YYYY nach dem Komma getestet wird.

Beispiel: Füge bei allen Wochentagen außer Sonntags die Kurzbezeichnung des Wochentags und einen Zeilenumbruch ein: {ifisnot:WOCHENTAG_START_LANG,Sonntag}{elem:WOCHENTAG_START_KURZ}:<br />{ifis:end}

<p class="vera">{ifisnot:WOCHENTAG_START_LANG,Sonntag}{elem:WOCHENTAG_START_KURZ}:<br />{ifis:end}
{elem:DATUM}{space}<strong>{elem:_event_TITLE}</strong></p>

4. Prüfung auf "enthält"

Platzhalter: {ifcontains:XXXX,YYYY} ... {ifcontains:end}

Nach dem "ifcontains:" befindet sich das Element XXXX, das daraufhin geprüft wird, ob es den Wert YYYY enthält.

Beispiel: Füge vor den Veranstaltungen, die die Kategorie Gottesdienst (_event_EVENTTYPE) enthalten, die liturgische Bezeichnung hinzu: {ifcontains:_event_EVENTTYPE,Gottesdienste}{elem:LITURG_BEZ}:<br />{ifcontains:end}

<p class="vera">{ifcontains:_event_EVENTTYPE,Gottesdienste}{elem:LITURG_BEZ}:<br />{ifcontains:end}
{elem:DATUM}{space}<strong>{elem:_event_TITLE}</strong></p>

Hinweis: Da nicht sicher ist, dass für jeden Tag eine liturgische Bezeichnung vorhanden ist, müsste man auch das noch abprüfen: {ifcontains:_event_EVENTTYPE,Gottesdienste}{if:LITURG_BEZ}{elem:LITURG_BEZ}:<br />{if:end}{ifcontains:end}

5. Prüfung auf vorhergehenden Wert

Platzhalter: {ifnotprev:XXX} ... {ifnotprev:end}

Wenn Sie das Tagesdatum nur ausgeben möchten, wenn die erste Veranstaltung des Tages an der Reihe ist, können Sie dies mit dem Platzhalter {ifnotprev:XXX} machen.
Beispiel:

{ifnotprev:START_DATUM}<p>{elem:WOCHENTAG_START_LANG}, {elem:START_DATUM}</p>{ifnotprev:end}

 

5. Weitere Platzhalter

Folgende weitere Platzhalter stehen zur Verfügung:

{now} die aktuelle Zeit im Format d.m.Y H:m
{start} Start-Datum des ausgewählten Exportzeitraums
{end} End-Datum des ausgewählten Exportzeitraums
{space} Leerzeichen
{me} Name des exportierenden Veranstalters
{iseven} ... {iseven:end} gerade Position einer Veranstaltung
{isodd} ... {isodd:end} ungerade Position einer Veranstaltung
{timeformat:START,XXXX} Individuelle Datumsformatierung mittels einer Formatangabe XXXX, Siehe hierzu die PHP-Funktion strftime()
Verwenden Sie 'now' (mit Anführungsstrichen) statt START für das aktuelle Datum/Uhrzeit
{dateformat:START,XXXX} Individuelle Datumsformatierung mittels einer Formatangabe XXXX, Siehe hierzu die PHP-Funktion date()
Verwenden Sie 'now' (mit Anführungsstrichen) statt START für das aktuelle Datum/Uhrzeit
{replace:_event_TITLE,'WortA|WortB','WortC|WortD'} Ersetzungsfunktion; ersetzt WortA mit WortC und WortB mit WortD

Beispiele der Verwendung mit ein paar weiteren CSS-Angaben zur Gestaltung:

<html>
<head>
<style type="text/css">
* {
    font-family:Arial,Helvetica,sans-serif;
}
.title {
    font-size:16pt;
    color:#066;
}
.even {
    font-size:11pt;
    background-color:whitesmoke;
    border:4px solid whitesmoke;
    margin:5px 0;
}
.odd {
    font-size:11pt;
    border:4px solid white;
    margin:5px 0;
}
#footer {
    font-size:9pt;
}
</style>
</head>
<body>

<div id="header">{me}</div>

<div id="content">
    <h2 class="title">Veranstaltungen vom {start} bis {end}</h2>
    {loop:start}
    {iseven}<p class="even">{elem:DATUM}{space}<strong>{elem:_event_TITLE}</strong></p>{iseven:end}
    {isodd}<p class="odd">{elem:DATUM}{space}<strong>{elem:_event_TITLE}</strong></p>{isodd:end}
    {loop:end}
</div>

<div id="footer">Export vom {now} Uhr</div>

</body>
</html>

6. Weiterführende Hinweise und Elemente

1. Abschnitte auslagern

Das HTML Grundgerüst kann man als Basis-Template bezeichnen. Es ist möglich, in komplexen Format-Definitionsdateien bestimme Teile in Unter-Templates auszulagern. Dies funktioniert mit dem Aufruf des Platzhalters {call-template:XXXX} ... {call-template:end} . XXXX ist dabei ein selbstgewählter Name für das Unter-Template.

Die aufgerufenen Unter-Templates werden mit dem Platzhalter {template:XXXX} ... {template:end} eingeschlossen. XXXX ist dabei ein der entsprechende selbstgewählte Name des Unter-Templates.

Wenn ein Unter-Template aufgerufen werden soll, muss auch das Haupt-Template mit dem Platzhaltern {template:base} ... {template:end} umschlossen werden.

Einfaches Beispiel:

{template:base}
<html>
<head>
<style type="text/css">
...
</style>
</head>
<body>
<div id="header">{me}</div>
<div id="content">
    <h2 class="title">Veranstaltungen vom {start} bis {end}</h2>
    {call-template:veras}
    {call-template:end}
</div>
<div id="footer">Export vom {now} Uhr</div>
</body>
</html>
{template:end}

{template:veras}
    {loop:start}
    <p class="vera">{elem:DATUM}{space}<strong>{elem:_event_TITLE}</strong></p>
    {loop:end}
{template:end}

 

2. XSLT

Die Format-Definitionsdateien werden intern zunächst in sog. XSLT umgewandelt. Sie können beliebige XSLT-Anweisungen auch in den html-Templates verwenden oder auch reine XSLT-Stylesheets verwenden. Wenn Sie reine XSLT-Stylesheets verwenden, muss die Dateiendung auf .xsl geändert werden.

Sie können die HTML-Dateien in XSLT umwandeln: XSLT-Umwandler

3. Bilder

Bilder können über den img-Tag eingebunden werden:

<img src="http://www.ihre-domain.de/bildname.jpg" width="200">

 Wenn die Bilder der Orte oder Veranstaltungen eingebunden werden sollen, muss man xslt-Elemente verwenden:

<xsl:element name="img">
    <xsl:attribute name="src">http:{elem:_place_IMAGE}</xsl:attribute>
    <xsl:attribute name="width">150</xsl:attribute>
</xsl:element>