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.)

Runic "PSU"

Cyrillic "PSU"

Cherokee "PSU"

GIF's Masquerading as Text

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

• PSU (This is text)
• (Image of Runic PSU)
• (Image of Cyrillic PSU)
• (Image of Cherokee PSU)

 

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 | | |

When to Use It

This is best used for small pieces of foreign language text such as buttons, stray non Latin-1 glyphs or short link text. Graphic buttons are often used point users to properly encoded Web pages or PDF files written in the relevant language.

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.

HTML Code	Result (Graphics Enabled)	Result (Graphics Disabled)
<img src="../../graphics/glyphs/IPAschwa.gif">		-IMAGE-
<img src="../../graphics/IPAschwa.gif alt="schwa">		-schwa-

2. 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">
   
3. Use .gif or .png files instead of .jpg files. JPG files are better suited for photographs.
4. Always keep the original graphics file on hand, in case you need to make changes.
5. 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.
6. 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>

.fakebutton

{
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

©Penn State University, 2000-2007.
This Web page maintained by Teaching and Learning with Technology, a unit of Information Technology Services. For questions or comments on this Web page, please contact Elizabeth J. Pyatt (ejp10@psu.edu).

Unicode character names and hexadecimal entity codes are taken from the public Unicode Character Charts.

Last Modified: Wednesday, 01-Aug-2007 17:15:08 EDT