Tabbed content in DITA content - Fluid Topics - Latest

DITA Connector Reference Guide

Category
Reference Guides
Audience
public
Version
Latest

The DITA connector can convert definition lists (<dl>) into tabbed content in the Reader page.

Since conversion is not automatic, it is necessary to explicitly enable it by adding the outputclass="ft-tabs" attribute to the targeted elements. The DITA connector then interprets the attribute by converting the entries into tabbed content.

For tab titles, the connector supports all UTF-8 characters in any supported content language.

Example:

<dl>
    <dlentry>
        <dt outputclass="ft-tabs">Windows</dt>
        <dd>
            <ol>
                <li>Select the <uicontrol>Start</uicontrol> button.</li>
                <li>Select the <uicontrol>Power</uicontrol> button.</li>
                <li>Select <uicontrol>Shut down</uicontrol>.</li>
            </ol>
        </dd>
    </dlentry>
    <dlentry>
        <dt outputclass="ft-tabs">MacOS</dt>
        <dd>
            <ol>
                <li>Select the <uicontrol>Apple menu</uicontrol>.</li>
                <li>Select <uicontrol>Shut Down</uicontrol>.</li>
            </ol>
        </dd>
    </dlentry>
</dl>

Fluid Topics transforms the previous example into:

  1. Select the Start button.
  2. Select the Power button.
  3. Select Shut down.
  1. Select the Apple menu.
  2. Select Shut Down.