HTML-Auszeichnung mit CSS

Seit UDO 7 werden bei der HTML-Ausgabe mehr Attribute ausgegeben, die über CSS formatierbar sind.

CSS-Klassen für HTML allgemein

UDO_index_list	Dieser Klassenname wird für eine <div>-Umgebung verwendet, mit der die Sprungmarkenleiste (A-Z) in der indexudo-Seite formatiert wird.
UDO_index_group	Dieser Klassenname wird für eine <p>-Umgebung verwendet, die alle Index-Einträge für eine Sprungmarke, also für einen Buchstaben enthält. So können Sie z.B. einen Buchstaben-Gruppe in einem langen Index mit einem größeren Abstand zum nächsten Abschnitt versehen oder die Gruppen farbig hervorheben.
UDO_index_name	Dieser Klassenname wird für eine <span>-Umgebung verwendet, in der eine Sprungmarke (also ein Buchstabe aus der Sprungmarkenleiste) formatiert werden kann. So können Sie z.B. einen Buchstaben-Abschnitt in einem langen Index größer oder farbig unterlegt hervorheben.
UDO_nav_index	Die Navigationsleiste hat jetzt immer einen Link zur Index-Seite. Der Link wird in einem Span namens UDO_nav_index ausgegeben und kann bequem per CSS z.B. rechtsbündig auf der Seite platziert werden.
UDO_nav_line	Wenn Sie mit !html_navigation [line] eine Navigationszeile nutzen, wird sie in einer <div>-Umgebung mit diesem Klassennamen ausgegeben.

CSS-IDs für HTML allgemein

UDO_menu	Beim Modern Layout wird die Tabelle in der linken Spalte, die das Menü zeigt, mit einer ID namens UDO_menu versehen, so dass das Menü beim Drucken mittels CSS ausgeblendet werden kann.
UDOTOC	Dieser Name wird als Sprungmarke zum Anfang des Inhaltsverzeichnisses verwendet. Bei Ausgabe in HTML 5 wird er als ID verwendet.

Seit UDO 7.03 wird HTML 5 unterstützt, das auf viele früher übliche HTML-Formatierungsangaben verzichtet und erwartet, dass diese über CSS gelöst werden. Die von UDO zur Zeit unterstützten CSS-Attribute werden nachfolgend aufgeführt:

CSS-Klassen für HTML 5

Die nachfolgend aufgeführten Attribute werden immer als entsprechende Klassennamen verwendet und sollten selbsterklärend sein. Alle Klassen beginnen mit UDO_, um Namenskonflikte mit evtl. schon bestehenden CSS-Klassennamen in Ihren Dokumenten zu vermeiden. Anschließend kommen der Tag-Name, das Attribut und die Eigenschaft, jeweils durch Unterstrich getrennt.

UDO_caption_valign_bottom
UDO_div_align_center
UDO_div_align_left
UDO_div_align_right
UDO_h1_align_center
UDO_h2_align_center
UDO_p_align_center
UDO_p_align_right
UDO_span_tt	Da HTML 5 das <tt>-Tag nicht mehr unterstützt, wird es mit einer <span>-Umgebung nachgebildet. Die Formatierung geschieht über CSS.
UDO_td_align_center
UDO_td_align_right
UDO_td_nowrap
UDO_td_valign_top

CSS-IDs

HTML 5 unterstützt bei Ankern nicht mehr das name-Attribut. Daher werden alle Sprungmarken in HTML 5 über IDs erzeugt. Achten Sie darauf, dass Sie eigene IDs in Ihrer CSS-Datei mit den von UDO automatisch vergebenen abgleichen, damit es keine ID-Namenskonflikte gibt.

Beispiel:

Vorher:

<a name="einName">

---

Nachher:

<a id="einName">

CSS-Beispiel für HTML 5

/* UDO HTML5 classes */
.UDO_caption_valign_bottom {
   /* 
    * baseline, sub, super, top, text-top, middle,
    * bottom, text-bottom, length, or a value in percentage
    */
    vertical-align:text-bottom;
}

.UDO_div_align_left {}

.UDO_div_align_center {
   margin-left:auto;
   margin-right:auto;
   text-align:center;
}

.UDO_div_align_right {
   text-align:right;
}

.UDO_span_tt {
        font-size: 16px;
   font-family: Courier, monospace;
        color: #2E4793;
}

.UDO_h1_align_center,
.UDO_h2_align_center,
.UDO_p_align_center,
.UDO_td_align_center {
   /* 
    * left, right, center, justify, inherit
    */
   text-align:center;
}

.UDO_p_align_right,
.UDO_td_align_right {
   /* 
    * left, right, center, justify, inherit
    */
   text-align:right;
}

.UDO_td_nowrap {
   white-space:nowrap;
}

.UDO_td_valign_top {
   /* 
    * baseline, sub, super, top, text-top, middle,
    * bottom, text-bottom, length, or a value in percentage
    */
    vertical-align: top;
}