Textformatierung mit Textile

29.03.2024

Inhaltsverzeichnis

Veraltete Textile-Befehle

Einige Textile-Formatierungen wurden 2023 deaktiviert, um die Barrierefreiheit der Liveseiten zu verbessern und diese weiter an das Designsystem von Berlin.de anzupassen. Mit der Änderung werden die Befehle als Text bzw. Zeichen im Frontend der Berlin.de-Seiten ausgegeben. Bitte entfernen Sie diese Befehle von Ihren Seiten.

Icons für Textile-Befehle: Überschriften 2., 3. und 4. Ordnung, Fettdruck, hoch- und tiefgestellter Text, Liste und nummerierte Liste, dazu E-Mail-Verlinkung, externe Verlinkung und das Link-Tool

Textile-Icon-Leiste

Grundsätzliches

Sie können Textile-Formatierung immer dann nutzen, wenn eine Formatierungsleiste über dem Textfeld vorhanden ist – wie im Screenshot abgebildet.

In Textfeldern ohne diese Leiste ist in der Regel auch keine Formatierung mit Textile möglich.

Benutzung der Icon-Buttons zur Formatierung

Schreiben Sie zunächst den Text in das Textfeld oder kopieren Sie ihn aus einer Datei. Klicken Sie gerne an dieser Stelle auf Zwischenspeichern oben rechts.

Dann können Sie jeweils eine Textstelle, die umformatiert werden soll, markieren. Danach klicken Sie das Format an, das diese Textstelle erhalten soll. Das entsprechende Format wird im Textile-Format eingefügt.

Bitte achten Sie bei den Überschriften auf die Gliederungsstufen, die für die Barrierefreiheit korrekt geschachtelt sein müssen. Weitere Informationen dazu finden Sie auf der Seite Digitale Barrierefreiheit in Imperia im Abschnitt “Strukturierter Inhalt”.

Bei den Verlinkungen werden Sie noch nach Zusatzinformationen gefragt, die als Tooltipp angezeigt werden, wenn man über den Link fährt. Dieses Feld können Sie aber auch leer lassen, wenn die Informationen zum Link für alle User*innen eindeutig sind. Dazu finden Sie ebenfalls weitere Informationen auf der Seite Digitale Barrierefreiheit in Imperia im Abschnitt “Link-Title”.

Wenn Sie die Befehle schon eine Weile benutzen, ist es oft schneller, Textile direkt mit dem Text einzugeben. Im Folgenden sehen Sie die möglichen Befehle mit Ihren Ausgaben.

Zum Seitenanfang

Überschriften

  • h2. Eine Überschrift zweiter Ordnung

    h3. Eine Überschrift dritter Ordnung

    h4. Eine Überschrift vierter Ordnung

    Nach einer Überschrift muss eine Leerzeile folgen. Ein einfacher Zeilenumbruch reicht nicht aus, um die Formatierung abzuschließen.

    Eine Überschrift zweiter Ordnung

    Eine Überschrift dritter Ordnung

    Eine Überschrift vierter Ordnung

  • h3(#ankername). Überschrift

    Eine Überschrift mit einem Ankerziel oder Sprungmarke definieren.

    Überschrift

  • "Link zum Anker":#ankername

    Link zu einem Anker in der gleichen Datei. Wenn sich das Ankerziel auf einer anderen Seite als der Link befindet, muss noch die URL der Seite angegeben werden.

    Hier ein Beispiel:
    Das Sprungziel befindet sich auf der Seite /test/bo-test/artikel.1959.php und ist dort mit #ankername bezeichnet. Der Link zu diesem Anker soll auf der Startseite /test/index.php eingebunden werden. Der Link auf der Startseite müsste dann in der folgenden Form geschrieben werden:

    "Link zum Anker":/test/bo-test/artikel.1959.php#ankername

    Link zum Anker

Redaktioneller Hinweis

Bedenken Sie, dass die Überschriften in Textile nicht von dem automatischen H2-Inhaltsverzeichnis (einstellbar im Reiter Metadaten) gelesen werden und daher dort nicht erscheinen.

Bitte achten Sie auf die Reihenfolge der Überschriften. Informationen dazu finden Sie auf der Seite Digitale Barrierefreiheit in Imperia im Abschnitt “Strukturierter Inhalt”.

Zum Seitenanfang

Text-Auszeichungen

  • normaler Text
    *fettgedruckter Text*
    Text ^hochgestellt^
    Text[^hochgestellt^] ohne Leerzeichen
    Text ~tiefgestellt~
    Text[~tiefgestellt~] ohne Leerzeichen

    normaler Text
    fettgedruckter Text
    Text hochgestellt
    Texthochgestellt ohne Leerzeichen
    Text tiefgestellt
    Texttiefgestellt ohne Leerzeichen

Auszug aus dem Edit, ein Block der zweispaltigen Liste links vorgenannte Befehle mit doppelten Gleichheitszeichen vorne und hinten, rechts ohne Anführungszeichen. Die Ergebnisse werden im vorigen Modul deutlich..

Einsatz der doppelten Gleichheitszeichen zur Anzeige von Sonderzeichen im Frontend

Sollten Sie einmal die Textile – Sonderzeichen in normalem Text benötigen, können Sie die Umwandlung mit dem Einsatz von zwei Gleichheitszeichen unterbinden. Wenn Sie vor und hinter dem Text-Teil ein doppeltes Gleichheitszeichen == einfügen, werden die darin enthaltenen Sonderzeichen nicht in die Textile-Syntax umgewandelt und die Zeichen werden angezeigt.

Zum Seitenanfang

Verlinkungen

  • Einfacher Link

    "Link zur Startseite Berlin.de":https://www.berlin.de

    Der Link besteht aus zwei Teilen. Der erste Teil ist in Anführungszeichen gesetzt und enthält den Text, den Nutzer*innen als Linktext sehen sollen. Danach folgt ein Doppelpunkt und dann der zweite Teil mit der URL des Zieles. Die URL muss immer mit “https://” beginnen. Zwischen den einzelnen Teilen darf kein Leerzeichen stehen. Leerzeichen sind nur innerhalb der Anführungszeichen erlaubt.

    Link zur Startseite Berlin.de

  • Link mit Klammern im sichtbaren Linktext

    "Pflichten des Arbeitgebers (§3 bis §14 Arbeitsschutzgesetz) ":https://www.gesetze-im-internet.de/arbschg/

    Die Klammern dürfen nicht direkt vor oder nach den doppelten Anführungszeichen stehen. Damit die Klammern für Nutzer*innen sichtbar angezeigt werden, muss ein Leerzeichen zwischen der schließenden Klammer und dem letzten Anführungszeichen stehen.

    Pflichten des Arbeitgebers (§3 bis §14 Arbeitsschutzgesetz)

  • Link mit Tool-Tipp

    "Link zu Berlin.de(Startseite Berlin.de)":https://www.berlin.de

    Der Text “Startseite Berlin.de” wird beim Überfahren mit der Maus in einer kleinen Box angezeigt. Der Tooltipp wird nur benötigt, wenn der sichtbare Linktext nicht aussagekräftig ist.

    Link zu Berlin.de

  • E-Mail

    "E-Mail an den Support":mailto:support@berlin.de

    Um eine E-Mail-Adresse zu verlinken, sodass sich beim Anklicken das E-Mailprogramm der Nutzer*innen öffnet, muss vor die E-Mail-Adresse “mailto:” (ohne Anführungszeichen) geschrieben werden.

    E-Mail an den Support

  • Telefonnummer

    "030/57118080":tel:+493057118080

    Um eine Telefonnummer zu verlinken, sodass beim Anklicken/Antippen ein Anruf vom gleichen Gerät ausgelöst wird, muss vor die Telefonnummer “tel:” (ohne Anführungszeichen) geschrieben werden.

    030/57118080

Bedenken Sie bei Verlinkungen, dass externe Links automatisch mit dem Tooltipp “Öffnet im neuen Fenster” versehen werden.

Links zum Stadtplan

Links zum Stadtplan können nicht mehr mit einer speziellen Syntax erzeugt werden. Die URL zum Stadtplan wird, wie andere Links auch, in die Textile-Linksyntax eingefügt.

Wenn Sie auf eine Adresse im Stadtplan verlinken möchten, können Sie die URL dazu direkt im Stadtplan erzeugen. Dafür sind folgende Schritte nötig:

  1. Stadtplan aufrufen und im Suchfeld die gewünschte Adresse eintragen
  2. Bei den Vorschlägen auf den passenden klicken und die Karte an dieser Position heranzoomen
  3. Wenn Sie den Marker im Sichtfeld haben, können Sie den Link “Position setzen” wählen
  4. Daraufhin erscheint ein Marker auf der Karte, den Sie auf die gewünschte Position setzen
  5. Danach tragen Sie auf der linken Seite einen kurzen Text für die Sprechblase ein
  6. Unterhalb des Textfeldes wird Ihnen dann der Link für Imperia angezeigt, den Sie kopieren können
Zum Seitenanfang

Listen

  • nummerierte (geordnete) Liste

    # Kaffee
    # Tee
    ## Tee mit Zucker und Zitrone
    ## Tee mit Milch
    # Milch
    ## Milch mit Honig
    ### Milch mit Honig und Zimt
    ### Milch mit Honig und dazu ein Keks
    ## Milch mit Kakaopulver
    # Saft

    nummerierte (geordnete) Liste

    1. Kaffee
    2. Tee
      1. Tee mit Zucker und Zitrone
      2. Tee mit Milch
    3. Milch
      1. Milch mit Honig
        1. Milch mit Honig und Zimt
        2. Milch mit Honig und dazu ein Keks
      2. Milch mit Kakaopulver
    4. Saft

  • ungeordnete Liste

    * Kaffee
    * Tee
    ** Tee mit Zucker und Zitrone
    * Milch
    ** Milch mit Honig
    *** Milch mit Honig und Zimt
    *** Milch mit Honig und dazu ein Keks
    ** Milch mit Kakaopulver
    * Saft

    ungeordnete Liste

    • Kaffee
    • Tee
      • Tee mit Zucker und Zitrone
    • Milch
      • Milch mit Honig
        • Milch mit Honig und Zimt
        • Milch mit Honig und dazu ein Keks
      • Milch mit Kakaopulver
    • Saft

  • Liste mit Überschrift – Definitionsliste
    (nicht für die 3-spaltige Startseite geeignet)

    - Kaffee := heiß und schwarz
    - Tee := ebenfalls heiß, aber nicht so schwarz
    - Milch := kalt oder warm
    schmeckt wunderbar zu Keksen =:

    Diese Listenart sollte für die Darstellung von Interviews verwendet werden.

    Liste mit Überschrift – Definitionsliste
    (nicht für die 3-spaltige Startseite geeignet)

    Kaffee
    heiß und schwarz
    Tee
    ebenfalls heiß, aber nicht so schwarz
    Milch
    kalt oder warm
    schmeckt wunderbar zu Keksen

Redaktioneller Hinweis

Bitte beachten Sie, dass vor und nach einer Liste eine Leerzeile eingefügt werden muss, damit die Listen korrekt generiert werden. Ohne die Leerzeilen kann es zu ungewollten Darstellungen und fehlerhaftem HTML-Code kommen.

Zum Seitenanfang

Wörter und Absätze in einer anderen Sprache kennzeichnen

Wenn Wörter oder Absätze in einer anderen Sprache geschrieben sind, sollten diese für Screenreader gekennzeichnet werden. Der Screenreader stellt sich dann auf eine andere Aussprache ein. Die Kennzeichnung ist auf der Seite nicht sichtbar, sondern nur eine versteckte Information für Screenreader.

Beispiele
%[en]This text is in english.%
1950 eröffnete das französische Kulturzentrum %[fr]Maison de France – Institut Français% am Kurfürstendamm.

Zwischen dem ersten Prozentzeichen, der Sprachangabe [en] und dem ersten Wort darf kein Leerzeichen stehen. Das letzte Prozentzeichen muss ebenfalls ohne Leerzeichen direkt an das letzte Wort in der angegebenen Sprache geschrieben werden.

Diese Schreibweise funktioniert nur in Textboxen, in denen Textile erlaubt ist. In einem Überschriftenfeld kann das nicht verwendet werden. Wenn eine Überschrift in einer anderen Sprache gekennzeichnet werden muss, müsste die Überschrift ebenfalls in Textile geschrieben werden.

Beispiel:
h3. %[en]caption in english%

Übersicht einiger Sprachkürzel

Kürzel Sprache
en Englisch
es Spanisch
fr Französisch
it Italienisch
pl Polnisch
uk Ukrainisch

Weitere Sprachkürzel können auf der Seite der Library of Congress – ISO 639.2 nachgeschlagen werden. Wir geben keine Garantie darauf, dass die Seite vollständig und korrekt ist. Bei der Festlegung von Sprachkürzeln orientieren wir uns allerdings an dieser und suchen ggf. noch weiter im Netz.

Zum Seitenanfang

Icons

Die Icons können mit der Icon-Schreibweise verwendet werden. Eine Übersicht der Icons finden Sie auf der Seite Icons und Grafiken.

Tabellen

Bitte kennzeichnen Sie in Ihrer Tabelle die erste Zeile als Überschrift und verwenden Sie möglichst wenig Spalten.

  • |_. Name |_. Alter |_. Geschlecht |
    | Sara |>. 24 | d |
    | Tim |>. 29 | m |
    | Anna |>. 45 | w |

    Name Alter Geschlecht
    Sara 24 d
    Tim 29 m
    Anna 45 w

Tabellen können mit sogenannten Pipes erstellt werden. Pipes können mit “Alt Gr” und “ < “ (links neben Y) erzeugt werden. Die Pipes können Sie sich als Tabellen-Rahmen vorstellen. Jede Zelle beginnt mit einer Pipe und endet mit einer. Wenn bereits eine vorhanden ist, wird allerdings keine doppelte benötigt. Der Text und die Pipes sollten zur besseren Lesbarkeit immer von einem Leerzeichen getrennt werden.

Formatierungen

Es gibt auch die Möglichkeit, die Tabelle noch weiter zu formatieren. Folgende Formatierungen sind möglich:

_. = erzeugt eine Tabellenüberschrift – Pflicht für Barrierefreiheit
>. = rechtsbündig – nur für Zahlen

Bei der Nutzung der oben genannten Formatierung muss ein Leerzeichen nach dem Punkt folgen, damit die Formatierung umgesetzt wird.

Weitere Informationen zu diesem Auftritt

zum Seitenanfang