Site Map Links Contact

Macro-Typography of Deeds: 7

Collapse and Expand

Collapsed and expanded views of the files and directories on your computer are one of the most powerful features of the "graphic user interface" (the way a Windows or Mac computer makes information visual). Collapse-expand is an example of a pattern of interaction between the user and the information that guru Jenifer Tidwell calls "optional detail on demand". It's as easy as switching on and switching off a light: one click and you have all the detail. Click back and you have just the essentials.

Miraculous as it may sound, it is quite easy to make a document expand and collapse in a visual browser. The dull two-thirds of a document can be concealed and only the essential one-third displayed until the reader says, "I want to see it all now."

The secret is a technology called style-sheet switching and requires just a little snippet of code which I will share with you below. The only hard work is the initial structuring of the information: the editor must go through the text and choose the essential items in the document worth abstracting, and mark off all the rest.

Here is how this is done. Sometimes it will only be a few words or phrases of waffle in mid-sentence that are non-essential and can be hidden in the collapsed view. In the case of a will, we may only want to see the names and nothing else. The unwanted, so-called inline sections of the text should be enclosed in <SPAN> tags. The span can be given some kind of descriptive class name, for example "vanish". Here is an example:

<li class="person"><span class="vanish">And I give to </span>my Nephew Stephen Hempsted of Market Ilstey in the County of Berks Surgeon<span class="vanish"> my Silver Tankard (being Family Plate)</span></li>

Now we can define what happens to any text of class "vanish". CSS allows us to style it with the display attribute set to "none". This means it will not appear on the web page. Non-display means all the other material closes up to fill the gap as if the non-displayed text had never existed. And that is precisely what the abstract view of the transcript is. The style code looks like this:
.vanish {display: none;}

It is not just inline sections that can be hidden. Entire block-level elements can be set to non-display too: the browser can be forced to not display a list item, including its bullet, if that element is placed in the "vanish" class. Suppose for example that we have the <LI> elements marked up like this: <LI class="person">I give to my said Grandson George Alefounder all the rest and residue of my Personal Estate</LI> To remove any of the LI elements from the flow, simply add another class after a space, like this: <LI class="person vanish">I give to my said Grandson George Alefounder all the rest and residue of my Personal Estate</LI>

1 2 3 4 5 6 7 8 9

Examples: • HeadingsTwo Sub-HeadingsThree Sub-HeadingsThe Core as ListSingle-Item ListExpanding TextRun-In HeadingsCompilationVariation

Creative Commons License Piggin.Net Macro-Typography by Jean-Baptiste Piggin is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.