CSS Structure

It’s important to understand the internal HTML file structure and styles in order to design your own CSS style for Natural Docs.  If you’re content with the default styles, there’s no need to read this document.

Summary
CSS StructureIt’s important to understand the internal HTML file structure and styles in order to design your own CSS style for Natural Docs.
Diagram ConventionsThe diagrams are designed for clarity.
Page StructureThe body tag is used to distinguish between the types of pages.
Page Styles
Browser StylesNatural Docs pages include JavaScript to detect which browser the user is running and apply styles so that you can work around browser quirks right in the CSS file.
Content StructureAll the topics of a given file is contained in a #Content.
Content Styles
Menu StructureEverything is enclosed in a #Menu.
Menu Styles
Class Hierarchy StructureEverything is contained in a single ClassHierarchy.
Class Hierarchy Styles
Summary StructureEverything is enclosed in a single Summary.
Summary Styles
Prototype StructureEverything is enclosed in a Prototype.
Prototype Styles
Link StructureAll links to symbols have a type style prefixed with L.
Link Styles
Index StructureEverything is enclosed in an #Index.
Index Styles
Search Results StructureThe search results use virtually the same structure and styles as the indexes, except that #SearchResults replaces #Index, there’s a new SRResult style, and there are a few additional SRStatus blocks.
Search Results Styles
Tool Tip StructureTool tips may appear anywhere in the page, mainly because it’s assumed that they will use position: absolute and visibility: hidden.
Tool Tip Styles
Miscellaneous Styles
History
RevisionsHow the page structure has changed throughout the various releases.

Diagram Conventions

The diagrams are designed for clarity.  In the actual HTML, you’d obviously see “<table class=CDescriptionList></table>” instead of “<table CDescriptionList></table CDescriptionList>”.

  • A tag with just a style, for example “CTitle”, means an unspecified element with that class.  Style with .CTitle.
  • A tag that includes a #, for example “#Menu”, means an unspecified element with that ID.  Style with #Menu.
  • A tag that includes a HTML element as well, for example “table CDescriptionList”, means it will always be that element.  You can style with either .CDescriptionList or table.CDescriptionList.
  • A tag that has multiple classes or has an “and” in it, for example “CType and CTopic”, means that both styles will apply to the same element.  You can style it with .CType.CTopic, noting that the space between them must be omitted.
  • A tag that has an “or” in it, for example “#Content or #Index”, is just shorthand for either of those elements.  The diagram applies to both of them but only one will actually appear at a time in the output.
  • A tag or style with a question mark means that tag or style will only be there in certain situations.

Page Structure

The body tag is used to distinguish between the types of pages.

Unframed Content/Index Page

<body ContentPage or IndexPage)>
    [browser styles]

    <#Content or #Index>
        Content or Index
    </#Content or #Index>

    <#Menu>
        Menu
    </#Menu>

    <#Footer>
        Footer
    </#Footer>

    [/browser styles]
</body ContentPage or IndexPage)>

Unframed Search Results Popup Page

<body PopupSearchResultsPage>
    [browser styles]

    <#Index>
        Index
    </#Index>

    [browser styles]
</body PopupSearchResultsPage>

Framed Menu Page

<body FramedMenuPage>
    [browser styles]

    <#Menu>
        Menu
    </#Menu>

    <#Footer>
        Footer
    </#Footer>

    [browser styles]
</body FramedMenuPage>

Framed Content/Index/SearchResults Page

<body FramedContentPage or FramedIndexPage or FramedSearchResultsPage>
    [browser styles]

    <#Content or #Index>
        Content or Index
    </#Content or #Index>

    [browser styles]
</body FramedContentPage or FramedIndexPage or FramedSearchResultsPage>

Page Styles

ContentPageAn unframed content page.
IndexPageAn unframed index page.
PopupSearchResultsPageA search results page for use in a popup iframe.
FramedContentPageA framed content page.
FramedIndexPageA framed index page.
FramedSearchResultsPageA framed search results page.
#FooterThe page footer.  Will be in a framed menu page or on its own in a non-framed page.

See Also

Browser Styles

Natural Docs pages include JavaScript to detect which browser the user is running and apply styles so that you can work around browser quirks right in the CSS file.

The browser type and version styles will be applied immediately after the body tag.  However, neither are guaranteed to be there; the user may have JavaScript turned off or be using a browser that isn’t detected.  These styles should only be used to correct minor flaws and should not be heavily relied on.

<body>
    <browser type>?
        <browser version>?

        Page Content

        <browser version>?
    <browser type>?
</body>

For example, if a CTopic’s style is giving you problems in Internet Explorer 6, override it with .IE6 .CTopic.  If a MTitle’s style gives you a problem in Opera 7 but only in frames, override it with .Framed.Opera7 .MTitle.

Browser Types

If the browser is not one of the types below, neither this nor the browser version will be present.  There’s the possibility that some obscure browser will appear as one of the others by spoofing, but the most prominent of these, Opera, Konqueror, and Safari, are taken care of.

IEInternet Explorer
FirefoxFirefox and anything else based on the Gecko rendering engine.
OperaOpera
SafariSafari
KonquerorKonqueror and anything else based on the KHTML rendering engine except Safari.

Browser Versions

If the browser is not one of the versions below, this style will not be present.  The browser type still may be.

IE6Internet Explorer 6.x.
IE7Internet Explorer 7.x.
Firefox1Firefox 1.0.x and anything else based on Gecko 1.7.x.
Firefox15Firefox 1.5.x and anything else based on Gecko 1.8.0.x.
Firefox2Firefox 2.0.x and anything else based on Gecko 1.8.1.x.
Opera7Opera 7.x.
Opera8Opera 8.x.
Opera9Opera 9.x.
Safari2Safari 2.x.
Safari3Safari 3.x.

Notes

Why not apply them to the body tag itself?  The JavaScript is easy enough and everything supports multiple classes, right?  Because IE 6 doesn’t support multiple selectors so I wouldn’t be able to combine browser and page styles.  .Opera.ContentPage will apply to all ContentPages in IE because it treats it as if only the last class is there.

Content Structure

All the topics of a given file is contained in a #Content.  All other content styles are prefixed with a C.

Surrounding each piece of content is a CTopic and its type; for example, CFunction for a function.  Inside that are the CTitle and if necessary, CBody.  Inside CBody are analogues to all the top-level NDMarkup tags: <h1>, <p>, etc.

In addition to the top-level NDMarkup tags, you also have prototypes, class hierarchies, and summaries which are described in their own sections.

<#Content>

    <CType (CFunction, CVariable, etc.)>
        <CTopic and #MainTopic?>

            <CTitle>
                Topic title
            </CTitle>

            <CBody>

                [Class Hierarchy]

                [Prototype]

                <CHeading>
                    Heading
                <CHeading>

                <p>
                    Paragraph
                </p>

                <pre>
                    Code or text diagram
                </pre>

                <ul>
                    <li>
                        Bullet item
                    </li>
                </ul>

                <CImageCaption>?
                    Caption
                </CImageCaption>?
                <img>

                <a CImageLink>
                    text
                </a CImageLink>

                <table CDescriptionList>
                    <tr>
                        <td CDLEntry>
                            Entry
                        </td CDLEntry>
                        <td CDLDescription>
                            Description
                        </td CDLDescription>
                    </tr>
                </table CDescriptionList>

                [Summary]

           </CBody>

       </CTopic and #MainTopic?>
   </CType (CFunction, CVariable, etc.)>

</#Content>

Take advantange of the CSS inheritance model.  For example, you can style all titles via .CTitle, and you can style specific titles with .CType .CTitle.

Content Styles

#ContentParent element containing all topics.
CTopicAn individual topic.
CTitleThe title of a topic.
CBodyThe body of a topic.  May not exist.
CHeadingSurrounds a heading.
CImageCaptionSurrounds an image caption.
CImageLinkSurrounds a link to an image.
CDescriptionListA description list, which is the type of list you’re reading right now.  Is implemented with a table.
CDLEntryA description list entry, which is the left side.
CDLDescriptionA description list description, which is the right side.
#MainTopicThe ID given to the main topic, which is the first in the file.  It is applied to the CTopic.
CTypeA placeholder for all type-specific styles.  The actual styles will be C followed by the alphanumeric-only topic type name.  So the CType of a “PL/SQL Function” topic will actually be CPLSQLFunction.

Menu Structure

Everything is enclosed in a #Menu.  All other menu styles are prefixed with an M.

The title is an MTitle and will always be at the beginning of the menu if it exists.  If a subtitle exists as well, it will appear as an MSubTitle inside MTitle.  Subtitles aren’t allowed without titles.  Most other entries in the menu are contained in <MEntries>.  Here’s the diagram:

<#Menu>

    <MTitle>
        Menu title

        <MSubTitle>
            Menu sub title
        </MSubTitle>

    </MTitle>

    <MEntry>
        <MFile (and #MSelected?)>
            <a href>File</a href>
        </MFile>
    </MEntry>

    <MEntry>
        <MIndex (and #MSelected?)>
            <a href>File</a href>
        </MIndex>
    </MEntry>

    <MEntry>
        <MText>
            Text
        </MText>
    </MEntry>

    <MEntry>
        <MLink>
            <a href>Link</a href>
        </MLink>
    </MEntry>

    <MEntry>
        <MGroup>
            <a href>Group</a href>
            <MGroupContent>

                (MEntries)

            </MGroupContent>
       </MGroup>
    </MEntry>

    <#MSearchPanel and MSearchPanelActive/Inactive>
        <input #MSeachField>
        <select #MSearchType>
            <option #MSearchEverything>
            <option>
            <option>
        </select #MSearchType>
    </#MSearchPanel and MSearchPanelActive/Inactive>

</#Menu>

(if in unframed HTML)
<#MSearchResultsWindow>

    <iframe #MSearchResults>
    </iframe #MSearchResults>

    <a #MSearchResultsWindowClose>

</#MSearchResultsWindow>

The MFile or MIndex entry that’s currently selected will have the #MSelected ID, so you can reference it in CSS via .MFile#MSelected.

The search panel is has its own ID, #MSearchPanel, but also has one of the classes MSearchPanelActive or MSearchPanelInactive depending on whether any of the controls are selected or the results window is open.  #MSearchResultsWindow is separate because it may be floating.

Menu Styles

#MenuParent element containing the entire menu.
MTitleThe title of the menu.
MSubTitleThe subtitle of the menu.  Will appear within MTitle.
MFileA file entry.
MGroupA group entry.
MGroupContentA container for a MGroup’s content.
MTextA plain text entry.
MLinkAn external link entry.
MIndexAn index entry.
#MSelectedThe ID of the currently selected MFile or MIndex.
MTypeMFile, MGroup, MText, MLink, or MIndex.
#MSearchPanelContains all the search controls.
MSearchPanelActiveApplied to #MSearchPanel when any of the controls are selected or the results window is open.
MSearchPanelInactiveApplied to #MSearchPanel when not in use.
#MSearchFieldThe text input field of the search panel.
#MSearchTypeThe drop down type selector of the search panel.
#MSearchEverythingThe #MSearchType option for the Everything index.
#MSearchResultsWindowContains all the search results elements.
#MSearchResultsContains the iframe that will hold the results.
#MSearchRseultsWindowCloseThe link to manually close the search results window.

Class Hierarchy Structure

Everything is contained in a single ClassHierarchy.  Each entry is surrounded by its type, such as CHParent, and the generic CHEntry.  Depending on the context, entries may be surrounded by one or more CHIndents.

<ClassHierarchy>

    <CHIndent>?

        <CHType>
            <CHEntry>

                <a href>?
                    Entry
                </a href>

            </CHEntry>
        </CHType>

    </CHIndent>?

</ClassHierarchy>

Class Hierarchy Styles

ClassHierarchyThe topmost style containing everything.
CHEntryA generic class entry.
CHParentThe style for a parent class.
CHCurrentThe style for the current class, which is the one the hierarchy is generated for.
CHChildThe style for a child class.
CHChildNoteThe style for when a child is added that just shows how many other children were omitted.
CHIndentA style used to indent a level.
CHTypeCHParent, CHCurrent, CHChild, or CHChildNote.

Summary Structure

Everything is enclosed in a single Summary.  All the other summary styles are prefixed with an S.

STitle holds the actual word “Summary” and SBorder and STable hold the content.  SBorder exists because different browsers apply table padding attributes in different ways.  STable exists as a class to separate the main table from any other tables that may be necessary.  Here’s a diagram:

<Summary>

    <STitle>
        Title
    </STitle>

    <SBorder>
        <table STable>
            ...
        </table STable>
    </SBorder>

</Summary>

On to the table content.

<tr SType and SEntry (and SIndent#?) (and SMarked?)>
    <td SEntry>

        <a href>Entry</a href>

    </td SEntry>
    <td SDescription>

        Description

    </td SDescription>
</tr SType and SEntry (and SIndent#?) (and SMarked?)>

SIndent# exist to allow indenting.  They’re necessary because implementing it as nested tables, while structurally cleaner, won’t allow the desciptions to line up on the right throughout the entire summary.  SMarked will be applied on almost every other row to allow for tinting to improve readability.

Use the power of CSS’s inheritance rules to specify styles.  For example, to set the style of a group entry, apply it to .SGroup .SEntry.  However, you could also apply a style to both the group’s entry and description by applying the style to .SGroup td.  Or, you could apply a style to all the entries by applying it to .SEntry.  And so on.

Summary Styles

SummaryThe topmost style containing the entire summary.
STitleContains the summary title, which is the part that actually says “Summary”.
SBorderSurrounds STable, since some browsers can’t do table padding right.  A hack, I know.
STableThe actual summary table.  This class separates it from other layout tables that may appear.
SMarkedA class applied to rows that should have a slightly different color than the rest of the rows to make them easier to read.
SEntryThe entry (left) side of the table.
SDescriptionThe description (right) side of the table.
SIndent#Surrounding entries and descriptions that are part of a group and need to be indented.  Actual styles will be SIndent1, SIndent2, etc.
STypeA placeholder for all topic-specific styles.  The actual styles will be S followed by the alphanumeric-only topic type name.  So the SType of a “PL/SQL Function” topic will actually be SPLSQLFunction.

Prototype Structure

Everything is enclosed in a Prototype.  All other styles are prefixed with a P.

Parameter Type First Style

For prototypes such as

void Function (unsigned int* a, int b = 0)

where the types come first.

<table Prototype>

    <td PBeforeParameters>
        "void Function ("
    </td PBeforeParameters>

    <td PTypePrefix>
        "unsigned"
    </td PTypePrefix>

    <td PType>
        "int"
    </td PType>

    <td PParameterPrefix>
        "*"
    </td PParameterPrefix>

    <td PParameter>
        "a", "b"
    </td PParameter>

    <td PDefaultValuePrefix>
        "="
    </td PDefaultValuePrefix>

    <td PDefaultValue>
        "0"
    </td PDefaultValue>

    (repeated as necessary)

    <td PAfterParameters>
        ")"
    </td PAfterParameters>

</table Prototype>

Parameter Name First Style

For prototypes such as

function Function (a, b: int; c: int := 0)

where the parameters come first.

<table Prototype>

    <td PBeforeParameters>
        "function Function ("
    </td PBeforeParameters>

    <td PParameter>
        "a,", "b:", "c:"
    </td PParameter>

    <td PType>
        "int"
    </td PType>

    <td PDefaultValuePrefix>
        ":="
    </td PDefaultValuePrefix>

    <td PDefaultValue>
        "0"
    </td PDefaultValue>

    (repeated as necessary)

    <td PAfterParameters>
        ")"
    </td PAfterParameters>

</table Prototype>

Note that any section may not exist.  For example, there will be no PTypePrefix cells generated if none of the parameters have it.

Prototype Styles

PrototypeThe style encompassing the entire prototype.
PBeforeParametersThe part of the prototype that comes before the parameters.
PAfterParametersThe part of the prototype that comes after the parameters.
PTypeThe parameter type.
PTypePrefixThe prefix of a parameter type.
PParameterThe parameter name.
PParameterPrefixThe prefix of a parameter name.
PDefaultValueThe default value expression for a parameter.
PDefaultValuePrefixThe prefix of the default value expression.

Link Structure

All links to symbols have a type style prefixed with L.  The only exceptions are summary entries; summary descriptions use them as well.

<a LType>
    Link
</a LType>

You can use this to make links to different symbols appear in different styles.  For example, making .LClass bold will make all links to classes bold, except when appearing in summary entries.  You can combine this with other styles to be even more specific.  For example, you can apply a style to function links appearing in summary descriptions with .SDescription .LFunction.

Link Styles

LTypeA placeholder for all topic-specific styles.  The actual styles will be L followed by the alphanumeric-only topic type name.  So the LType of a “PL/SQL Function” topic will actually be LPLSQLFunction.

Index Structure

Everything is enclosed in an #Index.  Combine with <Framed> and <Unframed> to distinguish between output formats.  All other index styles are prefixed with an I.

<#Index>

    <IPageTitle>
        Page Title
    </IPageTitle>

    <INavigationBar>
        A - <a href>B</a href> - C ...
    </INavigationBar>

    <table>

        <IHeading>
            Heading (A, B, etc.)
        </IHeading>

        <td ISymbolPrefix>
            Prefix, if any
        </td ISymbolPrefix>

        <td IEntry>
            Entry
        </td IEntry>

        ...

    </table>

</#Index>

Every index entry, including headings, are rows in a table.  The first column of a non-heading are ISymbolPrefixes so that the non-prefix portions align correctly.  The other column are IEntries, of which there are multiple formats, described below.

<a href ISymbol>
    Symbol
</a href ISymbol>,
<IParent>
    Class
</IParent>

<ISymbol>
    Symbol
</ISymbol>
<ISubIndex>
    <a href IParent>
        Class
    </a href IParent>
    ...
</ISubIndex>

<ISymbol>
    Symbol
</ISymbol>
<ISubIndex>
    <IParent>
        Class
    </IParent>
    <ISubIndex>
        <a href IFile>
            File
        </a href IFile>
        ...
    </ISubIndex>
    ...
</ISubIndex>

Each part of the entry is surrounded by its type, which may or may not be a link.  If an entry has more than one defining class or file, they’re broken out into ISubIndexes.

It’s called IParent instead of <IClass> because class entries are ISymbolsIParents are only used when the symbol has a class.  If the symbol is a class, the symbol is global.

Index Styles

#IndexParent element for the entire index.
IPageTitleThe page title.
INavigationBarThe navigation bar.
IHeadingAn index heading, such as the letter for the group.
IEntryAn entry in the index.
ISymbolPrefixThe stripped prefix of the entry.
ISymbolThe entry symbol.
IParentThe entry parent class.  If the entry is a class, this isn’t defined because classes are global and don’t have parent classes.  This is why it’s called IParent instead of IClass; hopefully it’s less confusing.
IFileThe file the entry is defined in.
ISubIndexThe surrounding block if an entry needs to be broken out into a sub-index.
#IFirstHeadingThe ID of the first IHeading to appear in the file.
#IFirstSymbolPrefixThe ID for the first ISymbolPrefix to appear under an IHeading.
#ILastSymbolPrefixThe ID for the last ISymbolPrefix to appear under an IHeading.
#IOnlySymbolPrefixThe ID if there is only one ISymbolPrefix for an IHeading.

Search Results Structure

The search results use virtually the same structure and styles as the indexes, except that #SearchResults replaces #Index, there’s a new SRResult style, and there are a few additional SRStatus blocks.

Visibility

Visibility is very important to making the search work correctly.  JavaScript will handle most of it, but your CSS needs to abide by these rules.

Search Results Styles

#SearchResultsParent element for the entire page.
SRStatusStatus message.  Must be visible by default.
SRResultA result.  All you need to do for this class is set it to display: none.  Nothing else should be set on it.

Tool Tip Structure

Tool tips may appear anywhere in the page, mainly because it’s assumed that they will use position: absolute and visibility: hidden.

The entire tool tip is found in a CToolTip style, with a CType style inside it.  CTypes are normally outside their elements, but that would cause it to be partially visible in this case.  We need CToolTip to be the outermost style so its visibility and position can be manipulated in JavaScript.

Inside there’s a <CPrototype> and/or the description text.  The description text has no special surrounding tags.

<CToolTip>

    <CPrototype>
        Prototype
    </CPrototype>

    Summary text

</CToolTip>

Tool Tip Styles

CToolTipSurrounds the entire tool tip.  This must have position: absolute and visibility: hidden for the tool tip mechanism to work.

See also <CPrototype>.

Miscellaneous Styles

blockquoteThis HTML element should surround anything that needs to be scrolled if it’s too wide, like prototypes and text diagrams.  It’s not a style because this makes it much easier to do the JavaScript necessary to get this working in IE.

History

Revisions

How the page structure has changed throughout the various releases.

1.4

1.33

1.32

  • blockquotes now surround elements that should scroll if they’re too wide for the page.

1.3

1.21

1.2

1.16

  • Changed the first topic from having a CMain type to having a normal type with a #MainTopic ID.

1.1

1.0

  • The CType tags now appear arround the CTopic tags instead of vice versa.
  • Added a CBody tag to surround non-CTitle elements.
  • SMarked now appears in tr’s instead of td’s, where it belonged in the first place.

0.95

  • Added Browser Styles.
  • Redid Page Structure, replacing generic styles like Menu with page type styles like UnframedPage/MenuSection and FramedMenuPage.

0.91

  • Added <LURL> and <LEMail> link styles, since 0.91 added URL and e-mail links.
  • Added <ISection> style, which is better than IHeading floating on its own.

0.9

Parent element containing all topics.
Parent element containing the entire menu.
The topmost style containing everything.
The topmost style containing the entire summary.
The style encompassing the entire prototype.
Parent element for the entire index.
Parent element for the entire page.
A result.
Status message.
The page footer.
An individual topic.
The title of the menu.
The title of a topic.
The body of a topic.
A markup format used by the parser, both internally and in NaturalDocs::Parser::ParsedTopic objects.
The subtitle of the menu.
A file entry.
An index entry.
The ID of the currently selected MFile or MIndex.
Contains all the search controls.
Applied to #MSearchPanel when any of the controls are selected or the results window is open.
Applied to #MSearchPanel when not in use.
Contains all the search results elements.
A group entry.
A plain text entry.
An external link entry.
The drop down type selector of the search panel.
The style for a parent class.
A generic class entry.
A style used to indent a level.
The style for the current class, which is the one the hierarchy is generated for.
The style for a child class.
The style for when a child is added that just shows how many other children were omitted.
Contains the summary title, which is the part that actually says “Summary”.
Surrounds STable, since some browsers can’t do table padding right.
The actual summary table.
Surrounding entries and descriptions that are part of a group and need to be indented.
A class applied to rows that should have a slightly different color than the rest of the rows to make them easier to read.
The prefix of a parameter type.
The stripped prefix of the entry.
An entry in the index.
The surrounding block if an entry needs to be broken out into a sub-index.
The entry parent class.
The entry symbol.
An index heading, such as the letter for the group.
Surrounds the entire tool tip.
An unframed content page.
An unframed index page.
The body tag is used to distinguish between the types of pages.
The ID given to the main topic, which is the first in the file.
A placeholder for all type-specific styles.
Internet Explorer 7.x.
Opera 8.x.
Opera 9.x.
Firefox and anything else based on the Gecko rendering engine.
Firefox 1.0.x and anything else based on Gecko 1.7.x.
Firefox 1.5.x and anything else based on Gecko 1.8.0.x.
Firefox 2.0.x and anything else based on Gecko 1.8.1.x.
Safari
Safari 2.x.
Safari 3.x.
Konqueror and anything else based on the KHTML rendering engine except Safari.
Surrounds an image caption.
Surrounds a link to an image.
The search results use virtually the same structure and styles as the indexes, except that #SearchResults replaces #Index, there’s a new SRResult style, and there are a few additional SRStatus blocks.
A framed search results page.
The entry (left) side of the table.
The description (right) side of the table.
A placeholder for all topic-specific styles.
The prefix of the default value expression.
This HTML element should surround anything that needs to be scrolled if it’s too wide, like prototypes and text diagrams.
Everything is enclosed in a Prototype.
A placeholder for all topic-specific styles.
The configuration file that defines or overrides the topic definitions for Natural Docs.
The ID of the first IHeading to appear in the file.
Property TopicType.
Constant TopicType.
Type TopicType.
Natural Docs pages include JavaScript to detect which browser the user is running and apply styles so that you can work around browser quirks right in the CSS file.
Close