Formatting Rich Text Fields

You can modify the appearance of rich text fields (basic fields with the MIME type application/xhmtl+xml) using ui:style elements in the same way as other fields. In this case, however, since the field contains XHTML, you can make full use of CSS to control the layout and appearance of the field content. You can, for example, supply a full-scale CSS file that to some extent mimics the appearance of the published content.

The following example shows a body field definition with CSS defining a nice table layout:

<field name="body" mime-type="application/xhtml+xml" type="basic">
  <ui:label>Body</ui:label>
  <ui:layout rows="10" cols="40"/>
  <ui:style>
    body {
        font-size: 20px;
        font-family: Georgia, Times-Roman, serif;
        width: 100%;
        border-collapse: collapse;
    }
    table {
        font-family: Arial, Helvetica, sans-serif;
    }
    td {
        text-align: left;
        border: 1px solid #98bf21;
    }
    th {
        font-family: "Arial Black";
        font-size: 24px;
        text-align: left;
        padding: 10px 10px 10px 10px;
        background-color: #A7C942;
        color: #ffffff;
    }
    tr:nth-child(even) td {
        color: #000000;
        background-color: #EAF2D3;
    }        
  </ui:style>
</field>

The result looks like this:

For further information and additional examples, see /ece-resource-ref/6.7/ih_style.html.