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.
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.
These pseudo-buttons show "P.S.U" in Runic, Cyrillic and Cherokee. (Author does not guarantee 100% accuracy of transliteration.)
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 | | |
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.
|HTML Code||Result (Graphics Enabled)||Result (Graphics Disabled)|
|<img src="../../graphics/IPAschwa.gif alt="schwa">||-schwa-|
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:
color: #69F; /* Color #69F = #6699FF */
font-family: "Times CY","Times New Roman", "Times", serif;
background-color: #009; /* #009 = #000099 */
border: 4px solid #69F;
padding: 5px 10px;
©Penn State University, 2000-2013.
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 (firstname.lastname@example.org).
This site uses Unicode to display non-English characters. This site is best viewed in the most recent versions of your browser.
Unicode character names and hexadecimal entity codes are taken from the public Unicode Character Charts.
This publication is available in alternate media upon request.
Last Modified: Tuesday, 04-Jun-2013 12:41:33 EDT