HTML markup with CSS

Since UDO 7 more attributes are written in the HTML output, which can be formatted via CSS.

CSS classes for HTML in general

UDO_index_list	This class name is used in a <div> environment which formats the jump marks bar (A-Z) in the indexudo page.
UDO_index_group	This class name is used in a <p> environment which contains all index entries for a jump mark, which stands for a letter or character. This way you can e.g. separate a letter's group in a long index page to the next section, or you can mark up the groups with color.
UDO_index_name	This class name is used in a <span> environment in which the jump mark (i.e. a letter or character from the jump marks bar) can be formatted. This way you can e.g. enlarge a letter in front of a letter's group or add a colored background.
UDO_nav_index	The navigation bar now always has a link to the index page. The link is output in a <span> environment with the class name UDO_nav_index and therefore can be easily right-adjusted on the page via CSS.
UDO_nav_line	When you use a navigation bar with !html_navigation [line], it will be output in a <div> environment with this class name.

CSS IDs for HTML in general

UDO_menu	The table which shows the menu in the left column of Modern Layout, now has an ID named UDO_menu. You might e.g. want to hide it via CSS for print output, etc.
UDOTOC	This name is used as jump mark to the start of the table of contents . When output into HTML 5, it will be used as an ID.

Since UDO 7.03, HTML 5 is supported, which no longer supports some formerly usual HTML formattings and expects to rebuild these in CSS. The CSS attributes which are currently supported by UDO, are listed below:

CSS classes for HTML 5

The following attributes are always uses as class names and should be self-explanatory. All classes start with UDO_ in order to avoid name conflicts with eventually already existing CSS class names in your documents. Then follows the tag name, the attribute and the property, each of them separated by an underscore.

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	Because HTML 5 no longer supports the <tt> tag, we rebuild it with a <span> environment. Formatting is done via CSS.
UDO_td_align_center
UDO_td_align_right
UDO_td_nowrap
UDO_td_valign_top

CSS-IDs

HTML 5 no longer supports the name attribute for anchors. Therefore all jump marks in HTML 5 are realized with IDs. Please control that your own IDs in your CSS file do not cause any conflict with those which are automatically generated by UDO.

Example:

Before:

<a name="aName">

---

Afterwards:

<a id="aName">

CSS example for 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;
}