Horizontals Rule

by Puddin'

Although they look very tidy, they're only decorative elements in HTML, but people often use them as scene separators, a burden they're not meant to carry. Because they have no semantic meaning, they're exactly equivalent to nothing in the syntax of the web.

Amongst the pernicious effects of this logical invisibility, they're inaccessible to many people with vision difficulties, and the many people who archive their favourite stories will be discommoded as well, because the scene breaks will disappear from their purview, whilst the story turns into one endless scene mash-up.

Tricks of the Trade

There are three primary strategies often used in stories to signal scene changes, textual, visual, and some combination of both:

Meanwhile, back at the ranch, Dusty was packing up his bedroll for the long trail ahead…

…is a textual indication. It's a traditional storytelling tool, and needs no special equipment other than an author's voice or pen. Although this particular technique is very terse, it also depends upon the audience knowing that a ranch exists, and is familiar enough with it that they'll have an instant picture of it in their minds. It's often wise to add a few more bits of detail, because every scene should have an immediate presence and reality. It's almost always a mistake to transition between scenes when one scene ends with dialogue and the next begins with dialogue.

"O! what a rogue and peasant slave am I," said Hamlet.

-o~O~o-

"O most pernicious woman! O, villain, villain, smiling, damned villain!" said Hamlet

Even with enough space left to mark a scene change, and decorative indications, the lack of textual confirmation makes the continuity confusing, and may even lead to inadvertent jokes, because the reader can easily lose the context.

Another Trick

Chapter Seven

…is another textual indication. In the verbal storytelling tradition, it might correspond to a musical interlude or even an interval between one night's entertainment and the next. Ideally, a chapter indicates a logical break in the continuity of the story. A "cliffhanger" has been presented, an exciting revelation has been made, or something important has happened. At the end of a chapter, the reader should be very anxious to turn the page, and it ought to mark a significant milestone in the progress of the story.

Because they're so important, stories quite often add special indications as well, printing the chapter title in Bold Face, Larger, SMALL CAPS, and — most importantly — putting extra space between the end of one scene and the next, or even an extra page between one chapter and the next.

White space is very important on the printed page. It helps us see what's important, because our eyes are very finely attuned to variations in brightness and colour. We can see the glint of a panther's eyes in the forest, or the slight variation in the colour of the vegetation that masks a hidden mire. If we didn't have these skills, we would by now be a footnote in some other creature's paleontology books.

Printers have long made use of space to create a pleasing page that's easy for the eye to follow. The reason we hate sentences and words in ALL CAPITAL LETTERS is that there's not enough white space around them. Capital letters are square and ugly, so quickly cloy when there are too many of them. Normal letters go up and down as you read along the line, with ascenders and descenders that might remind you of a wooded meadow, if you could separate your literacy from your aesthetic sensibilities for a moment. Every human writing system uses similar tricks of light and shadow to make characters unique, although some are better at this task than others.

Squint your eyes together for a bit, until the letters on this page start to blur. You'll start to see organic patterns in the blocks of words, rivulets of white space running down through the paragraphs like the pale roots of trees, variations in the horizontal stretch of the lines that make them look a little like earthworms with rings and undulations them make them wriggle with life.

We humans enjoy life. We see living faces in clouds, the outline of dogs or horses in craggy rocks, we recreate life in paintings and drawings using smeared pigments or graphite dust, we make our words live by the way we place them on the page.

In traditional typography, empty space breaks up the page and gives it what typographers call "colour," although the "colour" may be only shades of grey, so it was and is traditional to celebrate that living space by filling the precious emptiness with one or more decorative elements, in older books, usually somewhat elaborate, often explicitly floral or vegetative, and in more modern books simple rules, but the primary indication of the scene break is the extra space, not the decoration meant only to embellish it.

If you glance to your upper right (you may have to scroll a bit), or follow the link, you can see more about using empty space in my essay on Paragraphs.

Poking a horizontal rule between two paragraphs does nothing, unless you create the space that rule is meant to decorate, and in fact the rule itself obscures the white space through partially filling it with typographical colour.

Pellentesque nibh felis, eleifend id, commodo in, interdum vitae, leo. Praesent eu elit. Ut eu ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.

---

Maecenas elementum augue nec nisl. Proin auctor lorem at nibh. Curabitur nulla purus, feugiat id, elementum in, lobortis quis, pede. Vivamus sodales adipiscing sapien.

On BC, you create that extra space using one of the buttons above the edit box — the ninth button — the non-break space, labelled with an underscore: _ . You can also enter it directly: &​#160;

If you place a non-break space on a line by itself, the BC rendering mechanism treats it as if it were an empty paragraph, so leaves a bit of extra space between one line and the next. If you don't use this trick, multiple empty lines will be collapsed into one empty line and your scene break will logically disappear, even if you add a horizontal rule. Here's a similar example with more whitespace added using a non-break space:

Vestibulum posuere nulla eget wisi. Integer volutpat ligula eget enim. Suspendisse vitae arcu. Quisque pellentesque. Nullam consequat, sem vitae rhoncus tristique, mauris nulla fermentum est, bibendum ullamcorper sapien magna et quam. Sed dapibus vehicula odio. Proin bibendum gravida nisl.

 

---

 

Fusce lorem. Phasellus sagittis, nulla in hendrerit laoreet, libero lacus feugiat urna, eget hendrerit pede magna vitae lorem. Praesent mauris.

In the above case, I added even more whitespace by adding a width attribute to the horizontal rule: <hr width="50%" />

The Original Tricks

he old typographical rules for print publications used actual characters instead of lines, quite often stylised vegetation like ivy leaves (the Hedera - ☙ - sometimes improperly labelled a "floral heart"), other "pi" characters, or especially-cast decorative rules. You've seen them, I'm sure. The connection to living vegetation was so strong that they were collectively called "fleurons," from the Old French word for "flower." The stories recently posted by The Professor use especially florid examples, large graphics like this:

 

 

but simpler graphics are possible:

 

 

 

 

The last example uses a particularly pretty character for texts involving ancient times, although it's a modern symbol, the Sheqel symbol ( ₪ ), entered (one at a time) like this: &​#8362;

The Catch

The problem with all these decorative imitations of a printed page, however, is that the Web allows authors to specify the actual construction of a page in very flexible ways. To properly use a horizontal rule, or any decorative separation, they should really be combined with semantic elements meant to carve documents into relevant bits, the "Heading" elements: H1-H6

Like this:

<H1>My Life with George</H1>

<H2>by Bess</H2>

---

<H3>In the Forest</H3>

Lorem ipsum dolor sit amet. Suspendisse vestibulum dignissim quam. Integer vel augue. Phasellus nulla purus, interdum ac, venenatis non, varius rutrum, leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

<H4>☙X❦X❧</H4>

Duis a eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce magna mi, porttitor quis, convallis eget, sodales ac, urna. Phasellus luctus venenatis magna. Vivamus eget lacus. Nunc tincidunt convallis tortor. Duis eros mi, dictum vel, fringilla sit amet, fermentum id, sem.

☙X❦X❧ (H4)

Phasellus nunc enim, faucibus ut, laoreet in, consequat id, metus. Vivamus dignissim. Cras lobortis tempor velit. Phasellus nec diam ac nisl lacinia tristique. Nullam nec metus id mi dictum dignissim. Nullam quis wisi non sem lobortis condimentum. Phasellus pulvinar, nulla non aliquam eleifend, tortor wisi scelerisque felis, in sollicitudin arcu ante lacinia leo.

☙X❦X❧ (H4)

Blah blah blah...

The End (H4)

Of course the "headings" don't have to be words, and can be centred or decorated however one desires, but it will automatically generate a real structure for the document that most web-based tools for the vision-impaired can decode and present in accessible form.

Accessibility

If you use Firefox, you can actually see and make use of these features to help navigate through stories, if the author has included semantic elements. As a trial, start up Firefox — if you're not using it already — and select Accessibility from the top menu bar. Then select through Navigation and then Headings to pop up a navigation box for this page.

Because of the method used to display stories, it will say that there's an error on the page, because there are too many <H1> elements on the page. You can ignore this.

Look down the list in the navigation box and select the line that says: <H1>My Life with George</H1>

You'll notice that the main screen will adjust itself so that this element is highlighted and visible on the screen. You can select any of the other semantic elements and the same thing will happen.

Think of how handy this might be in many situations…

If you were blind and using the JAWS screen reader, this completely non-visual browser would speak the semantic elements aloud, and you could jump to different portions of the document by reacting when a particular element is read by pressing a key. Then, the browser would read the text following that element aloud. With practice, a blind user can navigate through a well-formatted document almost as quickly as a sighted user can.

Access for Everyone

Readers who archive the story for later reading -- perhaps because their Internet access is through a local library -- are able to see the physical characters used to construct the separators, and even primitive screen readers -- like the accessibility text to speech reader built in to your computer operating system -- will say something, even if it isn't clever enough to know what an ivy leaf looks like. The following element, for example, contains "hidden" characters interspersed with the visible decorations that will be pronounced if the screen is read aloud.

☙X❦X❧ (H4)

Here's how it's done:

<blockquote>
<h4 align="center"><big>&​#9753;<font color="#ffffff">X</font>&​#10086;<font color="#ffffff">X</font>&​#10087;</big></h4>
</blockquote>

It uses "Secret" (text with the colour set to white — accessed through the S button, seventh on the row above the edit box. You'll have to manually erase the text that says: {Highlight to read} ) Almost all screen readers will ignore the decorative hedera (ivy leaf) characters, but will pronounce the two X characters, which draws at least some attention to the break in the story flow.

It's not that much extra work, pays big dividends for disabled readers, and can be useful for almost everyone.

Puddin'

You shall not curse the deaf nor place a stumbling block before the blind — Leviticus 19:14

Note: To avoid having some of the code that creates the special characters automatically translated into the characters themselves, I poked a thin-space in between the ampersand and the number portion. This may cause the number to split across line boundaries, and will make it difficult to copy by highlighting it. If you see a space — or possibly a strange character like this: ¿ — between a copied & and a "number sign" or "octothorpe" ( # ) like this: & # with some numbers following after, then a semicolon, the way to fix it is to delete the extra space or strange character. For instance, &¿#160; should have the strange character removed.