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.2/ih_style.html.