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:

Fission

View this item in the topic:

Nuclear and Particle Physics

and many more articles in the subject:

Subject of the Week

Mathematics

Mathematics is the most important tool of science. The quest to understand the world and the universe using mathematics is as old as civilisation, and has led to the science and technology of today. Learn about the techniques and history of mathematics on ScienceLibrary.info.

Mathematics

Great Scientists

Tycho Brahe

1546 - 1601

Tycho Brahe was a Danish astronomer, whose meticulous observations and ideas about the nature of planets, stars and comets, although erroneously accommodating rather than directly challenging the long-standing Aristotelian and Ptolemaic versions of the heavens, they were nevertheless an important contribution to the coming scientific revolution, and specifically enabled his assistant, Johannes Keppler, to derive his breakthrough laws of planetary motion.

Tycho Brahe
Umwelt.Science

Quote of the day...

Mathematics knows no races or geographic boundaries; for mathematics, the cultural world is one world.

ZumGuy Internet Promotions

Website content services