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 © Renewable.Media. All rights reserved. Created : November 6, 2014 Last updated :October 3, 2015

Latest Item on Science Library:

The most recent article is:

Trigonometry

View this item in the topic:

Vectors and Trigonometry

and many more articles in the subject:

Subject of the Week

Universe

'Universe' on ScienceLibrary.info covers astronomy, cosmology, and space exploration. Learn Science with ScienceLibrary.info.

Science

Great Scientists

Bernhard Riemann

1826 - 1866

Bernhard Riemann was a German mathematician whose revolutionary ideas of multi-dimensional space challenged Euclidean geometry perspectives, and ultimately led mathematics to radically new approaches, and found applications in many fields, such as General Relativity.

Bernhard Riemann, 1826 - 1866, German mathematician
Lugano English

Quote of the day...

ZumGuy Internet Promotions

English language school