Infogrid Pacific-The Science of Information


F5: Section Title Blocks

HTML5 Updates: 2011-05-31

Sections generally use title blocks, but this is not mandatory. However if a section is identified as being valuable in reuse it should always contain a title-block even if it is not displayed or only contains metadata.

The default FX title-block-rw structure is shown here.

<div class=“title-block-rw”>
    <p class="title-num-rw">  ...  </p>
    <h1>Section Title</h1>
    <p class="title-sub-rw">  ...  </p>
    <p class="title-author-rw">  ...  </p>
    <p class="title-creator-rw">  ...  </p>
    <p class="title-other-rw">  ...  </p>
  1. The elements may be in any sequence
  2. If title block is used it must contain at least one of  title-num-rw or <h1>.
  3. Any other FX block or paragraph can be inserted into title-block-rw as long as it has its own class properties. For example block-rw epigraph-rw, and line-rw decoration-rw.
  4. title-block-rw can contain any other valid tagging pattern. Eg: epigraph-rw

The standard title-block may need to be extended for publications of various types. Candidates elements are items such as reference numbers, dates of various types, and other semantic elements.

/* ================================ */
.title-block-rw { 
  margin: 1em 0 1em 0; 
  padding: 2em 0 2em 0; 
  border-top: 1px solid rgb(0,0,0); 
  border-bottom: 1px solid rgb(0,0,0); 
.title-block-rw h1, .title-block-rw .title-sub-rw, 
.title-block-rw .title-num-rw, .title-block-rw .title-author-rw, 
.title-block-rw .title-contributor-rw, .title-block-rw .title-other-rw { 
  font-family: sans-serif; 
  font-weight: normal; 
  text-align: left; 
  text-indent: 0; margin: 0; 
.title-block-rw h1 { 
  font-size: 1.5em; 
  line-height: 1.6em; 
  font-weight: bold; 
  padding: 0 0 0.5em 0; 
  color: rgb(0,0,128); 
.title-block-rw .title-sub-rw { 
  font-size: 1.25em; 
  padding: 0 0 1em 0; 
.title-block-rw .title-num-rw { 
  font-weight: bold; 
  font-style: normal; 
  padding: 0 0 0.5em 0; 
  color: rgb(128,128,128); 
.title-block-rw .title-author-rw, 
div.title-block-rw .title-contributor-rw { 
  font-size: 1.25em; 
  font-weight: normal; 
  font-style: italic; 
  padding: 0  0 0.5em 0; 
.title-block-rw .title-other-rw { 
  font-size: 0.9em; 
  padding: 1em 0 0.5em 0; 
  color: rgb(0,0,128); 

In our book, we are only using <h1> in the preface (and other frontmatter) section title block. So we only need to give <h1> specific styling and don't have to worry about all the other elements. 

/* ================================ */
/* Preface Style */
.Preface .title-block-rw h1{ 
  font-size: 2em; 
  line-height: 2.3em; 
  font-weight: bold; 
  padding: 0 0 0.5em 0; 
  color: rgb(255,0,0); 
This small CSS fragment uses the power of inheritance (or cascading) to change just <h1> where it appears in a title-block in the preface. Here we have increased the font size, and made it red. Of course you could do many other things such as change the bodytext other attributes.

Other Document Section Structures

There are many other types of documents which have their own contextual grammar for section breakdown. The physical layout of these can also be considerably different from a book. An article in an academic work, magazine and newspaper are all quite different in scope, size, complexity and purpose.

Following are some major document types and their document sections. Many of these are significantly different to books and do not represent page breaks.

Periodicals (Magazines & Newspapers)

Periodicals have the following primary structures, departments, columns, articles and advertisements. Columns and articles are of many types and often have content blocks that continue on different pages.

They have difficult to handle structures such as

  • Page-rw
  • Section-rw
  • SectionContinued-rw
  • Article-rw
  • ArticleContinued-rw
  • Column-rw
  • ColumnContinued-rw
  • advertisement

This list can be extended to include specific named sections and content blocks such as departments, classifieds (which should be able to go seamlessly in and out of a database), and of course the cartoon section!

The title block tagging includes metadata-like information about the parent document to allow the article to stand-alone and still provide some source context. If more information is required a metadata-block should be inserted.

The standard title-block selectors can also be used if the correct semantic applies

<!-- ================================ -->
<div class="title-block-rw">
    <p class="title-num-rw">12</p>
    <h1>Article Title</h1>
    <p class="title-sub-rw">Sub-title</p>
    <p class="title-abstract-rw">Article opening blurb</p>
    <p class="title-article-type-rw">Feature, Section, Column, etc</p>
    <p class="title-section-name-rw">How to Live</p>
    <p class="title-pub-nos-rw">12334</p>
    <p class="title-pub-title-rw">Magazine Name</p>
    <p class="title-pub-date-rw">October 2012</p>
   <p class="title-author-rw">First author in sequence </p>
    <p class="title-author-info-rw">References </p>
    <p class="author-rw">Second author in sequence</p>
    <p class="author-info-rw">References </p>
    <p class="title-other-rw">Any other content</p>

Historical Manuscripts

Manuscripts may or may not be turned into text. Where the source document is maintained as an image, the metadata tools of FX can be used effectively to create preliminary and expanding metadata about a document image. Metadata is very important in this work as often there is no text involved or the text is not easily extracted, and certainly not with OCR. Examples include hand-written manuscripts in many languages and on many different physical mediums such as palm leaves and scrolls.

  • covers
  • folio
  • Item

Business Documents

Commercial documents can have parts, but generally don't have chapters. They contain sections and topics which are often arbitrary, author defined section types.

  • title-page
  • document-control
  • Contents
  • body
  • topic
  • section
  • appendix
  • references

Legal documents

Legal documents do not break down into a significant number of parts. They are similar in style to corporate documents,but have some significant internal structures that can be beneficially maintained in template format. Many contracts can be highly repetitive and strictly maintained (such as the IGP Reseller agreement or various software licenses). Maintaining these in template form is very beneficial, productive and ensures there is no dilution or un-warranted modification of essential clauses.

  • Parties
  • recitals
  • body
  • signatures
  • Schedules, Appendices

Marketing documents (brochures)

Templated documents may not be ideal for "creative" Marcom. It can be very powerful when used with repetitive marcom that uses and reuses similar specification items.

  • outside-front
  • outside-back
  • inside-left
  • inside-right
  • inside
  • branding-block
  • product-block
  • contact-block

Learning Collateral

This is a massive set of information which utilizes features of documents and more formal publications such as books.

  • Unit
  • Topic
  • lesson
  • lesson-plan
  • assignment-requirement
  • assignment
  • Self-study

Social Web

  • Web-page-flat
  • blog-page
  • forum-thread-items
  • wiki-page

Each of these content domains is a specialist area in themselves. But all of them can be treated with a considered XHTML strategy with appropriate metadata, and still be able to interface with specific domain standards. Just some interchange standards that can be easily processed from FX are:

NewML - News Markup Language

NITF - News Industry Text Format

EAD - Electronic Archive Description Language

METS - Metadata for Encoding and Transmission Standard

Using Document Section Inheritance

Each document section is a container with inheritable properties. That means all content inside a section can be processed independently of other sections, even though the content structures are similar. A strong example of block inheritance is the title block.

<div class=“galley-rw”>
  <div class= “frontmatter-rw Preface-rw">
     <div class="title-block-rw">
     <p>  ...  </p>
It is now relatively easy to target the title block for either frontmatter styling, or precise Preface styling in a particular template or book instance. Additional and different styles can be applied for e-book formats or other outputs.
<div class=“galley-rw”>
  <div class= “frontmatter-rw Preface-rw">
     <div class="title-block-rw">
     <p>  ...  </p>

This approach allows the change of a single selector value to enable content reuse.   

comments powered by Disqus