Practical Series Automation Library

Blank Webpage Template

98

98Blank page

Placeholder

This section is used as the start of a chapter, it has a thin line above and an optional side heading.

Chapters with only a thin line do not have a heading (the heading is set in the title section — usually level h2), a nominal h6 level (h6 headings do not display) is also given to satisfy HTML validation requirements (sections must contain a heading element).

If a side heading is used, this will have an h2 heading level.

Placeholder

It can also be in a sans-serif font

Chapters with only a thin line do not have a heading (the heading is set in the title section — usually level h2), a nominal h6 level (h6 headings do not display) is also given to satisfy HTML validation requirements (sections must contain a heading element).

If a side heading is used, this will have an h2 heading level.

98.1

Section

This is a typical section, it will be numbered X.Y.

Sections have an h2 heading level.

98.1.1

Subsection

This is a typical subsection, it will be numbered X.Y.Z.

Subsections have an h3 heading level.

Inline section

This is an inline section, it has no number but does appy emphasis to a distinct section of text

Inline sections have an h4 heading level.

This is an additional section row it follows any section and allows additional sidebars to be used and aligned with the top of the row text.

additional section rows are constructed with <div> elements (rather than <section> elements and consequently do not require a heading).

As many additional section rows can be added as are needed.

98.2

Common examples

Numbered list

  1. EntryA

  2. EntryB

Unnumbered list

  • EntryA

  • EntryB

Hanging indent (note)

  • Supernatant is the water in the settling tank that sits above the sediment, this is decanted and returned to the works inlet for treatment.
  • First paragraph with note and hanging indent

Second paragraph without the note inidcator

Links

External link: Practical Typography:

Internal link to a point on another page: Section 99.3:

Internal link to a point on the same page: Figure 98.1:

Tables & footnotes

Standard table:

Area Name Purpose
1 Filter1 DescriptionNoBorder
2 Filter2 DescriptionBorder
Table 98.1   StandardTable


Dense table:

Symbol Address Rack/slot Card Signal Range Description
PM001_RUNNING I00_0 1_104 32xDI 24VDC 0_1 InletPumpRunning
PM001_HEALTHY I00_1 1_104 32xDI 24VDC 0_1 InletPumpHealthy
Table 98.2   DenseTable


Incidental table:

Incidental Table Heading

Word has a couple of undocumented features; just type =lorem() on a blank line and hit enter to get lorem ipsum padding text (add a number between the brackets to get that many lines of lorem ipsum)..


Basic footnote†1:

†1 Footnotes usually provide additional information or references for particular items in the main body of the text — bibliographical information, clarification etc.

Footnote with additional paragraph†1:

†1 Footnotes usually provide additional information or references for particular items in the main body of the text — bibliographical information, clarification etc.
Additional paragraph here.

Multiple†1 footnotes†2:

†1 This is the first footnote
†2 This is the second footnote

Lightbox figures

Figure 98.1 - SingleFullWidth
Figure 98.1   SingleFullWidth
Figure 98.2 - HalfWidth
Figure 98.2   HalfWidth
Figure 98.3 - HalfWidth
Figure 98.3   HalfWidth
Figure 98.4 - OneThirdWidth
Figure 98.4   OneThirdWidth
Figure 98.5 - OneThirdWidth
Figure 98.5   OneThirdWidth
Figure 98.6 - OneThirdWidth
Figure 98.6   OneThirdWidth
Figure 98.7 - ThirdWidth
Figure 98.7   OneThirdWidth
Figure 98.8 - TwoThirdsWidth
Figure 98.8   TwoThirdsWidth

Code fragments

Standard HTML - line numbers, no wrap:

html
<nav>                            <!-- TOP NAVIGATION BAR -->
    <div class="top-nav">
        <div class="rg-row">
            <a class="nav-wide" href="#">Prev. section</a>
        </div>
    </div>
</nav>                            <!-- END OF TOP NAVIGATION -->
Code 98.1   CodeCaption

Standard HTML - forced line numbers, wrap and download:

index.html
<p class="main-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </p>

            <div class="side-area">
                <div class="side-box">
                    First side bar entry
                </div>
            </div>
Code 98.2   CodeCaption — download link a

Standard CSS - forced line numbers, wrap and download:

css
.list-num {                     /* TEXT STYLE - Numbered list */
    font-family: "conc-i3-r";
    margin-left: 5rem;
}
.list-num li p {
    font-family: "eqty-ta-r";
    padding-left: 1rem;
    margin-bottom: 0.85rem;
}
Code 98.3 — CodeCaption

Fixed height - line numbers and no wrap:

html
<nav>                            <!-- TOP NAVIGATION BAR -->
    <div class="top-nav">
        <div class="rg-row">
            <a class="nav-wide" href="#"><span class="top-nav-icon">l</span><span class="top-nav-text">Prev. section</span></a>
            <a class="nav-wide" href="#"><span class="top-nav-icon">u</span><span class="top-nav-text">Prev. chapter</span></a>
            <a class="nav-wide nav-home" href="#"><span class="top-nav-text">Home</span><span class="top-nav-icon">h</span></a>
Code 98.4 — CodeCaption

HTML text wrapping and false numbering and shading
(see codeline.css):

index.html
<p class="main-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
            </div>
           
            <div class="side-area">
                <div class="side-box">
                    First side bar entry
                </div>
                <div class="side-box">
                    Second side bar entry
                </div>
                <div class="side-box">
                    Third side bar entry
                </div>
            </div>
           
            <div class="clearfix"></div>
Code 98.5 — CodeCaption

Simple - single line

<div class="top-nav"></div>

Simple - multiple lines:

<div class="top-nav"></div>
<div class="top-nav"></div>
<div class="top-nav"></div>

Inline code fragment:

An inline <div class="top-nav"></div> code fragment.

Formula

Full formula arrangement:

Equation Header
`sum_(i=1)^n i^3=((n(n+1))/2)^2`
(98.1)
EquCaption

Simple formula arrangement:

`x=(-b +- sqrt(b^2 – 4ac))/(2a)`

Full formula arrangement with background colour:

Equation Header
`f(a) = 1/(2pii) oint_gamma f(z)/(z-a)dz`
(98.3)
Equation caption

Simple formula arrangement with background colour:

`x=(-b +- sqrt(b^2 – 4ac))/(2a)`
(98.4)

Inline equations `f(a) = 1/(2pii) oint f(z)/(z-a)dz` are possibe too.

Inline styles

  em — Emphasis Italic

  emph — EmphasisBold

  all-caps — AllCaps

  code — Code

  first-use — FirstUseItalic

  index — Index10111213

  in-head — InTextHeading

  menu — Menu

  mono — MonotypeFont

  notice — Notice

  red — Red

  lorum — faint text

  sans — SansSerif

  sans-b — SansSerifBold

  serif — Serif

  serif-b — SerifBold

  sml-caps-ns — SmallCapsSansSerif

  sml-caps-s — SmallCapsSerif

Additional PAL inline styles

  abs — absolute signals

  signal — connection signals

  block — block names

  tia — general TIA font usage

  tia-em — emphasised TIA font usage



End flourish image