How to read and write web pages with ancient languages.

Unicode and other font information.

The sets of instructions in this ecourse are not to be construed as comprehensive, especially those in the writing section. The reading section can lay claim to a somewhat higher degree of completeness, but still amounts to little more than a list of hints.

However, the text enthusiast who follows these instructions will be well on the way to knowing how best to read and write ancient languages on the web. Especially if he or she happens to follow one of the links that I have provided. These links lead to pages that are truly first-rate in the field of web languages and styles.

• Downloading a font.
• Installing a font.
• Changing the browser font.
• Smoothing fonts.
• Decoding Unicode.
• Adjusting the text size.
• Saving a web page.
• Changing keyboard language layouts.
• Using conversion tools.
• Coding a basic web document.
• Coding special characters.
• Linking to other pages.
• Using styles.
• Creating cascading stylesheets.
• Customizing classes.
• Coding for fonts or Unicode.
• Embedding Unicode.

Reading.

Reading pages on the web depends upon fonts. Your computer should already have a plethora of fonts installed on it, but to read certain web pages you may need to download, install, and tweak others.

Downloading a font.

There are many fonts available for download off the internet. If the web page that you are browsing is using an independent font, it will usually tell you which font it is, and link to a page from which you can download it. For Unicode fonts, try searching through the Unicode fonts page posted by Alan Wood.

  1. The web page from which you wish to download a font ought to have a link to that font. Right-click the link and choose save target as. (If you happen to left-click instead, simply choose save file to disk on the dialog box that appears, then follow the rest of these instructions.)
  2. The file download dialog box will appear, followed shortly by another dialog box marked save as. In that second box, choose the folder in which you would like to store the font. Make certain that you can remember where it is for later.
  3. Click save. The second box will disappear, and the first box will show you how much of the font is left to download. When the download finishes, close the box.
Installing a font.

In order to install a font you must first have a font to install. The easiest way is to download a font from the internet. You may also purchase fonts on disks. Either way, you have to know in which folder to find the font on your computer system, whether from your hard drive or from a disk drive.

  1. Click on the start menu on the bottom bar of your desktop. Go to settings.
  2. Under settings, choose the control panel.
  3. Double-click on fonts.
  4. Select file from the menu bar, and choose install new font.
  5. The add fonts dialog box will appear. In the folders box, navigate to the folder which contains your font. When you open it, your font ought to appear in the list of fonts box. Select it, and press OK. The font is now available for use on your system.
Changing the browser font.

If online languages are your thing, you may wish to change the font in which your browser displays online text. Choose one that supports the Unicode range or ranges of the language or languages that you access most often on the web. If you are used to Times New Roman or some other standard Windows font, your new selection may take some getting used to, but you will be able to read many more pages online without having to change your settings. Of course, you can always wait until you come across an unreadable page, then switch to a broad Unicode font just for that page.

  1. In Internet Explorer, open tools on the menu bar, then click on internet options.
  2. The options panel will pop up. Click on the button marked fonts.
  3. Change your web-based font to one that supports Unicode. The broader the Unicode range of the font, the more pages you will be able to browse without having to worry about special characters.
Smoothing fonts.

Some online fonts will not look very nice without a special process called font-smoothing. Windows 95 does not support font-smoothing without a special download. Windows 98 and above will smooth fonts readily.

  1. Click on the start menu on the bottom bar of your desktop. Go to settings.
  2. Under settings, choose the control panel.
  3. Double-click on display, then select the effects tab.
  4. Check the box marked smooth edges of screen fonts. (You may find that it is already checked, in which case your current display is as good as it gets.)
Decoding Unicode.

You can force your browser to interpret Unicode by changing its encoding.

  1. On the menu bar of your browser, click on view.
  2. Go down to encoding, then select Unicode (UTF-8) from the side menu.

For much more information on Unicode, browse the Unicode homepage or the fine pages posted by Alan Wood.

Adjusting the text size.

Reading an ancient or a foreign language can be difficult if the text is very small, or awkward if the text is very large. Fortunately, Internet Explorer provides a way to change the text size.

  1. On the menu bar, click on view, then text size.
  2. Text size options from largest to smallest will appear on the submenu. I usually select medium myself.

This option may not work if the web designer has specified absolute font sizes in a cascading style sheet. I personally recommend coding relative font sizes for this very reason.

Saving a web page.

You may easily save a web page to your own hard drive for viewing offline.

  1. Click on file on the menu bar at the top of your browser, then click on save as on the menu.
  2. A dialog box will appear. Navigate to the folder on your computer in which you would like to save the web page, then click on save.
  3. You may now view the page offline by clicking on the webpage icon in the folder that you have chosen.

If the page references images, stylesheets, or special scripts, your browser will store them in a folder alongside the page itself. You could delete the folder without losing the page, but then the page would not be able to display any of the images, styles, or scripts.

Writing.

Fight spam!

I recommend writing code that is as up-to-date as possible. Many of the old tricks have been deprecated in HTML 4.0, and will be all but gone as the web goes over to XML. But webpages written using styles, classes, and such are compliant with XML, and will still be readable.

Changing keyboard language layouts.

The Windows operating system is able to support many foreign keyboard arrangements. If you are accustomed to typing a foreign language on a standard keyboard from that language, you can easily change your own computer keyboard to reflect that foreign standard. The physical symbols on the keys of your keyboard, of course, will not change. But the letters that they produce will.

  1. Click on the start menu on the bottom bar of your desktop. Go to settings.
  2. Under settings, choose the control panel.
  3. Double-click on keyboard, then select the language tab.
  4. To add a language, click on add, then scroll through the various languages and select one. Click OK.
  5. Now select the manner in which you wish to be able to change languages, whether alt plus shift or control plus shift.
  6. If you plan on switching back and forth quite often, also check the box marked enable indicator on taskbar. A box will appear on your taskbar (next to your computer clock) with the initials of the currently selected language. Use whatever manner of changing languages you selected in step 5 to scroll through whichever languages you added to your keyboard layout list in step 4. (Note that the initials actually come from the language in question, and not necessarily from our English name for that language. So, for instance, the initials for Spanish will be Es for Español, not Sp for Spanish.)

Using the layout for a particular language, you may type text into a text editor or word processor and it will come out as Unicode characters in that language. Your choices, however, will probably be limited to the modern versions of languages, and you will have to be familiar with the standard keymap for that language, which will probably differ from keymaps designed for the ancient version.

Using conversion tools.

If you already have texts written up in, or prefer typing with the keymap of, a particular font, you can convert from the font to Unicode if you have the right tool.

  • Sean Redmond has a Greek font and Unicode converter that can handle basic GreekKeys, WinGreek, ISO 8859-5 (Cyrillic), ISO 8859-7 (modern Greek), Beta, and Unicode conversions.
  • The Early Jewish Writings site has a Hebrew Unicode converter that converts from the Michigan-Claremont keymap to Unicode.
  • The Coptic church has a Coptic font converter that can convert from one Coptic font to another, but not, apparently, to Unicode. (Unicode support for Coptic is very sketchy at present. Some fonts support the letters derived from Demotic, but render those derived from Greek in the Greek forms, not the Coptic. Cardo is just such a Unicode font, but at least it has Coptic! Unlike most of the more popular fonts.)
  • is pleased to offer the TextCoder and the TextDoctor, both of which are capable of converting from Hebrew, Greek, Coptic, or Latin to Unicode. There is a free tutorial on how to operate them.

Sean Redmond has a Greek converter that converts into the actual Greek characters. Both the Hebrew Unicode converter from Early Christian Writings and the tools from convert into entity codes, which take the format: &#XXXX;, in which XXXX is the Unicode reference number for that character. Your browser will display the code as a single character.

Coding a basic web document.

It does no good to convert a text to Unicode if you do not have a document into which to copy and paste it. You have to create a document in HTML code if you wish to display your text on the internet. An HTML document, or web document, is simply a page marked up in a text editor then saved with the extension .html.

A text editor is a program that saves a text in memory in its most basic form, without extra untyped characters. A text editor stands in distinction from a word processor, which adds untyped characters to its formatting when it saves your text in memory. Popular text editors include Notepad, Wordpad (but only if you open it in text mode), NoteTab, and, for the Mac, SimpleText.

The following instructions for creating a basic web page assume that you are using Notepad.

  1. Open up Notepad by double-clicking on its icon, or by finding it in your start menu. It will usually be found under programs, then accessories.
     
  2. Start your document with two coded statements that will tell the browser to interpret the page as HTML:
    <html>
     
    </html>
    This HTML statement consists of two tags, an initial tag (<html>) and a final tag (</html>). Tags always appear with the opening and closing angle brackets, and the wording of the final tag always begins with a forward slash that the initial tag lacks. Tags are designed to hold content of some kind, which will appear between the initial and final tags (not inside them). The html tags are meant to enclose your entire document.
     
  3. All HTML documents consist of two parts: A head and a body. The head will contain information that your web visitors will never actually see. The body is the container that will hold the information that your web visitors can read.
     
    1. The head comes first, and can be coded simply:
      <head></head>
    2. The body comes second, and looks like:
      <body></body>
    3. Leave plenty of space for the body. You have now written up the basic structure of your web page, and it ought to look something like:
      <html>
       
      <head></head>
       
      <body>
       
      </body>
       
      </html>
    4. For the purposes of these instructions, we will put only one item in the head of the page. Every page needs a title. The title that you choose will appear on the title bar of your browser, the topmost element that you will see on your screen. The tags are <title> and </title>, and they appear between the head tags.
      <head><title>Title.</title></head>
      The head and title tags above are said to be nested. Note that the outermost tags belong together, and the innermost belong together. To write them in any other way is called crossing tags, and is poor coding practice, and often will not work at all.
       
    5. A note about spaces in your code. All spaces, tabs, and returns comprise what is known as whitespace in the code, and the browser interprets all contiguous whitespace as exactly one space (one click of the spacebar). You could hit the spacebar twelve times, then the return key another seven, then tab a few times for good measure, and all that will appear in the browser window is one single space.
       
      So you can leave all the spaces you like to make your code readable, and it will not matter to the browser.
       
  4. All that is left now is to fill the body. It is in this section that whatever code you create in the TextCoder or TextDoctor goes, along with your own comments or essays.
     
    As might be expected, there are many tags that can be applied to text in the body of the page. Among them are the following (test them out with the CodeTester):
     
    • <h1></h1> through <h6></h6>: Headings of different sizes, from large (h1) to small (h6).
       
    • <b></b> or <i></i>: Boldfaced (b) or italicized (i) text.
       
    • <p></p>: Text contained in a single paragraph.
       
    • <hr />: A horizontal rule, or line, to divide sections of your document.
       
    • <br />: A line break to move ensuing text to the next line.

    Notice the position of the slash in the horizontal rule and break tags above. These are empty tags which used to be coded <hr> and <br>, respectively. With the onset of XML, however, these tags must be both opened and closed at the same time in order to comply with updated standards. Hence the odd syntax.

  5. Remember, whatever you wish your readers to see you must place between the body tags.
     
  6. Now comes the most important part: Converting your text document (which is what any document composed with a text editor is by default) into an HTML document.
     
    1. Click file on the menu bar of Notepad. Choose save as.
       
    2. On the dialog box that pops up, browse around your hard drive till you find the folder in which you wish to keep your document. If you wish, you may click on the create new folder icon and make a new one. You will have to name it, then open it.
       
    3. Once you are at the right folder, give your document a file name. If this page is going to be the first page on your website, you must name it index.html. If not, then choose any name that fits the page, and add the .html extension. Use all lowercase letters.
       
      Now, simply typing index.html into the file name box and then saving will usually not work. Windows will interpret the .html extension as part of your file name! (If your system is set to display all extensions, it may work. Otherwise, do the following....) In order to make certain that your file (id est, your web page) receives the correct extension, type "index.html", with the quotation marks. The quotation marks will instruct Windows to preserve the name as is, including the extension .html, instead of adding .txt and turning your file back into a text document... which will do you little or no good on the web.
       
    4. Now click on save. The dialog box will disappear, and you will be back to your text document. Nothing will have changed except that the title on the title bar will now reflect the name that you gave your page. In order to see your work in HTML you have to navigate to the folder in which you saved your file and open the icon there. If your default browser is Internet Explorer, the icon should already bear the blue e that marks the file as a web document. Double-click the icon.
       
      Refresh button.If you wish to make changes to the code in order to alter the displayed document, click on view on the menu bar, and select source. Your original text document will come up. Make the changes, click on file and save, then refresh your web page in the browser with the refresh button.
       
  7. Believe me, there is much, much more to be said about making web pages. This set of instructions is intended for relative beginners.
Coding special characters.

There are many special characters available to the web designer that are not represented on the standard computer keyboard. Adding these special characters to the code of a web page requires knowledge of two things: The syntax and the number reference associated with the character. The syntax is simple...:

&# + XXXX + ; = HTML character reference or entity.

...where XXXX is a Unicode numerical reference. An ampersand followed immediately by a hash, then a number, then a semicolon signals the browser to interpret this strange string of symbols as a single character, whichever character is associated with the number.

So much for the syntax. It is the number reference that requires the research and a good memory. My CharacterTabulator can help with your research. (Trouble with the table? The instructions may help.)

One special character that I use quite frequently is the non-breaking space. Recall that leaving many spaces in your code will not force the browser to display all those spaces. It will display only one in sequence at a time. You can, however, force the browser to display whitespace by writing a &#160; character where you wish the space to appear. There is an alphabetic equivalent to this code, &nbsp;, but I prefer the ASCII numerical reference, and suspect that it is likely to be browser-supported longer into the future than the alphabetic reference.

You may already have a web page called index.html, but one page does not a web site make. You will probably wish to make other pages.

To do so, use a text editor just as in the steps above for each page that you wish to add to your site. You cannot reuse the name index.html, and in fact are not allowed to reuse any filename in the same folder or website. You may use any name you wish. Let us suppose for the sake of example that your second page is called links.html, and is intended to list links of interest to other websites and pages.

You need, then, to actually do the linking. Each link that you create is called a hyperlink, and the tag that you use is <a></a>, the anchor tag.

That tag, coded as is, will do nothing. You, the designer, have to point the anchor tag in the right direction by adding an attribute called href, which stands for hypertext reference.

<a href= ""></a>

The href is an attribute, and attributes require values. We code the appropriate value inside the quotation marks. The proper value for a href is the address of a web page. Since you are linking to that page, it is called the target page. The page that contains the link is the source page.

  • If you are linking to a page within the same folder, within your own website, you need only the filename. For instance, if you wish to make a link on your index page to your own links page, you would, somewhere in the body of your document, choose a word to make hypertext, framed in an anchor tag. Then you would make links.html the value for the href attribute, like so:

    <a href= "links.html">Links</a>.
  • If you are linking to a page that is not on your website, you need the complete address. A complete address begins with the hypertext transfer protocol abbreviation: http://. It usually proceeds with the abbreviation for the world-wide web: www. Then comes the domain name, then the extension, all separated by dots, or periods. If you wished to link to , for example, you would code:
    <a href= "http://www.textexcavation.com">TextExcavation</a>.
    Now any visitor who clicks on the word will be brought straight to my index page.

All the pages on your site ought to be linked together somehow so that visitors can navigate to them all.

<a href= "links.html" target= "_blank">Links</a>.

Now the target page, called links, will open in a new window, and the source page, which in the above example is your index page, will remain in its own window.

Using styles.

Styles can be very important to creating web pages with ancient languages. Styles are the most up-to-date way of controlling the appearance of a document. Many of the old tags have been deprecated in HTML 4.0 in favor of the newer style attribute.

In what follows I will concentrate on those styles that control language or font appearance on a web page.

  • Style is an attribute, just like href, not a tag. There is a <style></style> tag pair, but it cannot appear in the body of a document. As we will see later, it is meant to appear in the head. An attribute appears within a tag that already exists. For instance, I could modify any given paragraph with the style of my choice by coding:
    <p style= ""></p>
    The attribute style is followed by an equals sign, then a pair of quotation marks. The style goes inside the quotation marks, as you will see in further examples.
     
  • If the text that you wish to modify with a style does not happen to correspond to any given pair of tags in your code, there are two tag pairs that you can introduce which will change the text between them. They are the span and div tags (the latter being short for divide):
    <span style= ""></span>
    <div style= ""></div>
    Use span when you wish to alter a relatively small stretch of text within one element, and div when you wish to alter larger expanses of text across several elements.
     
  • Now for the styles themselves. What follows is a list of those styles that are most often used for modifying text in a web page. This list, however, is by no means exhaustive.
     
    Note the format of style, equals sign (=), and quotation marks (""). The value for the style goes inside the quotation marks. I use a pipe | to separate potential values. For instance....
    style= "clear: left | right | both"
    ...can be either...
    style= "clear: left"
    ...or...
    style= "clear: right"
    ...or...
    style= "clear: both"
    ...but not all at once. Furthermore, brackets [] and the values that they enclose on the list below are not meant to be written out, but rather replaced by the kind of value described within the brackets.
     
    List of text-oriented styles:
     
    • style= "color: #[hexadecimal number]": Take away the bracketed statement and add the hex code for one of the 256 web-safe colors, and the text will change from the default black to the color of your choice.
    • style= "direction: ltr | rtl": This style changes the direction of the text. The default is ltr (left-to-right), but you can change it to rtl (right-to-left). Very handy for Hebrew lists.
    • style= "font-family: serif | sans-serif | ['name of specific font']": It is with this style that one specifies which font, or font-family, will read the text.
    • style= "font-size: [number]pt | [xx-small through xx-large]": Change the size of the font in points. The default for many browsers is 12 points.
    • style= "font-style: normal | italic | oblique": The stylistic way of italicizing a text, though I think that the familiar <i></i> tags will always be with us.
    • style= "font-variant: normal | small-caps": That second option will display a text in smaller-than-usual capital letters.
    • style= "font-weight: normal | bold | bolder | lighter": The stylistic way of making a text boldfaced. Again, I think that the <b></b> tags will survive too.
    • style= "line-height: [factor] | [percentage]": Determines how much vertical space is reserved for a line of text. The factor is multiplied by the height of the text itself.
    • style= "margin-left: [width in ems (em) or points (pt)] | [percentage]" or style= "margin-right: [width in ems (em) or points (pt)] | [percentage]": An em is the width of the letter m. This style can be used to indent text.
    • style= "text-align: left | right | center | justify": Aligns the text with one margin or the other, or with the midline of the page, or justifies both margins.
    • style= "text-decoration: underline | overline | line-through": Decorates the text with a line in bottom, top, or medial position.
    • style= "unicode-bidi: normal | embed | bidi-override": An advanced technique. Use only if you know your Unicode.

      •  
    Again, this list is not exhaustive.
     
  • Putting this information together, we can now change the appearance of a stretch of text on a web page using styles. For example, if we wish to make a certain passage both center-aligned and underlined, we would code as follows for a shorter portion...:
    <span style= "text-align: center; text-decoration: underline"></span>
    ...or as follows for a longer portion:
    <div style= "text-align: center; text-decoration: underline"></div>
    You can code as many different styles as you wish within a single pair of quotation marks. Just separate the different values with semicolons (;).
     
    Remember that you do not have to use a span or div tag if the text that you wish to modify happens to correspond with an element, such as a paragraph, that you have already coded.

Try playing around with the tag buttons offered on the TextDoctor. You can see what the tags look like, and with a mere click of the display button you can see the results as they would appear on a web page.

Creating cascading stylesheets.

Styles coded in a tag suffer from the same limitation as the tag itself, namely that they can change only one piece of text at a time. It would be helpful sometimes to be able to change the appearance of all tags of the same type on any given page at once. For example, you may wish to stylistically alter what all paragraphs look like. The browser stores default values for the text enclosed in a pair of paragraph tags, but you may wish to override those default values for your own site.

One way to override the default values is to scan through the code of a page and add a style attribute to each and every instance of the tag that you wish to alter. If the default value for font-size in a paragraph is 12 points, but you prefer 10 points, you would run through your code and change each pair of paragraph tags from <p></p> to <p style= "font-size: 10pt"></p>. My guess is that you would tire of this procedure after a very little while.

There is a much easier way. Use a stylesheet. A stylesheet is a list of styles coded into the head of a document that affect how HTML elements appear in the body. It is at this point that we use <style></style> tags.

  1. Somewhere in the head part of your code (between the <head></head> tags, preferably below the title), type in your tags, leaving space between them for more code:
    <style>
     
    </style>
  2. Using our same example, we are going to change the default value for paragraph font-size throughout this entire web page.
     
    Between the style tags, type the name of the tag (p, in this case) followed by opening and closing curly braces {}:
    p { }
    Since whitespace does not matter, the following format is identical to the last, and easier to read when one is making a list of style changes instead of just one:
    p
    {
     
    }
    With the curly braces lined up, it it easy to make certain that every opening brace has a closing mate.
     
  3. Now for the code that will actually make the change.
    p
    {
       font-size: 10pt;
    }
    This code is similar to the style attribute within a tag, but notice the lack of quotation marks. A colon separates the property from its value, and a semicolon terminates the line. You have written a stylesheet. A very short one, but a stylesheet nonetheless.
     
    The most important thing is that now all the paragraphs on the entire page will be displayed at 10 points instead of the browser default of 12.
     
  4. Other properties and values can easily be added to your stylesheet. For example:
    p
    {
       font-size: 10pt;
       color: #999999;
    }
    Now all the paragraphs on the page will have a font-size of 10 points and a color of #999999, which is a shade of grey.

So we can change all the styles on a single page. But what if you wish to change the styles on many or even all of the pages on your web site? For that task you need to write up a new document, and save it with a different extension, not .html but .css.

  1. Open up Notepad or whatever text editor you prefer to use.
     
  2. Now enter exactly the same text as you would put between the <style></style> tags in the head of your web document. To wit:
    p
    {
       font-size: 10pt;
       color: #999999;
    }
    You do not need any more than this code on the page, though you can add as many tags and properties as you wish.
     
  3. Click on file on the menu bar of your text editor, then save as. In the dialog box, enter the filename of your choice and the extension .css, then enclose the entire name in quotation marks. For instance, using the filename styles:
    "styles.css"
    Now click save, making certain to save this document in the same folder as your web page.
     
  4. Your stylesheet is now a separate document called an external stylesheet. At this point your web document has no way of accessing the style changes that you have coded in styles.css. The web page does not know what name you have given your stylesheet, or that a stylesheet even exists.
     
    You have to tell your web page that you have an external stylesheet to apply, and you have to supply the name of that sheet. You accomplish this task with a link coded in the head portion of your webpage:
    <link rel= "stylesheet" href= "styles.css" type= "text/css"/>
    The link marker tags this line as a link to an external source, the rel attribute identifies this outside source as a stylesheet to be applied as soon as the page loads, the href attribute names the source so that the browser can find it, and the type simply identifies what kind of document is being referenced. You do not have to understand the entire process before you can use it.

Now your web page will apply the styles coded in styles.css. Better yet, however, any web page with your stylesheet link will apply those styles. You can format your entire web site with one stylesheet. If at any point in the future you wish to change the look and feel of your site, you have only to make the desired changes in your stylesheet instead of changing every page on your site.

You are allowed to use an external stylesheet, a style tag in the head of your web page, and inline style changes (in which you code the style change right into a tag in the body of your document). The style change that is nearest the point of change will take precedence.
 
So you could code a certain style in your external stylesheet, but then override that one style on just one page of your site by recoding it differently in the head of that page. You could then override that style change again for any one element in the body of the page. It is this order of precedence that is meant by the term cascading style sheets, abbreviated CSS (hence the extension .css).

For more advanced information on cascading style sheets, check out Glish and A List Apart. (Browsing the information on these sites makes my own coding seem rather inadequate and amateur.)

Customizing classes.

The most useful aspect of cascading style sheets in terms of coding for ancient languages is the custom class. We have already used the official name of a tag (such as p for paragraph) in a stylesheet to change the appearance of text marked by that tag. But you can use a name of your own choosing to mark an entire class of tags, then customize the styles of your class.

  1. On your stylesheet, whether external or internal (in the page head), write the name of your own custom class preceded by a dot (or period). Then add your opening and closing curly braces, and the style that you wish to apply. For instance:
    .english
    {
       font-family: Times New Roman, serif;
    }
    You now have a class called english. Now any element in the body of your page that is marked as belonging to that class will apply the Times New Roman font, or, failing that, any font of the serif variety.
     
  2. So how do you enlist an element in this class called english? Well, class is an attribute, just like style, so the syntax ought to be familiar:
    <p class= "english">Paragraph content.</p>
    Now the words paragraph content will be displayed in the Times New Roman font, or in serif.
     
  3. I control the languages that I use on by creating a class for each one. I use .english, .hebrew, .greek, .coptic, and .latin. (Actually, I use .english only when I am in the middle of a stretch of some other language and need to switch momentarily back to my native tongue.) Then, every time I write something in one of those languages, I reference the appropriate class. For example...:
    <span class= "hebrew"></span>
    ...or...:
    <div class= "greek"></div>
    Whatever text is enclosed in those tags will now reflect the styles listed on my stylesheet

There is no front-end advantage to using classes or stylesheets instead of the deprecated font face tag or other inline tags. One is just as easy to code as the other.

The advantage comes on the back end when someone comes up with a better font for the languages that my site covers, or when I decide that I want to display ancient languages across my site with a larger font size. A change or two to the language classes on my stylesheet and all the pages on my site are changed. This arrangement is terribly convenient, and is part of the very purpose of cascading style sheets.

I therefore very much recommend the use of classes for ancient languages that use different alphabets.

You may note another advantage of CSS by navigating to one of the texts that I provide on this site and clicking on the horizontal rule (or line) just below the title of the text. The change that you see is accomplished with a special script that changes which stylesheet the page is referencing.

One other point. You can create custom classes for virtually any coding purpose, of course, not just languages.

Coding for fonts or Unicode.

Independent fonts assign various foreign characters to the ASCII character references. That very same font, then, must be both invoked in the code for the web page...:

style= "font-family: Symbol"

...and installed on the computer browsing the page. There are dozens of these fonts available, and there is no rule that all web pages must use the same font. You place a burden on your visitor when your coding demands that he or she download and install a particular font before reading your page.

It is far better to use a Unicode font, or Unicode character references, since each character receives its own distinct numerical reference. Any Unicode font with the right range, then, can properly display the text. Unicode support is a bit spotty at present, but it is growing, and will probably only keep growing. The user must still install a font with the proper range, but does not have to keep changing fonts with every new web page, provided each page is using Unicode.

With Unicode, the web designer can invoke many fonts, from most to least preferred, for each language. For example:

style
{
   font-family: Cardo, ALPHABETUM,
   Code2000, TITUS Cyberbit Basic,
   Palatino Linotype, Athena,
   Arial Unicode MS, Times New Roman, serif;
}

Now, if the user has any one of these fonts installed on his or her computer, the characters will be properly rendered in the browser. If he or she has more than one of these fonts installed, the font that the browser chooses will be the one that appears in the highest position on the list. The exact keystrokes used to compose the passage will not matter, since each character owns a unique numerical reference.

Embedding Unicode in a text editor.

Older text editors will encode only in ASCII and ANSI. With such editors you will have to leave the escape sequences (in the format &#XXXX;) in your code for each foreign character beyond the ANSI (or extended ASCII) range.

I must emphasize that this method is completely compliant with Unicode, HTML 4.0, and XML standards. There is, however, a disadvantage: Your file sizes can be very large, since for each foreign letter your code will have four to seven keystrokes (even more for some ranges!).

More recent versions of popular text editors like Notepad allow Unicode encoding. You can store each character as its own glyph, instead of as an escape sequence.

  1. Open up Notepad. Click on file, then on save as in the file menu. A dialog box will appear.
  2. At the bottom of this dialogue box is a text box called encoding. ANSI will probably be selected. Change this selection to Unicode. (If the encoding text box does not appear, your text editor is not able to encode in Unicode.)
  3. Now click on format, then down to font. In the popup box that appears select a Unicode font. If you are running Windows 2000 or XP, you can try Palatino Linotype. Or, for an even broader selection of characters that can be displayed, try Cardo or TITUS Cyberbit Basic. (Both are free downloads.)
  4. Click on save, and give your file the title of your choice, along with the .html extension.
  5. Notepad is now ready to receive actual foreign characters and display them properly. (If your text editor is not set to encode Unicode, it will probably display the foreign characters as empty boxes.)

Fight spam!

If you have enjoyed or benefitted from this or any other ecourse on this site, or if you have suggestions for improvement, please leave feedback. If you spot any errors, please file them as errata.