Teaching and Learning with Technology

Computing With Accents and Foreign Scripts

Skip Menu
LOCATION: Web Developers : Developing Tips : Dreamweaver Tips

Using Dreamweaver for Non-English Sites

Microsoft Expression (PC)

This Page

  1. Recommended Versions
  2. Insert Accents and Symbols
  3. Type Encoded Text
  4. Change Page and Default Encoding
  5. Add and Edit Language Tag
  6. Change Default Font
  7. Working with Importing Encoded Text

Recommended Versions

In general the more recent the version of Dreamweaver, the later a version of the Unicode standard is supported. However, most recent versions of Dreamweaver for Windows and Macintosh from Adobe work well with Unicode text. Instructions are current up to Adobe Dreamweaver CS4.

Note: Macintosh versions of Dreamwever before Dreamweaver MX 2004 (Macromedia) could not recognize all the Unicode based keyboards.

Default Encoding

In the most recent versions of Dreamweaver, particularly those released by Adobe, the default encoding has been set to utf-8 (Unicode).

In earlier versions, the default encoding may be "iso-8859-1" (Latin -1), but the developer had the option of changing the encoding to Unicode. See the Change Page and Default Encoding section below for more information

Top of Page

Insert Accents and Special Characters

Insert Special Characters

You can insert special characters into Dreamweaver by typing them in directly or by going to Insert » HTML » Special Characters. However, only a limited set of characters are available in this tool.

Character Map (Win) or Character Viewer/Character Palette (Mac)

You can also use the Character Map (provided on Windows) or the Character Viewer/Character Palette (provided by Mac) to insert virtually any character into a Dreamweaver document.

Encoding and Special Characters

Top of Page

Type Encoded Text Directly into Dreamweaver

For most scripts, you can type directly into Dreamweaver by switching your keyboards. Keyboards for any scripts you wish to use must first be installed and activated. See the Keyboards section for more details on how to activate keyboards. Supported keyboards include the Windows U.S. International Keyboard and the OS X Extended keyboard codes.

If switching keyboards does not work, then open the code view and make sure the encoding meta tag is set correctly.
Note: There may be additional issues with some less supported scripts, including lack of an appropriate encoded font for those characters. See the By Language section for recommended fonts for different scripts.

Top of Page

Change Page and Default Encoding Options

Change Default Encoding

In the most recent versions of Dreamweaver, the default encoding has been set to "utf-8" (Unicode), but in earlier versions the encoding was "iso-8859-1" (Latin 1). To change the default encoding for new HTML documents do the following:

  1. Open Dreamweaver, then under the Edit menu, choose Preferences (Dreamweaver » Preferences in OS X ) to open the Preferences window.
  2. In the Category menu to the left, select New Document. Select an item from the Default Encoding drop-down menu such as a version of Unicode/UTF-8, then click OK.


    screen capture new docs
    Screen Capture from Dreamweaver MX 2004. Later versions specify the version of Unicode supported (e.g. Version 5.1 in Dreamweaver CS4).

Top of Page

Add and Edit Language Tag

You will probably need access to the HTML code view to accomplish this efficiently.

Add Language Tag to a Document

  1. Click Split or Code at the upper left of the Dreamweaver document window to access the HTML code.
  2. Look for the initial <html> tag near the top of the document. This is where you should add the lang="" attribute as well as the xml:lang="" attribute for XHTML. A sample document XHTML tagged for U.S. English (en-US) is shown below.

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
  3. For other languages, a list of ISO-639-2 language tags is available at the Library of Congress.
    Note: If both a two-letter code and a three-letter code are available, use the shorter two letter code.

Add/Edit Language Tag for Word or Phrase

  1. Higlight the foreign language word or phrase.
  2. Go Insert » Tag. The Tag Chooser window will open.
  3. In the left hand directory window of the Tag Chooser, click the HTML tags folder, then the Formatting and Layout category, then General. A list of tags will appear in the right hand window.
  4. Highlight the span tag and click the Insert button.
    Tag Chooser window
  5. The Tag Editor window will open. Select the Language option on the left menu.
  6. Select an appropriate tag from the Language menu. Click OK to set the attribute.
    Note: That you can also set attribites for dir="ltr" or dir="rtl" in the Direction menu.
    Tag Editor set to Language view
  7. To edit a language tag
    1. Highlight the text of the target language.
    2. Go to Modify » Edit tag. The Tag Editor should open.
    3. Click the Language option, then select an option from the Language menu.

 

Change Default Font and Add Font Options

Note: Most modern browsers automatically switch fonts if the default font does not contain the appropriate character. However, if you wish to exercise more formatting control, you can do so in the Page Editor Options. See tips for selecting Web fonts for more information on selecting appropriate fonts.

Change Default Fonts

  1. Open Dreamweaver, then under the Edit menu, choose Preferences (Dreamweaver » Preferences in OS X) to open the Preferences window.
  2. In the Category menu to the left, select Fonts or Fonts/Encoding.
    Dreamweaver Screencapture
    Fonts Preferences from Dreamweaver
  3. In the Font Settings menu to the right, choose an appropriate script (e.g. "Cyrillic"). Be careful not to choose Default Encoding.
    Note: Although not all scripts are listed, Dreamweaver can actually import encoded text for other scripts.
  4. Select an appropriate font which matches that script from the Proportional Font, Fixed and HTML Inspector dropdown menus. Click OK to shut the window.
    Note: For the Unicode font, you may want specify a font which covers the target range of characters you are intersted in.
  5. Open a document which is encoded in a non-English script. The characters should be in that script, even in the HTML Source window.
  6. For some scripts, you can switch keyboards and type directly in that language.

Adding Font Options for CSS

To add to the list of possible font options to be used in CSS font formatting:

  1. Go to Format » Font menu and select the Edit Font List. The Edit Font List window opens.
  2. On the Edit Font List window, you can add a "Font list" which is a list of desired fonts in a prioritized order. For instance a list of of "Arial, Helvetica, sans-serif" would mean a browser should use Arial font if available, or Helvetica if Arial is not available.
  3. To create a new Font list, highlight a font in the Available fonts window on the right, then use the left arrow (<<) button to move it into the Chosen font window on the left.
    Note: It is important that any list include a common Windows font and a common Macintosh as well as any specialized font you wish to specify.
    Edit Font List Screen Capture

Top of Page

Import and Format Encoded Text

Another way to work with Dreamweaver is to open an encoded text file, copy and paste text and then add the formatting or style tags as needed.

Suggested Text Editors

These text editors allow you to easily type encoded text then export them as properly encoded HTML or text files.

  1. Microsoft Word - The simplest option is to copy and paste the text from Word into another text editor such as Notepad (Windows) or Text Edit (Apple). See details below for saving the files.
    Note: Because of Microsoft HTML formatting issues, export from Microsoft Word is not recommended.
  2. Notepad (free with Windows)
    1. When you save a .txt file, you switch the encoding from ANSI to UTF-8.
    2. You can cut and paste items into Dreamweaver, Web Expression or other HTML editor (HTML file must be set to utf-8 Unicode encoding).
  3. Apple TextEdit (free with OS X)
    1. Set up TextEdit to save as an encoded text (.txt) file by going to Preferences and selecting the Plain Text option then select an appropriate Encoding.
    2. You can cut and paste items into Dreamweaver, Web Expression, or other HTML editor (HTML file must be set to utf-8 Unicode encoding)
  4. UniType GlobalWriter (Windows) - To export an encoded HTML file, go to File then Save As. Select the HTML file type. The next window will ask you to choose an encoding before saving. If in doubt, choose Unicode.
  5. StarOffice (Windows/Linux)
    1. To save StarOffice documents as encoded documents, go to File, then Save As. Select the Text Encoded format. In the next window, select UTF-8 encoding.
    2. You can cut and paste items into Dreamweaver, Web Expression or other HTML editor (Dreamweaver file must be set to utf-8 Unicode encoding)
  6. Other text editors designed for foreign language text editing may be able to export encoded text or HTML files.

If you use this option, try to use only minimal formatting in the text editor then add formatting within Dreamweaver.

Top of Page

Potential Pitfalls

  1. Make sure file declares the encoding within the HTML HEAD tag; otherwise the keyboard may not work.The Unicode declaration is given below; see the Declare Encoding page for more examples.

    <head>
    <meta  http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>

  2. Avoid specifying specific fonts for a script as some alternative browsers and platforms may not be able to read the page (the encoding should be enough to trigger the font changes). If specific fonts must be specified, then make sure both Window and Macintosh equivalents are specified.
  3. When opening HTML files exported from a text editor, inspect the code to be sure it does not include vendor-specific tags which may not work on all browsers.
  4. For U.S. audiences, it is best to provide instructions to users on how to configure their browsers.
  5. For languages whose encoding systems are not widely supported by browsers, the text editor and Dreamweaver can still be used to develop the web page, but you will need to take extra steps to provide information on recommended browsers and fonts.
  6. Unfortunately, some scripts may be so undersupported that there may not be a viable encoding system or text editor available. In these cases another option should be used.

Links

Top of Page

[an error occurred while processing this directive]

Last Modified: Wednesday, 19-Dec-2012 16:53:21 EST