Science Library - free educational site

Text Formatting

In HTML5, the default character encoding is UTF-8, replacing the HTML 4.01 ISO-8859-1 standard, and Window's ANSI (ISO-8859-1 with 32 extra characters). All standards prior to Unicode were limited and contained a cultural/linguistic bias, not suitable to multilingual environments.

The Unicode Standard is default for HTML5, and covers all the characters, punctuations and symbols in the world.

Conclusion: use HTML5 and Unicode! accept-charset does not need to be declared specifically.

UTF-8 and UTF-16

UTF-8 is a standard which covers all characters, punctuation marks and symbols, of all languages. Each character is 1-4 bytes long. It is backwards compatible with previous standards, such as ASCII (the ye olde 256 character code from the card-punching age).

UTF-16 is a 'Transformation Format'. This is a variable-length character encoding, and is used in operating systems (Windows, .NET, Java).

Compatibility: HTML4 supports UTF-8 only. HTML5 supports both UTF-8 and UTF-16.

the <pre> tag

Sometimes it is desired to override the HTML default layout rules. For example, a double space in the code is interpreted as a single space, and a line break as an 'Enter' key stroke in the code is ignored.

To compel HTML to interpret all strokes, the <pre> tag is used:

<pre>

n = 0          1

n = 1         1   1

n = 2       1   2   1

n = 3      1   3   3   1

n = 4    1   4   6   4   1

n = 5   1   5   10   10   5   1

</pre>

The code in the example above is entered in the text editor with carriage spaces and enter returns for line breaks. Without the <pre> tags, the above code results in:

n = 0 1 n = 1 1 1 n = 2 1 2 1 n = 3 1 3 3 1 n = 4 1 4 6 4 1 n = 5 1 5 10 10 5 1

With the <pre>, the above code results in:

n = 0               1     
n = 1            1     1
n = 2         1     2     1
n = 3      1     3     3     1
n = 4    1    4     6     4     1
n = 5  1   5     10    10    5     1

Vertical align

To align text vertically, use the CSS3 property vertical-align. The old HTML property valign is not supported by HTML5. However, it is still less simple to use than horizontal alignment. The best results can be obtained by adding display:table-cell; to the elements CSS properties.

  • display:table-cell;vertical-align: baseline;
  • default, aligns to the baseline of parent element

  • display:table-cell;vertical-align: length;
  • displacement vertically by specified positive or negative amount

  • display:table-cell;vertical-align: x%;
  • displacement vertically by specified positive or negative percentage of height of parent element

  • display:table-cell;vertical-align: sub;
  • displaces text downwards as if it were a subscript (half line-height)

  • display:table-cell;vertical-align: super;
  • displaces text upwards as if it were a superscript (half line-height)

  • display:table-cell;vertical-align: top;
  • aligns to the top of the parent element

  • display:table-cell;vertical-align: middle;
  • aligns to the middle of the parent element

  • display:table-cell;vertical-align: bottom;
  • default aligns to the bottom of the parent element

  • display:table-cell;vertical-align: text-top;
  • aligns to the top of a text block

  • display:table-cell;vertical-align: text-bottom;
  • aligns to the bottom of a text block

  • display:table-cell;vertical-align: initial;
  • specifies start of alignment

  • display:table-cell;vertical-align: inherit;
  • whatever the parent element uses as alignment

Inline vertical alignment can also be achieved by using display:inline-block; vertical-align:middle;.

To align an element within a fixed size parent element (like a box), just use position:absolute; top:50%;.

Content © Andrew Bone. All rights reserved. Created : November 6, 2014 Last updated :October 3, 2015

Latest Item on Science Library:

The most recent article is:

Air Resistance and Terminal Velocity

View this item in the topic:

Mechanics

and many more articles in the subject:

Subject of the Week

Resources

Science resources on ScienceLibrary.info. Games, puzzles, enigmas, internet resources, science fiction and fact, the weird and the wonderful things about the natural world. Have fun while learning Science with ScienceLibrary.info.

Science

Great Scientists

Satyendranath Bose

1894 - 1974

Satyendra Nath Bose was an Indian polymath, best known for his Physics work with Einstein, and after whom the boson is named.

Read about history on ScienceLibrary.info
Vitruvian Boy

Quote of the day...

The essence of mathematics is not to make simple things complicated, but to make complicated things simple.

ZumGuy Internet Promotions

English language school