Categories

A sample text widget

Etiam pulvinar consectetur dolor sed malesuada. Ut convallis euismod dolor nec pretium. Nunc ut tristique massa.

Nam sodales mi vitae dolor ullamcorper et vulputate enim accumsan. Morbi orci magna, tincidunt vitae molestie nec, molestie at mi. Nulla nulla lorem, suscipit in posuere in, interdum non magna.

Web Development

The use of the non-breaking space in HTML

Good post? Please, share it...
Pin It

A poet friend of mine wants to publish a poem, written by a colleague of his, who has passed away, recently, as a tribute to him.

they followed the leader into the mountains
sat at his feet in a Swiss canton
                      as they decayed
                               like rotting fish

and he looked at them
and said:
               turn off the ventriloquist's voice
               flush out the snakeoil in the blood
                  your bible
                      your gita
                          your gems
                              your guns
                                  your flags
                                      your death

and at night they went to the nite clubs gobbling and soaking
up the suds
while that thing
between the legs
became
            more urgent
they dished up the cold turkey
of what he had said
        and nobody felt too good
                  nobody felt

so they took the train the limousine the rucksack
and went back home

    next year
they followed him to India
and again he looked at them
and said:
                follow no leader
                                     guru
            nobody is living
            everybody is dead
and again he told them
                                   told them

and again that thing
between the legs
            and between the ears
                         got in the way

“Follow No Leader” – Harold Norse (his poem on Krishnamurti)

The problem is that it requires a complex staggered indentation, where the lines are all indented differently, depending upon the context, in the poem.

One cannot use normal spaces in HTML, because it renders any number of adjacent spaces, as if they were a single space. Therefore, I have advised using the non-breaking space option.

This is how it’s done:

There is an HTML element called ‘non-breaking space’. It’s written like this:  

What this does is to insert a space that is not counted as a normal space, but is always treated as a real space.

As I explained, a normal space, when repeated, is just treated as a single space. However, a non-breaking space is treated literally. Therefore, a succession of non-breaking spaces (e.g.               ) is treated as multiple spaces.

‘This is a          ┬ácat’ is rendered in HTML as ‘This is a cat’. However, ‘This is a           cat’ is rendered as ‘This is a           cat’.

With regard to the actual spaces in this: you will notice that between ‘a’ and the first ‘ ’ there is an actual space. Also between each of the ‘ ’s there is a space. There is also one at the end. Therefore there are 6 actual spaces and 5 ‘ ’s.

Since the actual spaces are rendered in HTML as a single space, the above bit is rendered with 6 spaces, even though there are only 5 ‘ ’s.

Also,  the whole thing, including image and caption, should be enclosed in a < blockquote > < /blockquote > tag.

To understand how the< blockquote > < /blockquote > tag works, see: http://www.w3schools.com/TAGS/tag_blockquote.asp

N.B. Like any tag, the blockquote can also be styled to create any special effect, if you want (e.g. a different font, font color, background image or color etc.). This requires some knowledge of CSS styling, which can be learned at http://w3schools.com.

This is the entire poem, excluding the image and its caption, in HTML:

N.B. The < br / > tag is used to start a new line and the < p > < /p > tag separates verses.

Spaces have been added to these tags, so that they render here as text rather than HTML. If you want to use this code, you must remove these spaces.


< p >they followed the leader into the mountains< br / > sat at his feet in a Swiss canton< br / >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; as they decayed< br / >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; like rotting fish< /p >
< p >and he looked at them< br / > and said:< br / >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; turn off the ventriloquist&#39;s voice&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; flush out the snakeoil in the blood< br / >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; your bible< br / >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; your gita< br / >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; your gems< br / >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; your guns< br / >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; your flags< br / >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; your death< /p > and at night they went to the nite clubs gobbling and soaking< br / > up the suds< br / > while that thing< br / > between the legs< br / > became< br / >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; more urgent< br / > they dished up the cold turkey< br / > of what he had said< br / > &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; and nobody felt too good< br / >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; nobody felt< /p >< p >so they took the train the limousine the rucksack< br / >and went back home< /p >< p >&nbsp;&nbsp;&nbsp; next year< br / > they followed him to India< br / > and again he looked at them< br / > and said:< br / >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; follow no leader< br / >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; guru< br / >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; nobody is living< br / >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; everybody is dead< br / > and again he told them < br / >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; told them< /p >< p >and again that thing< br / > between the legs< br / >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; and between the ears< br / >< br / >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &nbsp; got in the way< /p >

To understand character entities in HTML, i.e. special characters that start with ‘&’ and end with ‘;’, such as ‘&nbsp;’, see: W3C Schools

To quote from that page:

The most common character entity in HTML is the non-breaking space.

Normally HTML will truncate spaces in your text. If you write 10 spaces in your text HTML will remove 9 of them. To add lots of spaces to your text, use the &nbsp; character entity.

2 comments to The use of the non-breaking space in HTML

Leave a Reply

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

  

  

  

This site uses Akismet to reduce spam. Learn how your comment data is processed.