Teaching and Learning with Technology

Computing With Accents and Foreign Scripts

Skip Menu

Using Image Files

Image files can be used for short clips, but make sure the ALT tag is comprehensible in a foreign language. If necessary, and English translation can be place in the title attibute in order to generate a mouse over effect.

The Technique

Use a graphic image in .gif (GIF), .png (PNG) or .svg (SVG) format of the desired text. This also allows for maximum control over the visual appearance of a piece of text. Below are some examples of how to incorporate GIF images.

Note: SVG files can be processed as text by screen readers and allow for font embedding.

Image Buttons

These pseudo-buttons show "P.S.U" in Runic, Cyrillic and Cherokee. (Author does not guarantee 100% accuracy of transliteration.)

Rune PSU
Runic "PSU"
Cyrillic PSU
Cyrillic "PSU"
Cherokee Kw-S-U
Cherokee "PSU"

GIF's Masquerading as Text

This list combines Latin-1 Text with Image Files. Again links are non-functional.


This technique is often used in sites with links to translated pages. The Non-Roman script images have to be manually colored the same as your link color with the underline inserted. In addition, care must be taken with the layout to preserve the illusion of "textness", especially across platforms. See below for a not-so-good example.

PSU | PSU in Runes | PSU in Cyrillic | PSU in Cherokee

When to Use It

Potential Pitfalls

  1. Remember to include the alt="text" in the original language. The ALT attribute is useful for users who have turned off their graphics or who rely on screen readers.
  2. Code for ALT tag
    HTML Code Result (Graphics Enabled) Result (Graphics Disabled)
    <img src="../../graphics/glyphs/IPAschwa.gif"> schwa -IMAGE-
    <img src="../../graphics/IPAschwa.gif alt="schwa"> schwa -schwa-

  3. You can add a title = "text" attribute if you want to include a "mouseover" effect. See the "Russky" button below for an example where rolling over the image will show "Russian" as the translation.


    <img src="../../graphics/glyphs/russkij.png" alt="Ruussky" title="Russian" width="119" height="46">
  4. Use .gif or .png files instead of .jpg files. JPG files are better suited for photographs.
  5. Always keep the original graphics file on hand, in case you need to make changes.
  6. Graphics files are not scalable. An in-text graphics file that looks fine in one platform may look out of scale on another. Some minor adjustments may be necessary.
  7. Print quality of an image file of a glyph is generally lower than a textual equivalent.

CSS Buttons

If you are using a well-supported script like Chinese, Japanese, Korean or Russian, then you have the option of leaving the content as text and adding CSS tags to make them appear like buttons.

See the Cyrillic example below:


<p class="fakebutton">ПСУ</p>


color: #69F; /* Color #69F = #6699FF */
font-weight: bold;
font-size: xx-large;
font-family: "Times CY","Times New Roman", "Times", serif;
text-align: center;
background-color: #009; /* #009 = #000099 */
border: 4px solid #69F;
width: 100px;
padding: 5px 10px;
margin-left: 30px;

Top of Page

Last Modified: Tuesday, 04-Jun-2013 12:41:33 EDT