Main Points

  • Visual Techniques Techniques involving images, Flash or some other visual / graphic appearance.
  • Font Formatting Techniques for aligning and placing font on the page where it's supposed to be.
  • Escape Codes One of the most comprehensive catalogs of escape codes on the internet.

Here we have dropped virtually every technique that we're using across the website in one place to help you test what is and is not compatible with your system. There are additional test pages for...

Visual Techniques

Images and Alt Text

Can't imagine any situation where this would "unexpectedly" fail, but better to check. There are browsers like Opera that make it very easy for visitors to turn off images. I don't think many people have done it though. Then there are text browsers, but again, that shouldn't be a surprise. Still this section will let you test images and basic alt text.

This is a picture of alt text. The alt text says 'This is Alt Text.' and is indicated by a white arrow.
Alt Text
Alt text is used to create a "hidden message" on a webpage. At first, when the mouse moves over a piece of text, image, or object with alt text nothing happens. But if the mouse sits over it for a second or two, a yellow rectangle appears by the mouse cursor with the alt text inside. In the example at left, the EarthChronicle.com heading has alt text. Rest your mouse cursor here (or over the picture, to see an example of alt text in action. Alt text primarily helps users with text browsers, visitors with images turned off, and search engines, but it also provides additional information to normal users. [Chroniclemaster1, 2005/10/27]

Color Table

This is our color table from the Web Safe Colors section. The topic is fairly obsolete with CSS, but here it is.

Color Table

Green Values = FF

Red Values increase right, Blue Values increase up (From 00 to FF).

#00FFFF

#33FFFF

#66FFFF

#99FFFF

#CCFFFF

#FFFFFF

#00FFCC

#33FFCC

#66FFCC

#99FFCC

#CCFFCC

#FFFFCC

#00FF99

#33FF99

#66FF99

#99FF99

#CCFF99

#FFFF99

#00FF66

#33FF66

#66FF66

#99FF66

#CCFF66

#FFFF66

#00FF33

#33FF33

#66FF33

#99FF33

#CCFF33

#FFFF33

#00FF00

#33FF00

#66FF00

#99FF00

#CCFF00

#FFFF00

Earth Chronicle Flash Logo

So far this is the coolest visual technique that we've employed. However, it was designed as the beginning of the design for the website, not the end. Stay tuned. In the meantime, this will help you check what is currently our state of the art design project.

Font Formatting

Headings

Here's a run down to help you test all of our headings, from largest to smallest.

Level 1 Heading

A bit of text. A bit of text. A bit of text. A bit of text. A bit of text. A bit of text. A bit of text. A bit of text. A bit of text. A bit of text. A bit of text.

Level 2 Heading

A bit of text. A bit of text. A bit of text. A bit of text. A bit of text. A bit of text. A bit of text. A bit of text. A bit of text. A bit of text. A bit of text.

Level 3 Heading

A bit of text. A bit of text. A bit of text. A bit of text. A bit of text. A bit of text. A bit of text. A bit of text. A bit of text. A bit of text. A bit of text.

Level 4 Heading

A bit of text. A bit of text. A bit of text. A bit of text. A bit of text. A bit of text. A bit of text. A bit of text. A bit of text. A bit of text. A bit of text.

Level 5 Heading

A bit of text. A bit of text. A bit of text. A bit of text. A bit of text. A bit of text. A bit of text. A bit of text. A bit of text. A bit of text. A bit of text.

Level 6 Heading

Block Quotes and References

Our two main special paragraph formats. This block quote is from the EC homepage along with it's bibliographic reference.

"Stars fade like memory the instant before dawn. Low in the east, the sun appears golden as an opening eye. That which can be named must exist. That which is named can be written. That which is written shall be remembered. That which is remembered lives."

Ellis, Normandi, trans. Awakening Osiris: The Egyptian Book of the Dead. Grand Rapids, MI: Phanes Press, 1988. 43. Some bibliographic references stop after the page number. Some include an annotation like this. While this clearly is not a typical annotation, it should guarantee that the text wraps once or twice so you can see how a reference paragraph is formatted with a long first line and each line after indented.

Bibliography In-Page Links

The skip links use the same technique so strictly speaking this is redundant.

5* Geography Brunsden, Denys, J. Malcolm Wagstaff, and Caroline Burgess. eds. World Atlas. 1st American ed. New York: DK Publishing, Inc., 1999. 338pp. (208pp. of maps). Well thought out color scheme with highlights and shadows conveying the 3D topography. Excellent selection of maps from world to local maps, from physical to political to specialty maps, with copious amounts of background information and data. Wise use of big maps for core topics, extensively supplemented with smaller maps and diagrams for extra topics. Beautiful and informative, in every way one of the best books compiled by DK, perhaps the best publisher in the world of non-fiction books with graphics. [Chroniclemaster1 2005/6/27]

5* World Atlas. Brunsden, Denys, J. Malcolm Wagstaff, and Caroline Burgess. eds. 1st American ed. New York: DK Publishing, Inc., 1999. 338pp. (208pp. of maps). Geography

Geography

5* Brunsden, Denys, J. Malcolm Wagstaff, and Caroline Burgess. eds. World Atlas. 1st American ed. New York: DK Publishing, Inc., 1999. 338pp. (208pp. of maps).

5* Brunsden, Denys, J. Malcolm Wagstaff, and Caroline Burgess. eds. World Atlas. 1st American ed. New York: DK Publishing, Inc., 1999. 338pp. (208pp. of maps).

5* Geography Brunsden, Denys, J. Malcolm Wagstaff, and Caroline Burgess. eds. World Atlas. 1st American ed. New York: DK Publishing, Inc., 1999. 338pp. (208pp. of maps).

Website Log Paragraph Formats

Formatting for the Website Log. I'm not sure if this is a case where a table is really the best idea or not. It would certainly make turning it into a database application easier.

Unfinished Listing

Users beware of glitches.

Test a couple different scenarios on librariansd account for Council to examine. Add and test form components again, to see if they'll work with the new alternate email address. (Double check that alternate email works while you're at it.) Then try possible frame/navbar variations to get council feedback.

Completed Listing

2005/07/01 Chroniclemaster1 Add Top 10 Most Wanted List - the most important gaps or changes to be made to the site.

2005/11/08 Chroniclemaster1 Switch to the new website structure. This will make the dates look funny. The original index.html has now been revamped into the Roman Forum (RomanForum.html) and carries the original date 2005/4/6. The new index.html will therefore only carry today's date of 2005/11/8, a little weird, but then that's nothing new for us.

Listing Note

Philosophy is technically restructured; now let’s finish it which is the real point. (2005/5/27 Chroniclemaster1)

Form components aren’t working any better than the guestbook did. *sigh* Apparently until someone takes this on who can program something interactive themselves, we won’t have a “type your question here” feature. For now, we’ve fallen back to a simple email link if people have questions. (2005/7/1 Chroniclemaster1)

Escape Codes

This is one of the few places where you'll find escape codes with demos so you can see exactly what does and does not render on your computer. Space characters really only vary by width, so they are given a red background so you can see their size.

Font is a key factor in which symbols you can see. One of the reasons our style sheet uses Georgia extensively, is because it has very good coverage on the computers we've checked it on. It's one of the few fonts that has been able to "light up" every escape code in the tables. So depending on your CSS support or if you're using personal stylesheets, your support may be more limited for these characters. Only very specialized characters are typically absent from a font, however we can make this recommendation. If you're not using our stylesheet and you do have a problem reading a page, try switching to our stylesheet for that page or shifting your font to Georgia.

Alphabet & Numbers (on keyboard)
ABCDE FGHIJ KLMNO PQRST UVWXYZ
abcde fghij klmno pqrst uvwxyz
01234 56789
Keyboard Punctuation
Name CharacterEscape CodeDemo
Exclamation Point !!!
Quotation Mark "" - "" - "
Pound / Number Sign###
Dollar Sign $$$
Percent Sign %%%
Ampersand & & - && - &
Apostrophe '''
Left Parenthesis (((
Right Parenthesis )))
Asterisk ***
Plus Sign +++
Comma ,,,
Hyphen ---
Period / Full Stop ...
Slash/Solidus ///
Colon :::
Semicolon ;&#59;;
Less than Sign <&#60; - &lt;< - <
Equals Sign =&#61;=
Greater than Sign >&#62; - &gt;> - >
Question Mark ?&#63;?
At Sign @&#64;@
Left Bracket [&#91;[
Backslash / Reverse Solidus\&#92;\
Right Bracket ]&#93;]
Caret ^&#94;^
Horizontal Bar / Underscore_&#95;_
Grave Accent `&#96;`
Left Curly Brace {&#123;{
Vertical Bar |&#124;|
Right Curly Brace }&#125;}
Tilde ~&#126;~
Nonbreaking Space &#160; - &nbsp;  -  
Other Punctuation
NameEscape CodesDemo
Inverted Exclamation Point&#161; - &iexcl;¡ - ¡
Soft Hyphen&#173; - &shy;­ - ­
Inverted Question Mark&#191; - &iquest;¿ - ¿
En Space&#8194; - &ensp; -
Em Space&#8195; - &emsp; -
Thin Space&#8201; - &thinsp; -
Zero Width Non-Joiner&#8204; - &zwnj;‌ - ‌
Zero Width Joiner&#8205; - &zwj;‍ - ‍
Left to Right Mark&#8206; - &lrm;‎ - ‎
Right to Left Mark&#8207; - &rlm;‏ - ‏
En Dash&#8211; - &ndash;– - –
Em Dash&#8212; - &mdash;— - —
Left Single Quote&#8216; - &lsquo;‘ - ‘
Right Single Quote&#8217; - &rsquo;’ - ’
Single Low-9 Quote&#8218; - &sbquo;‚ - ‚
Left Double Quotes&#8220; - &ldquo;“ - “
Right Double Quotes&#8221; - &rdquo;” - ”
Double Low-9 Quotes&#8222; - &bdquo;„ - „
Dagger&#8224; - &dagger;† - †
Double Dagger&#8225; - &Dagger;‡ - ‡
Bullet&#8226; - &bull;• - •
Ellipsis&#8230; - &hellip;… - …
Per Mille&#8240; - &permil;‰ - ‰
Prime / Minutes&#8242; - &prime;′ - ′
Double Prime / Seconds&#8243; - &Prime;″ - ″
Single Left Angle Quote&#8249; - &lsaquo;‹ - ‹
Single Right Angle Quote&#8250; - &rsaquo;› - ›
Overline&#8254; - &oline;‾ - ‾
Non-keyboard Group - Signs
NameEscape CodeDemo
Cent Sign&#162; - &cent;¢ - ¢
Pound Sign&#163; - &pound;£ - £
General Currency Sign&#164; - &curren;¤ - ¤
Yen Sign&#165; - &yen;¥ - ¥
Broken Vertical Bar&#166; - &brvbar;¦ - ¦
Section Sign&#167; - &sect;§ - §
Dieresis/Umlauts&#168; - &uml;¨ - ¨
Copyright Sign&#169; - &copy;© - ©
Feminine Ordinal&#170; - &ordf;ª - ª
Left Angle Quote/Guillemet Left&#171; - &laquo;« - «
Not&#172; - &not;¬ - ¬
Registered Trademark&#174; - &reg;® - ®
Macron Accent&#175; - &macr;¯ - ¯
Degree Sign&#176; - &deg;° - °
Plus or Minus&#177; - &plusmn;± - ±
Superscript Two&#178; - &sup2;² - ²
Superscript Three&#179; - &sup3;³ - ³
Acute Accent&#180; - &acute;´ - ´
Micro Sign&#181; - &micro;µ - µ
Paragraph&#182; - &para;¶ - ¶
Middle Dot&#183; - &middot;· - ·
Cedilla&#184; - &cedil;¸ - ¸
Superscript One&#185; - &sup1;¹ - ¹
Masculine Ordinal&#186; - &ordm;º - º
Right Angle Quote/Guillemot Right&#187; - &raquo;» - »
F with hook&#402; - &fnof;ƒ - ƒ
Circumflex&#710; - &circ;ˆ - ˆ
Tilde&#732; - &tilde;˜ - ˜
Euro&#8364; - &euro;€ - €
Trademark&#8482; - &trade;™ - ™
Non-keyboard Group - Letters
LetterEscape CodesCapital LetterEscape CodeLower Case
A (grave accent)&#192; - &Agrave;À - À&#224; - &agrave;à - à
A (acute accent)&#193; - &Aacute;Á - Á&#225; - &aacute;á - á
A (circumflex accent)&#194; - &Acirc;Â - Â&#226; - &acirc;â - â
A (tilde)&#195; - &Atilde;Ã - Ã&#227; - &atilde;ã - ã
A (umlauts)&#196; - &Auml;Ä - Ä&#228; - &auml;ä - ä
A (ring)&#197; - &Aring;Å - Å&#229; - &aring;å - å
AE ligature&#198; - &AElig;Æ - Æ&#230; - &aelig;æ - æ
C (cedilla)&#199; - &Ccedil;Ç - Ç&#231; - &ccedil;ç - ç
E (grave accent)&#200; - &Egrave;È - È&#232; - &egrave;è - è
E (acute accent)&#201; - &Eacute;É - É&#233; - &eacute;é - é
E (circumflex accent)&#202; - &Ecirc;Ê - Ê&#234; - &ecirc;ê - ê
E (umlauts)&#203; - &Euml;Ë - Ë&#235; - &euml;ë - ë
I (grave accent)&#204; - &Igrave;Ì - Ì&#236; - &igrave;ì - ì
I (acute accent)&#205; - &Iacute;Í - Í&#237; - &iacute;í - í
I (circumflex accent)&#206; - &Icirc;Î - Î&#238; - &icirc;î - î
I (umlauts)&#207; - &Iuml;Ï - Ï&#239; - &iuml;ï - ï
N (tilde)&#209; - &Ntilde;Ñ - Ñ&#241; - &ntilde;ñ - ñ
O (grave accent)&#210; - &Ograve;Ò - Ò&#242; - &ograve;ò - ò
O (acute accent)&#211; - &Oacute;Ó - Ó&#243; - &oacute;ó - ó
O (circumflex accent)&#212; - &Ocirc;Ô - Ô&#244; - &ocirc;ô - ô
O (tilde)&#213; - &Otilde;Õ - Õ&#245; - &otilde;õ - õ
O (umlauts)&#214; - &Ouml;Ö - Ö&#246; - &ouml;ö - ö
O (slash)&#216; - &Oslash;Ø - Ø&#248; - &oslash;ø - ø
OE ligature&#338; - &OElig;Œ - Œ&#339; - &oelig;œ - œ
U (grave accent)&#217; - &Ugrave;Ù - Ù&#249; - &ugrave;ù - ù
U (acute accent)&#218; - &Uacute;Ú - Ú&#250; - &uacute;ú - ú
U (circumflex accent)&#219; - &Ucirc;Û - Û&#251; - &ucirc;û - û
U (umlauts)&#220; - &Uuml;Ü - Ü&#252; - &uuml;ü - ü
Y (acute accent)&#221; - &Yacute;Ý - Ý&#253; - &yacute;ý - ý
Eth&#208; - &ETH;Ð - Ð&#240; - &eth;ð - ð
Thorn&#222; - &THORN;Þ - Þ&#254; - &thorn;þ - þ
SZ ligature&#223; - &szlig;ß - ß
Y (umlauts)&#376; - &Yuml;Ÿ - Ÿ&#255; - &yuml;ÿ - ÿ
S (caron)&#352; - &Scaron;Š - Š&#353; - &scaron;š - š
Greek Language
LetterEscape CodesCapital LetterEscape CodeLower Case
Alpha&#913; - &Alpha;Α - Α&#945; - &alpha;α - α
Beta&#914; - &Beta;Β - Β&#946; - &beta;β - β
Gamma&#915; - &Gamma;Γ - Γ&#947; - &gamma;γ - γ
Delta&#916; - &Delta;Δ - Δ&#948; - &delta;δ - δ
Epsilon&#917; - &Epsilon;Ε - Ε&#949; - &epsilon;ε - ε
Zeta&#918; - &Zeta;Ζ - Ζ&#950; - &zeta;ζ - ζ
Eta&#919; - &Eta;Η - Η&#951; - &eta;η - η
Theta&#920; - &Theta;Θ - Θ&#952; - &theta;θ - θ
Iota&#921; - &Iota;Ι - Ι&#953; - &iota;ι - ι
Kappa&#922; - &Kappa;Κ - Κ&#954; - &kappa;κ - κ
Lambda&#923; - &Lambda;Λ - Λ&#955; - &lambda;λ - λ
Mu&#924; - &Mu;Μ - Μ&#956; - &mu;μ - μ
Nu&#925; - &Nu;Ν - Ν&#957; - &nu;ν - ν
Xi&#926; - &Xi;Ξ - Ξ&#958; - &xi;ξ - ξ
Omicron&#927; - &Omicron;Ο - Ο&#959; - &omicron;ο - ο
Pi&#928; - &Pi;Π - Π&#960; - &pi;π - π
Rho&#929; - &Rho;Ρ - Ρ&#961; - &rho;ρ - ρ
Sigma&#931; - &Sigma;Σ - Σ&#963; - &sigma;σ - σ
Sigma (final)&#962; - &sigmaf;ς - ς
Tau&#932; - &Tau;Τ - Τ&#964; - &tau;τ - τ
Upsilon&#933; - &Upsilon;Υ - Υ&#965; - &upsilon;υ - υ
Phi&#934; - &Phi;Φ - Φ&#966; - &phi;φ - φ
Chi&#935; - &Chi;Χ - Χ&#967; - &chi;χ - χ
Psi&#936; - &Psi;Ψ - Ψ&#968; - &psi;ψ - ψ
Omega&#937; - &Omega;Ω - Ω&#969; - &omega;ω - ω
Letter-like Characters
NameEscape CodesDemo
Small Theta&#977; - &thetasym;ϑ - ϑ
Upsilon with Hook&#978; - &upsih;ϒ - ϒ
Pi&#982; - &piv;ϖ - ϖ
Script P&#8472; - &weierp;℘ - ℘
Blackletter I / Imaginary&#8465; - &image;ℑ - ℑ
Blackletter R / Real&#8476; - &real;ℜ - ℜ
Alef&#8501; - &alefsym;ℵ - ℵ
Arrows
NameEscape CodesDemo
Left Arrow&#8592; - &larr;← - ←
Up Arrow&#8593; - &uarr;↑ - ↑
Right Arrow&#8594; - &rarr;→ - →
Down Arrow&#8595; - &darr;↓ - ↓
Left-Right Arrow&#8596; - &harr;↔ - ↔
Carriage Return Arrow&#8629; - &crarr;↵ - ↵
Left Double Arrow&#8656; - &lArr;⇐ - ⇐
Up Double Arrow&#8657; - &uArr;⇑ - ⇑
Right Double Arrow&#8658; - &rArr;⇒ - ⇒
Down Double Arrow&#8659; - &dArr;⇓ - ⇓
Left-Right Double Arrow&#8660; - &hArr;⇔ - ⇔
Math Signs
NameEscape CodesDemo
Fraction 1/4&#188; - &frac14;¼ - ¼
Fraction 1/2&#189; - &frac12;½ - ½
Fraction 3/4&#190; - &frac34;¾ - ¾
Times&#215; - &times;× - ×
Divide&#247; - &divide;÷ - ÷
Fraction Slash&#8260; - &frasl;⁄ - ⁄
For All&#8704; - &forall;∀ - ∀
Partial Differential&#8706; - &part;∂ - ∂
There Exists&#8707; - &exist;∃ - ∃
Empty Set&#8709; - &empty;∅ - ∅
Nabla&#8711; - &nabla;∇ - ∇
Element of&#8712; - &isin;∈ - ∈
Not an Element of&#8713; - &notin;∉ - ∉
Contains as a Member&#8715; - &ni;∋ - ∋
n-ary Product&#8719; - &prod;∏ - ∏
n-ary Sumation&#8721; - &sum;∑ - ∑
Minus&#8722; - &minus;− - −
Asterisk Operator&#8727; - &lowast;∗ - ∗
Square Root&#8730; - &radic;√ - √
Proportional to&#8733; - &prop;∝ - ∝
Infinity&#8734; - &infin;∞ - ∞
Angle&#8736; - &ang;∠ - ∠
Logical And&#8743; - &and;∧ - ∧
Logical Or&#8744; - &or;∨ - ∨
Cap&#8745; - &cap;∩ - ∩
Union&#8746; - &cup;∪ - ∪
Integral&#8747; - &int;∫ - ∫
Therefore&#8756; - &there4;∴ - ∴
Tilde Operator&#8764; - &sim;∼ - ∼
Approx. Equal to&#8773; - &cong;≅ - ≅
Almost Equal to&#8776; - &asymp;≈ - ≈
Not Equal to&#8800; - &ne;≠ - ≠
Identical to&#8801; - &equiv;≡ - ≡
Less Than or Equal to&#8804; - &le;≤ - ≤
Greater Than or Equal to&#8805; - &ge;≥ - ≥
Subset of&#8834; - &sub;⊂ - ⊂
Superset of&#8835; - &sup;⊃ - ⊃
Not a Subset of&#8836; - &nsub;⊄ - ⊄
Subset of or Equal to&#8838; - &sube;⊆ - ⊆
Superset of or Equal to&#8839; - &supe;⊇ - ⊇
Circled Plus&#8853; - &oplus;⊕ - ⊕
Circled Times&#8855; - &otimes;⊗ - ⊗
Up Tack&#8869; - &perp;⊥ - ⊥
Dot Operator&#8901; - &sdot;⋅ - ⋅
Technical Signs
NameEscape CodesDemo
Left Ceiling&#8968; - &lceil;⌈ - ⌈
Right Ceiling&#8969; - &rceil;⌉ - ⌉
Left Floor&#8970; - &lfloor;⌊ - ⌊
Right Floor&#8971; - &rfloor;⌋ - ⌋
Left Angle Bracket&#9001; - &lang;〈 - ⟨
Right Angle Bracket&#9002; - &rang;〉 - ⟩
Lozenge&#9674; - &loz;◊ - ◊
Card Suits
NameEscape CodesDemo
Spades&#9824; - &spades;♠ - ♠
Clubs&#9827; - &clubs;♣ - ♣
Hearts&#9829; - &hearts;♥ - ♥
Diamonds&#9830; - &diams;♦ - ♦