This is a test paragraph.<\/p>\n
This is a test paragraph.<\/p>\n
This is a test paragraph.<\/p>\n
This is a test paragraph.<\/p>\n
This is a test paragraph.<\/p>\n
This is a normal paragraph ( This is another paragraph. I think it needs to be added that This is a This is a block quotation containing a single The following contains address information about the author, in an This is a paragraph before an unnumbered<\/strong> list ( The following is a The following is a This is a paragraph before a numbered<\/strong> list ( This is a paragraph before a definition<\/strong> list ( Some of the elements tested above are typically displayed in a monospace This is a text paragraph that contains some Toggle 1<\/a><\/p> orem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper aliquam nibh, vel dictum tortor vestibulum vitae. Pellentesque in laoreet leo. Vivamus suscipit sapien et ornare lobortis. Proin tincidunt enim ut libero fermentum, non accumsan tellus lacinia. Ut commodo elementum nisl non mattis. Nullam elementum bibendum semper. Pellentesque enim felis, cursus a orci a, venenatis tempor nisl. Donec imperdiet fringilla nisl. Morbi convallis pellentesque blandit. Integer sodales ullamcorper nunc, sit amet aliquam nulla ornare id. Etiam tempor aliquam hendrerit. Sed cursus egestas aliquam. Curabitur neque odio, vestibulum id congue eget, convallis sit amet purus. Fusce a viverra velit. Duis volutpat sit amet odio nec pellentesque.<\/p>\n <\/div><\/div><\/div><\/p>\n Toggle 2<\/a><\/p> orem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper aliquam nibh, vel dictum tortor vestibulum vitae. Pellentesque in laoreet leo. Vivamus suscipit sapien et ornare lobortis. Proin tincidunt enim ut libero fermentum, non accumsan tellus lacinia. Ut commodo elementum nisl non mattis. Nullam elementum bibendum semper. Pellentesque enim felis, cursus a orci a, venenatis tempor nisl. Donec imperdiet fringilla nisl. Morbi convallis pellentesque blandit. Integer sodales ullamcorper nunc, sit amet aliquam nulla ornare id. Etiam tempor aliquam hendrerit. Sed cursus egestas aliquam. Curabitur neque odio, vestibulum id congue eget, convallis sit amet purus. Fusce a viverra velit. Duis volutpat sit amet odio nec pellentesque.<\/p>\n <\/div><\/div><\/div><\/p>\n Toggle 3<\/a><\/p> orem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper aliquam nibh, vel dictum tortor vestibulum vitae. Pellentesque in laoreet leo. Vivamus suscipit sapien et ornare lobortis. Proin tincidunt enim ut libero fermentum, non accumsan tellus lacinia. Ut commodo elementum nisl non mattis. Nullam elementum bibendum semper. Pellentesque enim felis, cursus a orci a, venenatis tempor nisl. Donec imperdiet fringilla nisl. Morbi convallis pellentesque blandit. Integer sodales ullamcorper nunc, sit amet aliquam nulla ornare id. Etiam tempor aliquam hendrerit. Sed cursus egestas aliquam. Curabitur neque odio, vestibulum id congue eget, convallis sit amet purus. Fusce a viverra velit. Duis volutpat sit amet odio nec pellentesque.<\/p>\n <\/div><\/div><\/div><\/p>\n The following table has a caption. The first row and the first column The following table has some sample characters with In the following, a width setting should cause some hyphenation, Until recently the great majority of naturalists believed that species were immutable productions, and had been separately created. This view has been ably maintained by many authors.<\/p>\n Until recently the great majority of naturalists believed that species were immutable productions, and had been separately created. This view has been ably maintained by many authors.<\/p>\n Un\u00adtil re\u00adcent\u00adly the great Jukka Korpela<\/a><\/p>\n This is the 1st level heading This is 2nd level heading This is a test paragraph. This is 3rd level heading This is a test paragraph. This is 4th level heading This is a test … Continue reading p<\/code> element).
To add some length to it, let us mention that this page was
primarily written for testing the effect of user style sheets<\/strong>.
You can use it for various other purposes as well, like just checking how your browser displays various HTML elements by default.
It can also be useful when testing conversions from HTML
format to other formats, since some elements can go wrong then.<\/p>\n
the set of elements tested is not exhaustive in any sense. I have selected
those elements for which it can make sense to write user style sheet rules,
in my opionion.<\/p>\ndiv<\/code> element. Authors may use such elements instead
of paragraph markup for various reasons. (End of div<\/code>.)<\/p>\n\n
paragraph. Well, not quite, since this is not really<\/em>
quoted text, but I hope you understand the point. After all, this
page does not use HTML markup very normally anyway.<\/p>\n<\/blockquote>\naddress<\/code>
element. Jukka Korpela<\/a>,
jkorpela@cs.tut.fi<\/a>
P\u00e4iv\u00e4ns\u00e4teenkuja 4 A, Espoo, Finland<\/p>\nLists<\/h2>\n
ul<\/code>). Note that
the spacing between a paragraph and a list before or after that is hard
to tune in a user style sheet. You can\u2019t guess which paragraphs are
logically related to a list, e.g. as a \u201clist header\u201d.<\/p>\n\n
for short items lists look better if they are compactly presented,
whereas for long items, it would be better to have more vertical spacing between items.<\/li>\n
Let us terminate the list now without making any more fuss about it.<\/li>\n<\/ul>\nmenu<\/code> list: One. Two. Three. Well, probably this list item should be longer so that it will
probably wrap to the next line in rendering.<\/p>\ndir<\/code> list: One. Two. Three. Well, probably this list item should be longer so that it will
probably wrap to the next line in rendering.<\/p>\nol<\/code>). Note that
the spacing between a paragraph and a list before or after that is hard
to tune in a user style sheet. You can\u2019t guess which paragraphs are
logically related to a list, e.g. as a \u201clist header\u201d.<\/p>\n\n
items are short, lists look better if they are compactly presented,
whereas for long items, it would be better to have more vertical spacing between items.<\/li>\n
Let us terminate the list now without making any more fuss about it.<\/li>\n<\/ol>\ndl<\/code>).
In principle, such a list should consist of terms<\/em> and associated
definitions.
But many authors use dl<\/code> elements for fancy \u201clayout\u201d things. Usually the
effect is not too<\/em> bad, if you design user style sheet rules for dl<\/code>
which are suitable
for real definition lists. recursion see recursion recursion, indirect see indirect recursion indirect recursion see recursion, indirect term a word or other expression taken into specific use in
a well-defined meaning, which is often defined rather rigorously, even
formally, and may differ quite a lot from an everyday meaning<\/p>\nText-level markup<\/h2>\n
\n
abbr<\/code> markup used)<\/li>\nacronym<\/code> markup used)<\/li>\nb<\/code> markup used \u2013 just bolding with unspecified
semantics)<\/li>\nbig<\/code> markup used)<\/li>\nfont size=6<\/code> markup used)<\/li>\nfont face=Courier<\/code> markup used)<\/li>\nfont color=red<\/code> markup used)<\/li>\ncite<\/code> markup used)<\/li>\na[i] = b[i] + c[i);<\/code> (computer code; code<\/code> markup used)<\/li>\ndeleted<\/del> text (del<\/code> markup used)<\/li>\n
(dfn<\/code> markup used for the term being defined)<\/li>\nem<\/code> markup used for emphasizing
a word)<\/li>\ni<\/code> markup used)<\/li>\nins<\/code> markup used)<\/li>\nkbd<\/code> markup
used for text indicating keyboard input)<\/li>\nHello!<\/q> (
q<\/code> markup used for quotation)<\/li>\nShe said Hello!<\/q> (a quotation inside a quotation)<\/li>\n
(samp<\/code> markup used for sample output)<\/li>\nsmall<\/code> markup used)<\/li>\nstrike<\/code> markup used; note:s<\/code> is a nonstandard synonym for strike<\/code>)<\/li>\nstrong<\/code>
markup used)<\/li>\nsub<\/code> andsup<\/code> markup) work inside running text, we need some
dummy text around constructs like x1<\/sub> and H2<\/sub>O
(where subscripts occur). So here is some fill so that
you will (hopefully) see whether and how badly the subscripts
and superscripts mess up vertical spacing between lines.
Now superscripts: Mlle<\/sup>, 1st<\/sup>, and then some
mathematical notations: ex<\/sup>, sin2<\/sup> x<\/em>,
and some nested superscripts (exponents) too:
ex2<\/sup> and f(x)g(x)a+b+c<\/sup>
(where 2 and a+b+c should appear as exponents of exponents).<\/li>\ntt<\/code> markup used)<\/li>\nu<\/code> markup used)<\/li>\ncat<\/code> filename<\/var> displays the
file specified by the filename<\/var> (var<\/code> markup
used to indicate a word as a variable).<\/li>\n<\/ul>\n
font, often using the same<\/em> presentation for all of them. This
tests whether that is the case on your browser:<\/p>\n\n
This is sample text inside code markup<\/code><\/li>\nLinks<\/h2>\n
\n
inline links. Generally, inline links (as opposite to e.g. links
lists) are problematic
from the
usability<\/a> perspective,
but they may have use as
\u201cincidental\u201d, less relevant links. See the document
Links Want To Be Links<\/a>.<\/p>\nToggles<\/h2>\n
Tables<\/h2>\n
contain table header cells (th<\/code> elements) only; other cells
are data cells (td<\/code> elements), with align=\"right\"<\/code>
attributes:<\/p>\n\n\n
\n Country<\/th>\n Total area<\/th>\n Land area<\/th>\n<\/tr>\n \n Denmark<\/th>\n 43,070<\/td>\n 42,370<\/td>\n<\/tr>\n \n Finland<\/th>\n 337,030<\/td>\n 305,470<\/td>\n<\/tr>\n \n Iceland<\/th>\n 103,000<\/td>\n 100,250<\/td>\n<\/tr>\n \n Norway<\/th>\n 324,220<\/td>\n 307,860<\/td>\n<\/tr>\n \n Sweden<\/th>\n 449,964<\/td>\n 410,928<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n Character test<\/h2>\n
annotations. If the browser\u2019s default font does not
contain all of them, they may get displayed using backup fonts.
This may cause stylistic differences, but it should not
prevent the characters from being displayed at all.<\/p>\n\n\n
\n Char.<\/th>\n Explanation<\/th>\n Notes<\/th>\n<\/tr>\n \n \u00ea<\/td>\n e with circumflex<\/td>\n Latin 1 character, should be ok<\/td>\n<\/tr>\n \n \u2014<\/td>\n em dash<\/td>\n Windows Latin 1 character, should be ok, too<\/td>\n<\/tr>\n \n \u0100<\/td>\n A with macron (line above)<\/td>\n Latin Extended-A character, not present in all fonts<\/td>\n<\/tr>\n \n \u03a9<\/td>\n capital omega<\/td>\n A Greek letter<\/td>\n<\/tr>\n \n \u2212<\/td>\n minus sign<\/td>\n Unicode minus<\/td>\n<\/tr>\n \n \u2300<\/td>\n diameter sign<\/td>\n relatively rare in fonts<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n Hyphenation<\/h2>\n
depending on support to various methods of hyphenation.<\/p>\nCSS-based hyphenation<\/h3>\n
JavaScript-driven hyphenation<\/h3>\n
Explicit hyphenation hints (soft hyphens)<\/h3>\n
ma\u00adjor\u00adi\u00adty of nat\u00adu\u00adral\u00adists
be\u00adlieved that spe\u00adcies were
im\u00admu\u00adta\u00adble
pro\u00adduc\u00adtions,
and had been sep\u00ada\u00adrate\u00adly cre\u00adat\u00aded.
This view has been ably main\u00adtain\u00aded by many au\u00adthors.<\/p>\n
\n
Date<\/a> of creation: 2000-09-15.
Last update: 2013-03-21.<\/p>\n","protected":false},"excerpt":{"rendered":"