PDA

View Full Version : Spanish accents



Jacobb123
Aug 21st, 2007, 05:10 AM
I am having problems displaying spanish accents in my web pages. Could someone please explain how to put them in correctly

Arbitrator
Aug 21st, 2007, 06:04 AM
Save your document as UTF‐8 or ISO‐8859‐1 and input the characters directly. You can also use character references; for example, to create a Latin Small Letter N With Tilde, you would type ñ where f1 is a hexadecimal character code. You can also use character entity references like ñ for a limited number of characters; see Wikipedia for a reference. [1]

The only reason that you might need to use character references is if using a font without the characters in Internet Explorer 6, since that browser doesn’t seem to do glyph substitution when a character is missing from a font and embedded directly, or if you’re unable to type characters directly.


http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references

koyama
Aug 21st, 2007, 10:13 AM
The only reason that you might need to use character references is if using a font without the characters in Internet Explorer 6, since that browser doesn’t seem to do glyph substitution when a character is missing from a font and embedded directly, or if you’re unable to type characters directly.
According to Wikipedia: Unicode and HTML (http://en.wikipedia.org/wiki/Unicode_and_HTML) Internet Explorer does support glyph substitution at least to some extent. However, the mechanism for handling this seems to lie outside the browser itself. Altogether, support for glyph substitution seems to be weaker in IE than in Firefox in the sense that in IE the glyph substitution mechanism only allows for a limited set of fallback fonts for each given font. This means that a substitution glyph may be “missed” in IE.

The Microsoft page: Globalization Step-by-Step (http://www.microsoft.com/globaldev/getwr/steps/wrg_font.mspx) that is linked to in that Wikipedia article explains that there are two co-existing mechanisms for handling glyph substitution under Windows XP. Namely 1) Font Fallback which is handled by Uniscribe (http://en.wikipedia.org/wiki/Uniscribe) and 2) Font Linking which is configurable with the Registry Editor.

I also came across this helpful post (http://www.oreillynet.com/windows/blog/2004/07/why_firefox_beats_internet_exp.html#comment-22562) summarizing differences between Firefox's and IE's glyph subsitution mechanism.

From what I read in the above articles, one should be able to customize glyph substitution in Internet Explorer by making appropriate changes in the Registry. To me this is new stuff so I have still not tried it out. I don't know what differences there might be between IE6, IE7 and Windows XP vs. Vista.

I would be surprised if it made a difference in IE with respect to glyph substitution to use entities instead of typing the unicode character directly in a UTF-8 encoded HTML document, but I will need to do some testing of this too.

Arbitrator
Aug 22nd, 2007, 03:49 AM
According to Wikipedia: Unicode and HTML Internet Explorer does support glyph substitution at least to some extent. However, the mechanism for handling this seems to lie outside the browser itself. Altogether, support for glyph substitution seems to be weaker in IE than in Firefox in the sense that in IE the glyph substitution mechanism only allows for a limited set of fallback fonts for each given font. This means that a substitution glyph may be “missed” in IE.

The Microsoft page: Globalization Step-by-Step that is linked to in that Wikipedia article explains that there are two co-existing mechanisms for handling glyph substitution under Windows XP. Namely 1) Font Fallback which is handled by Uniscribe and 2) Font Linking which is configurable with the Registry Editor.

I also came across this helpful post summarizing differences between Firefox's and IE's glyph subsitution mechanism.This was certainly informative. I wasn’t aware that Unicode support was so poor. Considering only the table on Wikipedia [1], to which you linked:

Firefox 2 displays all of the characters.

Opera 9 does not display the “Gothic character Faiha” character.

Internet Explorer 6 (official testing method; on a virtualized Windows XP Professional SP2) doesn’t display the last six characters. I suppose that this is not surprising, since a virtualized machine probably doesn’t have access to all of my installed fonts; thus, I can’t see differences between IE6 and IE7 with a certainty.
Internet Explorer 6 (unofficial standalone), Internet Explorer 7, and Safari 3 (beta) do not display the “Ge'ez syllable Qha” or “Gothic symbol Faiha” characters.

After going to “Tools” (command) > “Internet Options” (command) > “General” (tab) > “Fonts” (button) > “Language script:” “Ethiopic” (drop‐down list) and selecting “GF Zemen Unicode” as the “Webpage font” in the selection list, the “Ge'ez syllable Qha” character started displaying correctly in both versions of Internet Explorer. It seems that when you install a new font, you have to manually enable it for Internet Explorer to default to it, even if there was no font to default font to begin with; notably, Firefox does this automatically immediately after the font is installed.

I see no character display options to get things working better in Safari, but that may change since, according to the Safari download page [2], “Support for International users” is “Coming Soon”.

Considering one of the resources that you mentioned [3], it’s not surprising that there is no option to display the Gothic character (in Internet Explorer) since it’s in the Supplementary Multilingual Plane. Support seems to be poor outside of Internet Explorer too. I’ve just realized that Windows Character Map does not allow me to access those characters (codepoint searches are limited to four characters when five are needed) and neither Opera 9 nor Safari 3 (beta) appear to support them. The former might explain why the Character Map shows some of my more exotic fonts as only containing few or no characters.


I would be surprised if it made a difference in IE with respect to glyph substitution to use entities instead of typing the unicode character directly in a UTF-8 encoded HTML document, but I will need to do some testing of this too.You’re probably right when I reconsider. I made this statement based on an experience a long time ago; when I think on it, it was probably an encoding issue rather than a glyph substitution issue.


http://en.wikipedia.org/wiki/Unicode_and_HTML#Web_browser_support
http://www.apple.com/safari/download/
http://www.oreillynet.com/windows/blog/2004/07/why_firefox_beats_internet_exp.html#comment-22562

koyama
Aug 24th, 2007, 12:25 PM
After going to “Tools” (command) > “Internet Options” (command) > “General” (tab) > “Fonts” (button) > “Language script:” “Ethiopic” (drop‐down list) and selecting “GF Zemen Unicode” as the “Webpage font” in the selection list, the “Ge'ez syllable Qha” character started displaying correctly in both versions of Internet Explorer. It seems that when you install a new font, you have to manually enable it for Internet Explorer to default to it, even if there was no font to default font to begin with; notably, Firefox does this automatically immediately after the font is installed.
Interesting. I had never really paid attention to that “Fonts” dialog in Internet Explorer 6. What is now puzzling me is what one is actually controlling with that dialogue when one changes a setting there.

The titles of the three list boxes: 1) “Lanugage Script”, 2) “Web page font”, and 3) “Plain text font” have unclear meanings. What is meant by “Language Script”? I'm not really sure. I will first have to investigate that.


I’ve just realized that Windows Character Map does not allow me to access those characters (codepoint searches are limited to four characters when five are needed) and neither Opera 9 nor Safari 3 (beta) appear to support them. The former might explain why the Character Map shows some of my more exotic fonts as only containing few or no characters.
I now see it too. So I downloaded BabelMap (http://www.babelstone.co.uk/Software/BabelMap.html) which I find gives a better overview than the Character Map tool. It is easier to see which glyphs are missing for a certain font. I didn't seem to have any font installed which had glyphs in the range above U+FFEE which the “Gothic symbol Faiha” belongs to.

After studying the previously mentioned resources I wouldn't say that all aspects of glyph substitution are clear in Internet Explorer. I did some testing and came across some weirdness. It seems that Internet Explorer 6 may “substitute” glyphs even when the glyph is available for the current font.

Take a look at this example (http://koyama.dk/demos/CF121888/CF121888.html). The font-family for the page is set to 'Arial'. Line 1 and Line 2 are identical except that Line 2 at the end contains the Arabic “Start of Rub El Hizb” glyph.

The five glyphs in Line 1 are all available in the Arial font except for the “Black Telephone” so one would think that IE6 would render the 4 symbols in Arial while borrowing a glyph for the “Black Telephone” from another font. This was not the case. I found that IE6 glyph substituted all 5 glyphs using other fonts (perhaps MS Gothic, Batang, or Dotum, I'm not sure because they look alike for those glyphs)

Here are my screen shots because you may be seeing different replacement glyphs if we don't have the same fonts installed.

Firefox 2 screen shot (http://koyama.dk/demos/CF121888/FF2.png)
IE6 screen shot (normal state) (http://koyama.dk/demos/CF121888/IE6-normal.png)

Then consider Line 2 with identical characters except for the added Arabic glyph at the end. Suddenly, IE6 displays the four symbols from before using the correct Arial font. But now, IE6 is not able to show the “Black telephone”, but instead shows a square to indicate a missing glyph. What is even more weird is that when one selects text using the mouse then the wrong glyphs are again used like in line 1, and the black telephone reappears.


IE6 screen shot (text selected with mouse) (http://koyama.dk/demos/CF121888/IE6-selected-text.png)

The symbols in the above example were chosen more or less randomly, so I assume that it is easy to construct examples like the above using other glyphs.

Arbitrator
Aug 25th, 2007, 08:04 AM
Interesting. I had never really paid attention to that “Fonts” dialog in Internet Explorer 6. What is now puzzling me is what one is actually controlling with that dialogue when one changes a setting there.

The titles of the three list boxes: 1) “Lanugage Script”, 2) “Web page font”, and 3) “Plain text font” have unclear meanings. What is meant by “Language Script”? I'm not really sure. I will first have to investigate that.Presumably, the script names are mapped to whatever characters are commonly used in that script. Firefox allows you to set fonts based upon script too, although the field is simply labeled “Fonts for”. “Plain text font” probably refers to fonts used in text/plain documents and “Webpage font” likely refers to fonts used in everything else.


I now see it too. So I downloaded BabelMap (http://www.babelstone.co.uk/Software/BabelMap.html) which I find gives a better overview than the Character Map tool. It is easier to see which glyphs are missing for a certain font.Thanks for that. I had been looking for such a program in the past. Specifically, I wanted one that would give larger previews of the glyphs, but couldn’t find a free one. I’ll use it in place of the Windows Character Map.


I didn't seem to have any font installed which had glyphs in the range above U+FFEE which the “Gothic symbol Faiha” belongs to.Check out Wikipedia [1] for a list of fonts containing the Gothic character block. I have all of the fonts listed installed except for the commercial one, so the characters display fine in Firefox and BabelMap.


After studying the previously mentioned resources I wouldn't say that all aspects of glyph substitution are clear in Internet Explorer. I did some testing and came across some weirdness. It seems that Internet Explorer 6 may “substitute” glyphs even when the glyph is available for the current font.

Take a look at this example (http://koyama.dk/demos/CF121888/CF121888.html). The font-family for the page is set to 'Arial'. Line 1 and Line 2 are identical except that Line 2 at the end contains the Arabic “Start of Rub El Hizb” glyph.

The five glyphs in Line 1 are all available in the Arial font except for the “Black Telephone” so one would think that IE6 would render the 4 symbols in Arial while borrowing a glyph for the “Black Telephone” from another font. This was not the case. I found that IE6 glyph substituted all 5 glyphs using other fonts (perhaps MS Gothic, Batang, or Dotum, I'm not sure because they look alike for those glyphs)

Here are my screen shots because you may be seeing different replacement glyphs if we don't have the same fonts installed.

Firefox 2 screen shot (http://koyama.dk/demos/CF121888/FF2.png)
IE6 screen shot (normal state) (http://koyama.dk/demos/CF121888/IE6-normal.png)

Then consider Line 2 with identical characters except for the added Arabic glyph at the end. Suddenly, IE6 displays the four symbols from before using the correct Arial font. But now, IE6 is not able to show the “Black telephone”, but instead shows a square to indicate a missing glyph. What is even more weird is that when one selects text using the mouse then the wrong glyphs are again used like in line 1, and the black telephone reappears.


IE6 screen shot (text selected with mouse) (http://koyama.dk/demos/CF121888/IE6-selected-text.png)

The symbols in the above example were chosen more or less randomly, so I assume that it is easy to construct examples like the above using other glyphs.That’s something that I’ve never noticed before.

Additionally, I noted that Internet Explorer 6 (standalone) and Internet Explorer 7 seem to render the page identically aside from the glyph substitution except that Internet Explorer 7 renders both examples with the same font, so something was fixed and something else wasn’t. I also noted that if I highlighted or double‐clicked the telephone character, sometimes the glyph would change and stay that way in Internet Explorer 7. If I change the Arabic character to a Japanese character, both examples are rendered without any replacement glyphs (i.e., correctly), in a uniform font (although the fonts chosen differ between the two browser versions), and the text selection bug is gone.

My guess would be that this has something to do with an implicit right‐to‐left (RTL) mode being triggered by the Arabic character; Japanese is traditionally written RTL too, but I don’t think that it triggers any such mode in browsers. I added a few more Arabic characters and they weren’t rendered RTL, but text selection was done RTL. I then tried explicitly declaring RTL mode via CSS, but I didn’t see the issue in that case.

I also noted that Notepad++ renders only one of the three instances of the Black Telephone character; that would be the one that occurs on the line with the Arabic character (and Japanese, when I changed it). However, all it takes is a line‐break between the Arabic/Japanese characters and the rest of the string to cause the Black Telephone glyph to change into a replacement glyph. Apparently, Notepad++ does some kind of substitution on a line‐by‐line basis.

Notepad++ also changed its rendering of the Black Heart Suit character depending upon whether I used the Arabic or Japanese character.

Edit: Apparently, it’s not even on a line‐by‐line basis. Simply placing a markup character (< or &) between the Arabic/Japanese character and the rest of the string causes the heart and telephone characters to react.



Firefox 2 screen shot (http://koyama.dk/demos/CF121888/FF2.png)
On another note, I noticed that your Firefox screen shot had text that looked more anti‐aliased than mine despite your apparent use of the same operating system and browser. I did a quick test and it seems that large text appears smoother when “Standard” font smoothing is enabled while small text looks ugly, so to speak. ClearType seems to be the opposite with smaller font sizes looking smooth and larger font sizes having jagged edges. There’s weirdness everywhere.


http://en.wikipedia.org/wiki/Help:Gothic_Unicode_Fonts