Styling Aras Tech Docs: Numbering Content

Styling Aras Tech Docs: Numbering Content

The Aras Technical Documentation application provides a powerful framework for defining highly structured document types and styling document content. In this article we'll explore one of the many ways that we can customize the document schema (structure) and stylesheet together to present content in an organized and attractive manner.

Getting Started

Aras Technical Documentation is available to all Aras users - both Aras subscribers and Aras open community users. If you haven't installed Tech Docs before, you'll need to download the Aras Update utility from the Downloads & Support page on the Aras website. Once you've downloaded and installed the Aras Update utility, you can use it to install Aras Technical Documentation in a few easy clicks.

installing_td

 

Tip: If you run into issues installing Technical Documentation from the online package, try downloading the package and installing Tech Docs from the local copy.

Optional Setup

The screenshots in this article show Technical Documents that have been styled with a custom stylesheet. If you would like to use the same style for your document content, you can append the following CSS to your Document Type stylesheet.

Numbering Section Titles

Auto-numbered section titles in an Aras Technical Document

Auto-numbered section titles in an Aras Technical Document

Many documents use numbered section headings to organize content and provide structure to the document. While the document author could manually enter numbers or for each section, it's not optimal. Instead, we can use the Document Type's stylesheet to number the section titles automatically. For this task we'll use CSS counters, which can be incremented similar to variables in a loop. You can read more about CSS counters here.

The following CSS will initialize a counter, then increment the counter and display its value before the title for each section element in the document. The counter shown here uses the upper-alpha style, but we could easily use another predefined style. The counter() function accepts style parameters such as integers, Roman numerals, etc.

Numbering Section Child Elements

Auto-numbered section titles and subtitles Auto-numbered section titles and subtitles

Now that we've seen how we can use CSS counters to number section titles, we can apply the same technique to child elements within a section. This sample code modifies the Document Type schema to allow subtitle elements in a section element. The updated CSS below adds a new CSS counter "subtitleNum" that counts the subtitles within a section. The counter then resets when it encounters a new section element.

Looking For More Tech Tips?

Subscribe to our blog and follow @ArasLabs on Twitter for more helpful content! You can also find our latest open-source projects and sample code on the Aras Labs GitHub page.