How do I view country flags on Windows 10 through HTML? - html

Is there a work around to make country flag emoji visible on windows 10 through HTML?
<!DOCTYPE html>
<html>
<style>
body {
font-size: 40px;
}
</style>
<body>
<p>9983 will display โ›ฟ</p>
<p>How to display American or Japanese flags?</p>
<p>๐Ÿ‡บ๐Ÿ‡ธ is just letters on Windows 10 ๐Ÿ˜“</p>
</body>
</html>
I found this on https://mdbootstrap.com/docs/jquery/content/flag/
I don't see a flag emoji on https://www.w3schools.com/charsets/ref_emoji.asp
I can view them on https://www.emojicopy.com/ but cannot use.
I found a CSS flag on
https://github.com/pixelastic/css-flags/blob/master/app/styles/_flags/usa.scss
I'm still learning to use stackOverflow, and I'm new at coding.
This is my fourth try at this question.

Use Noto Color Emoji font.
First, write a #font-face rule with the unicode-range property. Then add the font to the top of your font stack:
(Source)
#font-face {
font-family: NotoColorEmojiLimited;
unicode-range: U+1F1E6-1F1FF;
src: url(https://raw.githack.com/googlefonts/noto-emoji/main/fonts/NotoColorEmoji.ttf);
}
div {
font-family: 'NotoColorEmojiLimited', -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol';
}
<div>
<p>
๐Ÿ‡ฆ๐Ÿ‡ซ ๐Ÿ‡ฆ๐Ÿ‡ฑ ๐Ÿ‡ฉ๐Ÿ‡ฟ ๐Ÿ‡ฆ๐Ÿ‡ฉ ๐Ÿ‡ฆ๐Ÿ‡ด ๐Ÿ‡ฆ๐Ÿ‡ฌ ๐Ÿ‡ฆ๐Ÿ‡ท ๐Ÿ‡ฆ๐Ÿ‡ฒ ๐Ÿ‡ฆ๐Ÿ‡บ ๐Ÿ‡ฆ๐Ÿ‡น ๐Ÿ‡ฆ๐Ÿ‡ฟ ๐Ÿ‡ง๐Ÿ‡ธ ๐Ÿ‡ง๐Ÿ‡ญ ๐Ÿ‡ง๐Ÿ‡ฉ ๐Ÿ‡ง๐Ÿ‡ง ๐Ÿ‡ง๐Ÿ‡พ ๐Ÿ‡ง๐Ÿ‡ช ๐Ÿ‡ง๐Ÿ‡ฟ ๐Ÿ‡ง๐Ÿ‡ฏ ๐Ÿ‡ง๐Ÿ‡น ๐Ÿ‡ง๐Ÿ‡ด ๐Ÿ‡ง๐Ÿ‡ฆ ๐Ÿ‡ง๐Ÿ‡ผ ๐Ÿ‡ง๐Ÿ‡ท ๐Ÿ‡ง๐Ÿ‡ณ ๐Ÿ‡ง๐Ÿ‡ฌ ๐Ÿ‡ง๐Ÿ‡ซ ๐Ÿ‡ง๐Ÿ‡ฎ ๐Ÿ‡จ๐Ÿ‡ป ๐Ÿ‡ฐ๐Ÿ‡ญ ๐Ÿ‡จ๐Ÿ‡ฒ ๐Ÿ‡จ๐Ÿ‡ฆ ๐Ÿ‡จ๐Ÿ‡ซ ๐Ÿ‡น๐Ÿ‡ฉ ๐Ÿ‡จ๐Ÿ‡ฑ ๐Ÿ‡จ๐Ÿ‡ด ๐Ÿ‡ฐ๐Ÿ‡ฒ ๐Ÿ‡จ๐Ÿ‡ฉ ๐Ÿ‡จ๐Ÿ‡ท ๐Ÿ‡จ๐Ÿ‡ฎ ๐Ÿ‡ญ๐Ÿ‡ท ๐Ÿ‡จ๐Ÿ‡บ ๐Ÿ‡จ๐Ÿ‡พ ๐Ÿ‡จ๐Ÿ‡ฟ ๐Ÿ‡ฐ๐Ÿ‡ต ๐Ÿ‡จ๐Ÿ‡ฌ ๐Ÿ‡ฉ๐Ÿ‡ฐ ๐Ÿ‡ฉ๐Ÿ‡ฏ ๐Ÿ‡ฉ๐Ÿ‡ฒ ๐Ÿ‡ฉ๐Ÿ‡ด ๐Ÿ‡ช๐Ÿ‡จ ๐Ÿ‡ช๐Ÿ‡ฌ ๐Ÿ‡ธ๐Ÿ‡ป ๐Ÿ‡ฌ๐Ÿ‡ถ ๐Ÿ‡ช๐Ÿ‡ท ๐Ÿ‡ช๐Ÿ‡ช ๐Ÿ‡ธ๐Ÿ‡ฟ ๐Ÿ‡ช๐Ÿ‡น ๐Ÿ‡ซ๐Ÿ‡ฏ ๐Ÿ‡ซ๐Ÿ‡ฎ ๐Ÿ‡ซ๐Ÿ‡ท ๐Ÿ‡ฌ๐Ÿ‡ฆ ๐Ÿ‡ฌ๐Ÿ‡ฒ ๐Ÿ‡ฌ๐Ÿ‡ช ๐Ÿ‡ฉ๐Ÿ‡ช ๐Ÿ‡ฌ๐Ÿ‡ญ ๐Ÿ‡ฌ๐Ÿ‡ท ๐Ÿ‡ฌ๐Ÿ‡ฉ ๐Ÿ‡ฌ๐Ÿ‡น ๐Ÿ‡ฌ๐Ÿ‡ณ ๐Ÿ‡ฌ๐Ÿ‡ผ ๐Ÿ‡ฌ๐Ÿ‡พ ๐Ÿ‡ญ๐Ÿ‡น ๐Ÿ‡ญ๐Ÿ‡ณ ๐Ÿ‡ญ๐Ÿ‡บ ๐Ÿ‡ฎ๐Ÿ‡ธ ๐Ÿ‡ฎ๐Ÿ‡ณ ๐Ÿ‡ฎ๐Ÿ‡ฉ ๐Ÿ‡ฎ๐Ÿ‡ท ๐Ÿ‡ฎ๐Ÿ‡ถ ๐Ÿ‡ฎ๐Ÿ‡ช ๐Ÿ‡ฎ๐Ÿ‡ฑ ๐Ÿ‡ฎ๐Ÿ‡น ๐Ÿ‡ฏ๐Ÿ‡ฒ ๐Ÿ‡ฏ๐Ÿ‡ต ๐Ÿ‡ฏ๐Ÿ‡ด ๐Ÿ‡ฐ๐Ÿ‡ฟ ๐Ÿ‡ฐ๐Ÿ‡ช ๐Ÿ‡ฐ๐Ÿ‡ฎ ๐Ÿ‡ฐ๐Ÿ‡ผ ๐Ÿ‡ฐ๐Ÿ‡ฌ ๐Ÿ‡ฑ๐Ÿ‡ฆ ๐Ÿ‡ฑ๐Ÿ‡ป ๐Ÿ‡ฑ๐Ÿ‡ง ๐Ÿ‡ฑ๐Ÿ‡ธ ๐Ÿ‡ฑ๐Ÿ‡ท ๐Ÿ‡ฑ๐Ÿ‡พ ๐Ÿ‡ฑ๐Ÿ‡ฎ ๐Ÿ‡ฑ๐Ÿ‡น ๐Ÿ‡ฑ๐Ÿ‡บ ๐Ÿ‡ฒ๐Ÿ‡ฌ ๐Ÿ‡ฒ๐Ÿ‡ผ ๐Ÿ‡ฒ๐Ÿ‡พ ๐Ÿ‡ฒ๐Ÿ‡ป ๐Ÿ‡ฒ๐Ÿ‡ฑ ๐Ÿ‡ฒ๐Ÿ‡น ๐Ÿ‡ฒ๐Ÿ‡ญ ๐Ÿ‡ฒ๐Ÿ‡ท ๐Ÿ‡ฒ๐Ÿ‡บ ๐Ÿ‡ฒ๐Ÿ‡ฝ ๐Ÿ‡ซ๐Ÿ‡ฒ ๐Ÿ‡ฒ๐Ÿ‡จ ๐Ÿ‡ฒ๐Ÿ‡ณ ๐Ÿ‡ฒ๐Ÿ‡ช ๐Ÿ‡ฒ๐Ÿ‡ฆ ๐Ÿ‡ฒ๐Ÿ‡ฟ ๐Ÿ‡ฒ๐Ÿ‡ฒ ๐Ÿ‡ณ๐Ÿ‡ฆ ๐Ÿ‡ณ๐Ÿ‡ท ๐Ÿ‡ณ๐Ÿ‡ต ๐Ÿ‡ณ๐Ÿ‡ฑ ๐Ÿ‡ณ๐Ÿ‡ฟ ๐Ÿ‡ณ๐Ÿ‡ฎ ๐Ÿ‡ณ๐Ÿ‡ช ๐Ÿ‡ณ๐Ÿ‡ฌ ๐Ÿ‡ฒ๐Ÿ‡ฐ ๐Ÿ‡ณ๐Ÿ‡ด ๐Ÿ‡ด๐Ÿ‡ฒ ๐Ÿ‡ต๐Ÿ‡ฐ ๐Ÿ‡ต๐Ÿ‡ผ ๐Ÿ‡ต๐Ÿ‡ฆ ๐Ÿ‡ต๐Ÿ‡ฌ ๐Ÿ‡ต๐Ÿ‡พ ๐Ÿ‡ต๐Ÿ‡ช ๐Ÿ‡ต๐Ÿ‡ญ ๐Ÿ‡ต๐Ÿ‡ฑ ๐Ÿ‡ต๐Ÿ‡น ๐Ÿ‡ถ๐Ÿ‡ฆ ๐Ÿ‡ฐ๐Ÿ‡ท ๐Ÿ‡ฒ๐Ÿ‡ฉ ๐Ÿ‡ท๐Ÿ‡ด ๐Ÿ‡ท๐Ÿ‡บ ๐Ÿ‡ท๐Ÿ‡ผ ๐Ÿ‡ฐ๐Ÿ‡ณ ๐Ÿ‡ฑ๐Ÿ‡จ ๐Ÿ‡ป๐Ÿ‡จ ๐Ÿ‡ผ๐Ÿ‡ธ ๐Ÿ‡ธ๐Ÿ‡ฒ ๐Ÿ‡ธ๐Ÿ‡น ๐Ÿ‡ธ๐Ÿ‡ฆ ๐Ÿ‡ธ๐Ÿ‡ณ ๐Ÿ‡ท๐Ÿ‡ธ ๐Ÿ‡ธ๐Ÿ‡จ ๐Ÿ‡ธ๐Ÿ‡ฑ ๐Ÿ‡ธ๐Ÿ‡ฌ ๐Ÿ‡ธ๐Ÿ‡ฐ ๐Ÿ‡ธ๐Ÿ‡ฎ ๐Ÿ‡ธ๐Ÿ‡ง ๐Ÿ‡ธ๐Ÿ‡ด ๐Ÿ‡ฟ๐Ÿ‡ฆ ๐Ÿ‡ธ๐Ÿ‡ธ ๐Ÿ‡ช๐Ÿ‡ธ ๐Ÿ‡ฑ๐Ÿ‡ฐ ๐Ÿ‡ธ๐Ÿ‡ฉ ๐Ÿ‡ธ๐Ÿ‡ท ๐Ÿ‡ธ๐Ÿ‡ช ๐Ÿ‡จ๐Ÿ‡ญ ๐Ÿ‡ธ๐Ÿ‡พ ๐Ÿ‡น๐Ÿ‡ฏ ๐Ÿ‡น๐Ÿ‡ญ ๐Ÿ‡น๐Ÿ‡ฑ ๐Ÿ‡น๐Ÿ‡ฌ ๐Ÿ‡น๐Ÿ‡ด ๐Ÿ‡น๐Ÿ‡น ๐Ÿ‡น๐Ÿ‡ณ ๐Ÿ‡น๐Ÿ‡ท ๐Ÿ‡น๐Ÿ‡ฒ ๐Ÿ‡น๐Ÿ‡ป ๐Ÿ‡บ๐Ÿ‡ฌ ๐Ÿ‡บ๐Ÿ‡ฆ ๐Ÿ‡ฆ๐Ÿ‡ช ๐Ÿ‡ฌ๐Ÿ‡ง ๐Ÿ‡น๐Ÿ‡ฟ ๐Ÿ‡บ๐Ÿ‡ธ ๐Ÿ‡บ๐Ÿ‡พ ๐Ÿ‡บ๐Ÿ‡ฟ ๐Ÿ‡ป๐Ÿ‡บ ๐Ÿ‡ป๐Ÿ‡ช ๐Ÿ‡ป๐Ÿ‡ณ ๐Ÿ‡พ๐Ÿ‡ช ๐Ÿ‡ฟ๐Ÿ‡ฒ ๐Ÿ‡ฟ๐Ÿ‡ผ
</p>
<p>
Noto Color Emoji abcdefghijklmnopqrstuvwxyz0123456789
</p>
</div>

Flags don't seem to work on Windows due to political reasons, see https://answers.microsoft.com/en-us/windows/forum/all/flag-emoji/85b163bc-786a-4918-9042-763ccf4b6c05?page=1
This thread seems to have found a workaround
Flag Emojis not rendering

Windows includes the Segoe UI Emoji font, but it does not support flags. To see flag emoji on Windows 10, you'll have to provide a custom emoji font that does support flags.
There's an ISO standard with two-letter codes for countries, like "JP" for Japan. In Unicode, the emoji flags are encoded as a pair of special characters that correspond to "A" to "Z", but that are different characters from A-Z. You can see the different sequences at https://unicode.org/emoji/charts/full-emoji-list.html#country-flag. For example, for the Japanese flag the sequence U+1F1EF U+1F1F5 is used. To encode those in a Web page, you can use character entities ๐Ÿ‡ฏ๐Ÿ‡ต: "๐Ÿ‡ฏ๐Ÿ‡ต". If the browser / host OS support display of emoji flags, that's what you'll see. If not, you'll probably see something that looks like "JP".

The problem is that the Windows' default emoji font, Segoe UI Emoji, has the 26 country flag letter codepoints the country flags are composed of, but has only letters representing them, so the flags will always be rendered as the Segoe UI Emoji letters unless an application explicitly declares that another Emoji Font is to be preferred.
Luckily, you can just replace the Windows Emoji font by taking another Emoji Font and changing its internal name to Segoe UI Emoji.
I did that for Google's Noto Emoji font, which you can download at https://github.com/perguto/Country-Flag-Emojis-for-Windows.

Related

How to display text with spaces in HTML

here I have an example. how can I display this text on my html page as is?
I tried using &nbsp for spaces and br for lines, br seemed to work but &nbsp did not.
-`
.o+`
`ooo/
`+oooo:
`+oooooo:
-+oooooo+:
`/:-:++oooo+:
`/++++/+++++++:
`/++++++++++++++:
`/+++ooooooooooooo/`
./ooosssso++osssssso+`
.oossssso-````/ossssss+`
-osssssso. :ssssssso.
:osssssss/ osssso+++.
/ossssssss/ +ssssooo/-
`/ossssso+/:- -:/+osssso+-
`+sso+:-` `.-/+oso:
`++:. `-/+/
.` `
Here is Code snippet to check how it's rendered
<p>
-`
.o+`
`ooo/
`+oooo:
`+oooooo:
-+oooooo+:
`/:-:++oooo+:
`/++++/+++++++:
`/++++++++++++++:
`/+++ooooooooooooo/`
./ooosssso++osssssso+`
.oossssso-````/ossssss+`
-osssssso. :ssssssso.
:osssssss/ osssso+++.
/ossssssss/ +ssssooo/-
`/ossssso+/:- -:/+osssso+-
`+sso+:-` `.-/+oso:
`++:. `-/+/
.` `
</p>
Use the preformatted text element: <pre>โ€”it renders text and whitespace exactly as written, using a monospaced font.
<pre>
-`
.o+`
`ooo/
`+oooo:
`+oooooo:
-+oooooo+:
`/:-:++oooo+:
`/++++/+++++++:
`/++++++++++++++:
`/+++ooooooooooooo/`
./ooosssso++osssssso+`
.oossssso-````/ossssss+`
-osssssso. :ssssssso.
:osssssss/ osssso+++.
/ossssssss/ +ssssooo/-
`/ossssso+/:- -:/+osssso+-
`+sso+:-` `.-/+oso:
`++:. `-/+/
.` `
</pre>
To make it more accessible for people using screen readers and other assistive technology, you could add an image ARIA role to the <pre> element and provide alternative text, like so:
<pre role="img" aria-label="ASCII art of an upward-sweeping, triangular arrow.">

Thymeleaf special character conversion in Outlook

I have following html code (data coming in the variable as UTF-8)
<p style="margin: 0; font-size: 14px; font-family: Helvetica, Arial, sans-serif;">
Project Name: <span th:text="${projectName}">ProjectName</span>
</p>
Any special character that is in ${projectName} , for example : "Carol's" is getting converted to "Carol?s" in Outlook mail. Anyway to correct this in Thymeleaf ?

Beginners code: HTML Styling ID within ID not working

I have just started learning HTML and I am having problems with IDs/classes within IDs/classes.
So, to my knowledge, an ID is specified by a #. That would mean that if I wanted to style an ID within and ID, wouldn't that be:
#ID1 #ID2 {
...
}
Which would mean that the styling will only apply for ID2 that is inside ID1? Please correct me if I'm wrong. When I used the same principle within my (very simple beginner) code, it didn't work. Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>1 May 2016</title>
<style>
#name {
color: blue;
font-family: Tahoma;
}
#parafont #1 {
font-family: Arial;
}
#parafont #2 {
font-family: Times;
}
#parafont #3 {
font-family: Courier;
}
parafont #4 {
font-family: Lucida Grande;
}
#parafont #5 {
font-family: Helvetica;
}
#test1 #6 {
color: blue;
}
</style>
</head>
<body>
<h3 id="name">Bob Bobbington</h3>
<p>1 2 3 4 5 6 7 8 9 10</p>
<p>When was this website created? Check the <b>title</b>.</p>
<h3>All animals are quite interesting...</h3>
<p id="parafont">
<span id="1">This is a test paragraph.</span>
<span id="2">Each sentence should have a different font.</span>
<span id="3">This paragraph is going to use some styling.</span>
<span id="4">Styling will change the font of each sentence.</span>
<span id="5">Let's see whether it works!</span>
</p>
<div id="test1">
<p id="6">Test</p>
</div>
</body>
</html>
All help is very much appreciated!
Change the id numbers 1 to something that starts with letters.
ID and NAME tokens must begin with a letter ([A-Za-z]) and may be
followed by any number of letters, digits ([0-9]), hyphens ("-"),
underscores ("_"), colons (":"), and periods (".").
IDs can not start with numbers first of all. Also since IDs are meant to be specific, using nesting to select an element is redundant. #id #id2 would be the same thing as just #id2 as long as the more specific #id #id2 was used

SVG rendering error after update

Im collecting digital signatures, SVG path, with an iPad.
Signatures are viewed with a browser (Chrome) which have worked perfectly for years.
Suddenly it was not perfect, whitespace are added below and to the right of the signature and it messes up my tables. I traced this back to an update of Chrome. If I downgrade Chrome it works like a charm.
Confusing is that same rendering error appears in IE and Firefox! New standard? Anyone knows how to fix this?
Code:
<svg xmlns=http://www.w3.org/2000/svg version=1.1><g transform=scale(0.14,0.14)> <g fill=none><path stroke=black stroke-width=8 d='M100,24 L98,24 L94,22 L86,22 L74,23 L63,27 L54,33 L49,38 L46,47 L46,58 L53,70 L60,78 L67,87 L72,97 L76,106 L79,117 L80,126 L80,136 L79,145 L72,151 L63,155 L51,157 L42,157 L32,153 L23,145 L17,139 L15,135 L14,132 L14,126 L23,121 L36,119 M138,87 L134,92 L134,99 L134,111 L132,123 L131,132 L131,138 L131,142 L131,143 M148,33 L145,35 L145,37 L145,39 L145,41 L146,42 L147,43 L148,43 L148,41 L148,36 L148,34 L147,33 L145,33 L144,33 L144,40 M241,89 L236,87 L231,87 L221,88 L209,94 L200,98 L195,101 L192,107 L192,110 L192,117 L195,121 L202,126 L212,126 L216,126 L224,123 L230,108 L237,91 L244,76 L247,67 L247,64 L247,63 L247,64 L246,70 L246,77 L245,85 L243,97 L240,112 L236,121 L231,131 L226,139 L221,146 L213,152 L205,157 L193,161 L180,164 L166,165 L154,165 L146,160 L144,151 L145,135 L155,123 L167,114 M285,68 L282,76 L280,87 L277,103 L275,116 L274,125 L273,128 L273,131 L279,120 L285,101 L295,77 L303,67 L306,63 L307,63 L309,63 L311,71 L314,82 L319,100 L322,112 L324,124 L326,132 L326,138 L326,141 L326,144 L325,144 L324,140 M393,91 L388,90 L382,90 L376,90 L366,90 L357,93 L350,101 L344,111 L343,120 L345,129 L353,132 L368,132 L379,124 L386,110 L394,89 L397,77 L397,75 L397,77 L396,97 L396,116 L396,130 L396,143 L399,152 L401,157 L403,160 L406,160 L411,149 M439,32 L438,34 L438,43 L440,56 L440,70 L441,84 L441,98 L441,111 L441,124 L440,133 L440,140 L440,145 L438,149 L435,150 M414,64 L416,65 L424,67 L433,67 L443,69 L450,71 L455,73 L460,74 L464,77 L467,78 L470,80 M489,83 L490,89 L490,104 L489,121 L488,134 L488,145 L492,150 L498,154 L504,154 L512,149 L517,137 L519,123 L520,115 L520,109 L520,106 L520,101 L519,101 L518,101 M549,85 L548,87 L547,92 L545,103 L543,115 L542,123 L542,129 L541,132 L541,135 L540,126 L539,111 L539,97 L543,85 L547,79 L550,77 L552,76 L556,76 L562,79 L568,83 L574,89 L577,91 M573,103 L574,105 L579,106 L586,108 L593,109 L596,110 L598,110 L598,109 L597,104 L594,99 L591,94 L588,92 L586,90 L585,90 L584,90 L583,91 L581,102 L577,118 L576,131 L577,145 L582,155 L591,160 L601,163 L610,164 L620,161 '></g></svg>
Assuming this svg is part of a larger html page then you almost certainly need height and width attributes on the <svg> element. Try height="100%" width="100%"
Firefox has worked this way for years as it's what the specification says. Chrome has recently changed to be compatible with Firefox and the SVG specification.

h1 and h2 classes not showing up in Internet Explorer

I'm having trouble getting the h1 and h2 tags to display at all in Internet Explorer. I looked at the CSS file but still couldn't see why it wouldn't work with IE9.
Here is the CSS code for the headers that are not showing up in IE:
.person h1
{
color: #475261;
font-size: 48px;
font-weight: 400;
letter-spacing: -1px;
margin-left: -60px;
}
.item h2
{
color: #06A;
font-family: Georgia, serif;
font-size: 22px;
font-weight: 400;
letter-spacing: -1px;
}
.item h2 a
{
color: #06A;
text-decoration: none;
}
Link: http://ItsNotch.com/experience
Cause of Problem
It appears that the h1 elements are being replaced by canvas elements by the cufon-yui.js script. According to this FAQ, it is known to not work in IE 9 Beta.
First Solution
However, they state there is a fix for it in their version 1.09i available at their official site.
Second Solution
If you look at item 8 of the FAQ, they say that if you don't want to update your js file, you can try some other code:
<!--[if gte IE 9]>
<script type="text/javascript">
Cufon.set('engine', 'canvas');
</script>
<![endif]-->
Read the FAQ for further instructions. I'm not sure if it will work though, just a warning.
Third Solution
You may also be interested in trying Typekit instead, which according to the cufon main site, also has the advantage of the text being selectable, which it currently isn't using cufon:
You might also want to take this
opportunity to try Typekit, a hosted,
#font-face-based alternative. Yes,
that means they support text
selection. It's the easiest way to
embrace standards.
Fourth Solution
You also always have the option of just not using one of these JavaScript-injected special fonts at all.
Replace cufon.js with the code given below, and problem solved.
/*
* Copyright (c) 2009 Simo Kinnunen.
* Licensed under the MIT license.
*
* #version 1.09i
*/
var Cufon=(function(){var m=function(){return m.replace.apply(null,arguments)};var x=m.DOM={ready:(function(){var C=false,E={loaded:1,complete:1};var B=[],D=function(){if(C){return}C=true;for(var F;F=B.shift();F()){}};if(document.addEventListener){document.addEventListener("DOMContentLoaded",D,false);window.addEventListener("pageshow",D,false)}if(!window.opera&&document.readyState){(function(){E[document.readyState]?D():setTimeout(arguments.callee,10)})()}if(document.readyState&&document.createStyleSheet){(function(){try{document.body.doScroll("left");D()}catch(F){setTimeout(arguments.callee,1)}})()}q(window,"load",D);return function(F){if(!arguments.length){D()}else{C?F():B.push(F)}}})(),root:function(){return document.documentElement||document.body}};var n=m.CSS={Size:function(C,B){this.value=parseFloat(C);this.unit=String(C).match(/[a-z%]*$/)[0]||"px";this.convert=function(D){return D/B*this.value};this.convertFrom=function(D){return D/this.value*B};this.toString=function(){return this.value+this.unit}},addClass:function(C,B){var D=C.className;C.className=D+(D&&" ")+B;return C},color:j(function(C){var B={};B.color=C.replace(/^rgba\((.*?),\s*([\d.]+)\)/,function(E,D,F){B.opacity=parseFloat(F);return"rgb("+D+")"});return B}),fontStretch:j(function(B){if(typeof B=="number"){return B}if(/%$/.test(B)){return parseFloat(B)/100}return{"ultra-condensed":0.5,"extra-condensed":0.625,condensed:0.75,"semi-condensed":0.875,"semi-expanded":1.125,expanded:1.25,"extra-expanded":1.5,"ultra-expanded":2}[B]||1}),getStyle:function(C){var B=document.defaultView;if(B&&B.getComputedStyle){return new a(B.getComputedStyle(C,null))}if(C.currentStyle){return new a(C.currentStyle)}return new a(C.style)},gradient:j(function(F){var G={id:F,type:F.match(/^-([a-z]+)-gradient\(/)[1],stops:[]},C=F.substr(F.indexOf("(")).match(/([\d.]+=)?(#[a-f0-9]+|[a-z]+\(.*?\)|[a-z]+)/ig);for(var E=0,B=C.length,D;E<B;++E){D=C[E].split("=",2).reverse();G.stops.push([D[1]||E/(B-1),D[0]])}return G}),quotedList:j(function(E){var D=[],C=/\s*((["'])([\s\S]*?[^\\])\2|[^,]+)\s*/g,B;while(B=C.exec(E)){D.push(B[3]||B[1])}return D}),recognizesMedia:j(function(G){var E=document.createElement("style"),D,C,B;E.type="text/css";E.media=G;try{E.appendChild(document.createTextNode("/**/"))}catch(F){}C=g("head")[0];C.insertBefore(E,C.firstChild);D=(E.sheet||E.styleSheet);B=D&&!D.disabled;C.removeChild(E);return B}),removeClass:function(D,C){var B=RegExp("(?:^|\\s+)"+C+"(?=\\s|$)","g");D.className=D.className.replace(B,"");return D},supports:function(D,C){var B=document.createElement("span").style;if(B[D]===undefined){return false}B[D]=C;return B[D]===C},textAlign:function(E,D,B,C){if(D.get("textAlign")=="right"){if(B>0){E=" "+E}}else{if(B<C-1){E+=" "}}return E},textShadow:j(function(F){if(F=="none"){return null}var E=[],G={},B,C=0;var D=/(#[a-f0-9]+|[a-z]+\(.*?\)|[a-z]+)|(-?[\d.]+[a-z%]*)|,/ig;while(B=D.exec(F)){if(B[0]==","){E.push(G);G={};C=0}else{if(B[1]){G.color=B[1]}else{G[["offX","offY","blur"][C++]]=B[2]}}}E.push(G);return E}),textTransform:(function(){var B={uppercase:function(C){return C.toUpperCase()},lowercase:function(C){return C.toLowerCase()},capitalize:function(C){return C.replace(/\b./g,function(D){return D.toUpperCase()})}};return function(E,D){var C=B[D.get("textTransform")];return C?C(E):E}})(),whiteSpace:(function(){var D={inline:1,"inline-block":1,"run-in":1};var C=/^\s+/,B=/\s+$/;return function(H,F,G,E){if(E){if(E.nodeName.toLowerCase()=="br"){H=H.replace(C,"")}}if(D[F.get("display")]){return H}if(!G.previousSibling){H=H.replace(C,"")}if(!G.nextSibling){H=H.replace(B,"")}return H}})()};n.ready=(function(){var B=!n.recognizesMedia("all"),E=false;var D=[],H=function(){B=true;for(var K;K=D.shift();K()){}};var I=g("link"),J=g("style");function C(K){return K.disabled||G(K.sheet,K.media||"screen")}function G(M,P){if(!n.recognizesMedia(P||"all")){return true}if(!M||M.disabled){return false}try{var Q=M.cssRules,O;if(Q){search:for(var L=0,K=Q.length;O=Q[L],L<K;++L){switch(O.type){case 2:break;case 3:if(!G(O.styleSheet,O.media.mediaText)){return false}break;default:break search}}}}catch(N){}return true}function F(){if(document.createStyleSheet){return true}var L,K;for(K=0;L=I[K];++K){if(L.rel.toLowerCase()=="stylesheet"&&!C(L)){return false}}for(K=0;L=J[K];++K){if(!C(L)){return false}}return true}x.ready(function(){if(!E){E=n.getStyle(document.body).isUsable()}if(B||(E&&F())){H()}else{setTimeout(arguments.callee,10)}});return function(K){if(B){K()}else{D.push(K)}}})();function s(D){var C=this.face=D.face,B={"\u0020":1,"\u00a0":1,"\u3000":1};this.glyphs=D.glyphs;this.w=D.w;this.baseSize=parseInt(C["units-per-em"],10);this.family=C["font-family"].toLowerCase();this.weight=C["font-weight"];this.style=C["font-style"]||"normal";this.viewBox=(function(){var F=C.bbox.split(/\s+/);var E={minX:parseInt(F[0],10),minY:parseInt(F[1],10),maxX:parseInt(F[2],10),maxY:parseInt(F[3],10)};E.width=E.maxX-E.minX;E.height=E.maxY-E.minY;E.toString=function(){return[this.minX,this.minY,this.width,this.height].join(" ")};return E})();this.ascent=-parseInt(C.ascent,10);this.descent=-parseInt(C.descent,10);this.height=-this.ascent+this.descent;this.spacing=function(L,N,E){var O=this.glyphs,M,K,G,P=[],F=0,J=-1,I=-1,H;while(H=L[++J]){M=O[H]||this.missingGlyph;if(!M){continue}if(K){F-=G=K[H]||0;P[I]-=G}F+=P[++I]=~~(M.w||this.w)+N+(B[H]?E:0);K=M.k}P.total=F;return P}}function f(){var C={},B={oblique:"italic",italic:"oblique"};this.add=function(D){(C[D.style]||(C[D.style]={}))[D.weight]=D};this.get=function(H,I){var G=C[H]||C[B[H]]||C.normal||C.italic||C.oblique;if(!G){return null}I={normal:400,bold:700}[I]||parseInt(I,10);if(G[I]){return G[I]}var E={1:1,99:0}[I%100],K=[],F,D;if(E===undefined){E=I>400}if(I==500){I=400}for(var J in G){if(!k(G,J)){continue}J=parseInt(J,10);if(!F||J<F){F=J}if(!D||J>D){D=J}K.push(J)}if(I<F){I=F}if(I>D){I=D}K.sort(function(M,L){return(E?(M>=I&&L>=I)?M<L:M>L:(M<=I&&L<=I)?M>L:M<L)?-1:1});return G[K[0]]}}function r(){function D(F,G){if(F.contains){return F.contains(G)}return F.compareDocumentPosition(G)&16}function B(G){var F=G.relatedTarget;if(!F||D(this,F)){return}C(this,G.type=="mouseover")}function E(F){C(this,F.type=="mouseenter")}function C(F,G){setTimeout(function(){var H=d.get(F).options;m.replace(F,G?h(H,H.hover):H,true)},10)}this.attach=function(F){if(F.onmouseenter===undefined){q(F,"mouseover",B);q(F,"mouseout",B)}else{q(F,"mouseenter",E);q(F,"mouseleave",E)}}}function u(){var C=[],D={};function B(H){var E=[],G;for(var F=0;G=H[F];++F){E[F]=C[D[G]]}return E}this.add=function(F,E){D[F]=C.push(E)-1};this.repeat=function(){var E=arguments.length?B(arguments):C,F;for(var G=0;F=E[G++];){m.replace(F[0],F[1],true)}}}function A(){var D={},B=0;function C(E){return E.cufid||(E.cufid=++B)}this.get=function(E){var F=C(E);return D[F]||(D[F]={})}}function a(B){var D={},C={};this.extend=function(E){for(var F in E){if(k(E,F)){D[F]=E[F]}}return this};this.get=function(E){return D[E]!=undefined?D[E]:B[E]};this.getSize=function(F,E){return C[F]||(C[F]=new n.Size(this.get(F),E))};this.isUsable=function(){return !!B}}function q(C,B,D){if(C.addEventListener){C.addEventListener(B,D,false)}else{if(C.attachEvent){C.attachEvent("on"+B,function(){return D.call(C,window.event)})}}}function v(C,B){var D=d.get(C);if(D.options){return C}if(B.hover&&B.hoverables[C.nodeName.toLowerCase()]){b.attach(C)}D.options=B;return C}function j(B){var C={};return function(D){if(!k(C,D)){C[D]=B.apply(null,arguments)}return C[D]}}function c(F,E){var B=n.quotedList(E.get("fontFamily").toLowerCase()),D;for(var C=0;D=B[C];++C){if(i[D]){return i[D].get(E.get("fontStyle"),E.get("fontWeight"))}}return null}function g(B){return document.getElementsByTagName(B)}function k(C,B){return C.hasOwnProperty(B)}function h(){var C={},B,F;for(var E=0,D=arguments.length;B=arguments[E],E<D;++E){for(F in B){if(k(B,F)){C[F]=B[F]}}}return C}function o(E,M,C,N,F,D){var K=document.createDocumentFragment(),H;if(M===""){return K}var L=N.separate;var I=M.split(p[L]),B=(L=="words");if(B&&t){if(/^\s/.test(M)){I.unshift("")}if(/\s$/.test(M)){I.push("")}}for(var J=0,G=I.length;J<G;++J){H=z[N.engine](E,B?n.textAlign(I[J],C,J,G):I[J],C,N,F,D,J<G-1);if(H){K.appendChild(H)}}return K}function l(D,M){var C=D.nodeName.toLowerCase();if(M.ignore[C]){return}var E=!M.textless[C];var B=n.getStyle(v(D,M)).extend(M);var F=c(D,B),G,K,I,H,L,J;if(!F){return}for(G=D.firstChild;G;G=I){K=G.nodeType;I=G.nextSibling;if(E&&K==3){if(H){H.appendData(G.data);D.removeChild(G)}else{H=G}if(I){continue}}if(H){D.replaceChild(o(F,n.whiteSpace(H.data,B,H,J),B,M,G,D),H);H=null}if(K==1){if(G.firstChild){if(G.nodeName.toLowerCase()=="cufon"){z[M.engine](F,null,B,M,G,D)}else{arguments.callee(G,M)}}J=G}}}var t=" ".split(/\s+/).length==0;var d=new A();var b=new r();var y=new u();var e=false;var z={},i={},w={autoDetect:false,engine:null,forceHitArea:false,hover:false,hoverables:{a:true},ignore:{applet:1,canvas:1,col:1,colgroup:1,head:1,iframe:1,map:1,optgroup:1,option:1,script:1,select:1,style:1,textarea:1,title:1,pre:1},printable:true,selector:(window.Sizzle||(window.jQuery&&function(B){return jQuery(B)})||(window.dojo&&dojo.query)||(window.Ext&&Ext.query)||(window.YAHOO&&YAHOO.util&&YAHOO.util.Selector&&YAHOO.util.Selector.query)||(window.$$&&function(B){return $$(B)})||(window.$&&function(B){return $(B)})||(document.querySelectorAll&&function(B){return document.querySelectorAll(B)})||g),separate:"words",textless:{dl:1,html:1,ol:1,table:1,tbody:1,thead:1,tfoot:1,tr:1,ul:1},textShadow:"none"};var p={words:/\s/.test("\u00a0")?/[^\S\u00a0]+/:/\s+/,characters:"",none:/^/};m.now=function(){x.ready();return m};m.refresh=function(){y.repeat.apply(y,arguments);return m};m.registerEngine=function(C,B){if(!B){return m}z[C]=B;return m.set("engine",C)};m.registerFont=function(D){if(!D){return m}var B=new s(D),C=B.family;if(!i[C]){i[C]=new f()}i[C].add(B);return m.set("fontFamily",'"'+C+'"')};m.replace=function(D,C,B){C=h(w,C);if(!C.engine){return m}if(!e){n.addClass(x.root(),"cufon-active cufon-loading");n.ready(function(){n.addClass(n.removeClass(x.root(),"cufon-loading"),"cufon-ready")});e=true}if(C.hover){C.forceHitArea=true}if(C.autoDetect){delete C.fontFamily}if(typeof C.textShadow=="string"){C.textShadow=n.textShadow(C.textShadow)}if(typeof C.color=="string"&&/^-/.test(C.color)){C.textGradient=n.gradient(C.color)}else{delete C.textGradient}if(!B){y.add(D,arguments)}if(D.nodeType||typeof D=="string"){D=[D]}n.ready(function(){for(var F=0,E=D.length;F<E;++F){var G=D[F];if(typeof G=="string"){m.replace(C.selector(G),C,true)}else{l(G,C)}}});return m};m.set=function(B,C){w[B]=C;return m};return m})();Cufon.registerEngine("vml",(function(){var e=document.namespaces;if(!e){return}e.add("cvml","urn:schemas-microsoft-com:vml");e=null;var b=document.createElement("cvml:shape");b.style.behavior="url(#default#VML)";if(!b.coordsize){return}b=null;var h=(document.documentMode||0)<8;document.write(('<style type="text/css">cufoncanvas{text-indent:0;}#media screen{cvml\\:shape,cvml\\:rect,cvml\\:fill,cvml\\:shadow{behavior:url(#default#VML);display:block;antialias:true;position:absolute;}cufoncanvas{position:absolute;text-align:left;}cufon{display:inline-block;position:relative;vertical-align:'+(h?"middle":"text-bottom")+";}cufon cufontext{position:absolute;left:-10000in;font-size:1px;}a cufon{cursor:pointer}}#media print{cufon cufoncanvas{display:none;}}</style>").replace(/;/g,"!important;"));function c(i,j){return a(i,/(?:em|ex|%)$|^[a-z-]+$/i.test(j)?"1em":j)}function a(l,m){if(m==="0"){return 0}if(/px$/i.test(m)){return parseFloat(m)}var k=l.style.left,j=l.runtimeStyle.left;l.runtimeStyle.left=l.currentStyle.left;l.style.left=m.replace("%","em");var i=l.style.pixelLeft;l.style.left=k;l.runtimeStyle.left=j;return i}function f(l,k,j,n){var i="computed"+n,m=k[i];if(isNaN(m)){m=k.get(n);k[i]=m=(m=="normal")?0:~~j.convertFrom(a(l,m))}return m}var g={};function d(p){var q=p.id;if(!g[q]){var n=p.stops,o=document.createElement("cvml:fill"),i=[];o.type="gradient";o.angle=180;o.focus="0";o.method="sigma";o.color=n[0][1];for(var m=1,l=n.length-1;m<l;++m){i.push(n[m][0]*100+"% "+n[m][1])}o.colors=i.join(",");o.color2=n[l][1];g[q]=o}return g[q]}return function(ac,G,Y,C,K,ad,W){var n=(G===null);if(n){G=K.alt}var I=ac.viewBox;var p=Y.computedFontSize||(Y.computedFontSize=new Cufon.CSS.Size(c(ad,Y.get("fontSize"))+"px",ac.baseSize));var y,q;if(n){y=K;q=K.firstChild}else{y=document.createElement("cufon");y.className="cufon cufon-vml";y.alt=G;q=document.createElement("cufoncanvas");y.appendChild(q);if(C.printable){var Z=document.createElement("cufontext");Z.appendChild(document.createTextNode(G));y.appendChild(Z)}if(!W){y.appendChild(document.createElement("cvml:shape"))}}var ai=y.style;var R=q.style;var l=p.convert(I.height),af=Math.ceil(l);var V=af/l;var P=V*Cufon.CSS.fontStretch(Y.get("fontStretch"));var U=I.minX,T=I.minY;R.height=af;R.top=Math.round(p.convert(T-ac.ascent));R.left=Math.round(p.convert(U));ai.height=p.convert(ac.height)+"px";var F=Y.get("color");var ag=Cufon.CSS.textTransform(G,Y).split("");var L=ac.spacing(ag,f(ad,Y,p,"letterSpacing"),f(ad,Y,p,"wordSpacing"));if(!L.length){return null}var k=L.total;var x=-U+k+(I.width-L[L.length-1]);var ah=p.convert(x*P),X=Math.round(ah);var O=x+","+I.height,m;var J="r"+O+"ns";var u=C.textGradient&&d(C.textGradient);var o=ac.glyphs,S=0;var H=C.textShadow;var ab=-1,aa=0,w;while(w=ag[++ab]){var D=o[ag[ab]]||ac.missingGlyph,v;if(!D){continue}if(n){v=q.childNodes[aa];while(v.firstChild){v.removeChild(v.firstChild)}}else{v=document.createElement("cvml:shape");q.appendChild(v)}v.stroked="f";v.coordsize=O;v.coordorigin=m=(U-S)+","+T;v.path=(D.d?"m"+D.d+"xe":"")+"m"+m+J;v.fillcolor=F;if(u){v.appendChild(u.cloneNode(false))}var ae=v.style;ae.width=X;ae.height=af;if(H){var s=H[0],r=H[1];var B=Cufon.CSS.color(s.color),z;var N=document.createElement("cvml:shadow");N.on="t";N.color=B.color;N.offset=s.offX+","+s.offY;if(r){z=Cufon.CSS.color(r.color);N.type="double";N.color2=z.color;N.offset2=r.offX+","+r.offY}N.opacity=B.opacity||(z&&z.opacity)||1;v.appendChild(N)}S+=L[aa++]}var M=v.nextSibling,t,A;if(C.forceHitArea){if(!M){M=document.createElement("cvml:rect");M.stroked="f";M.className="cufon-vml-cover";t=document.createElement("cvml:fill");t.opacity=0;M.appendChild(t);q.appendChild(M)}A=M.style;A.width=X;A.height=af}else{if(M){q.removeChild(M)}}ai.width=Math.max(Math.ceil(p.convert(k*P)),0);if(h){var Q=Y.computedYAdjust;if(Q===undefined){var E=Y.get("lineHeight");if(E=="normal"){E="1em"}else{if(!isNaN(E)){E+="em"}}Y.computedYAdjust=Q=0.5*(a(ad,E)-parseFloat(ai.height))}if(Q){ai.marginTop=Math.ceil(Q)+"px";ai.marginBottom=Q+"px"}}return y}})());Cufon.registerEngine("canvas",(function(){var b=document.createElement("canvas");if(!b||!b.getContext||!b.getContext.apply){return}b=null;var a=Cufon.CSS.supports("display","inline-block");var e=!a&&(document.compatMode=="BackCompat"||/frameset|transitional/i.test(document.doctype.publicId));var f=document.createElement("style");f.type="text/css";f.appendChild(document.createTextNode(("cufon{text-indent:0;}#media screen,projection{cufon{display:inline;display:inline-block;position:relative;vertical-align:middle;"+(e?"":"font-size:1px;line-height:1px;")+"}cufon cufontext{display:-moz-inline-box;display:inline-block;width:0;height:0;overflow:hidden;text-indent:-10000in;}"+(a?"cufon canvas{position:relative;}":"cufon canvas{position:absolute;}")+"}#media print{cufon{padding:0;}cufon canvas{display:none;}}").replace(/;/g,"!important;")));document.getElementsByTagName("head")[0].appendChild(f);function d(p,h){var n=0,m=0;var g=[],o=/([mrvxe])([^a-z]*)/g,k;generate:for(var j=0;k=o.exec(p);++j){var l=k[2].split(",");switch(k[1]){case"v":g[j]={m:"bezierCurveTo",a:[n+~~l[0],m+~~l[1],n+~~l[2],m+~~l[3],n+=~~l[4],m+=~~l[5]]};break;case"r":g[j]={m:"lineTo",a:[n+=~~l[0],m+=~~l[1]]};break;case"m":g[j]={m:"moveTo",a:[n=~~l[0],m=~~l[1]]};break;case"x":g[j]={m:"closePath"};break;case"e":break generate}h[g[j].m].apply(h,g[j].a)}return g}function c(m,k){for(var j=0,h=m.length;j<h;++j){var g=m[j];k[g.m].apply(k,g.a)}}return function(V,w,P,t,C,W){var k=(w===null);if(k){w=C.getAttribute("alt")}var A=V.viewBox;var m=P.getSize("fontSize",V.baseSize);var B=0,O=0,N=0,u=0;var z=t.textShadow,L=[];if(z){for(var U=z.length;U--;){var F=z[U];var K=m.convertFrom(parseFloat(F.offX));var I=m.convertFrom(parseFloat(F.offY));L[U]=[K,I];if(I<B){B=I}if(K>O){O=K}if(I>N){N=I}if(K<u){u=K}}}var Z=Cufon.CSS.textTransform(w,P).split("");var E=V.spacing(Z,~~m.convertFrom(parseFloat(P.get("letterSpacing"))||0),~~m.convertFrom(parseFloat(P.get("wordSpacing"))||0));if(!E.length){return null}var h=E.total;O+=A.width-E[E.length-1];u+=A.minX;var s,n;if(k){s=C;n=C.firstChild}else{s=document.createElement("cufon");s.className="cufon cufon-canvas";s.setAttribute("alt",w);n=document.createElement("canvas");s.appendChild(n);if(t.printable){var S=document.createElement("cufontext");S.appendChild(document.createTextNode(w));s.appendChild(S)}}var aa=s.style;var H=n.style;var j=m.convert(A.height);var Y=Math.ceil(j);var M=Y/j;var G=M*Cufon.CSS.fontStretch(P.get("fontStretch"));var J=h*G;var Q=Math.ceil(m.convert(J+O-u));var o=Math.ceil(m.convert(A.height-B+N));n.width=Q;n.height=o;H.width=Q+"px";H.height=o+"px";B+=A.minY;H.top=Math.round(m.convert(B-V.ascent))+"px";H.left=Math.round(m.convert(u))+"px";var r=Math.max(Math.ceil(m.convert(J)),0)+"px";if(a){aa.width=r;aa.height=m.convert(V.height)+"px"}else{aa.paddingLeft=r;aa.paddingBottom=(m.convert(V.height)-1)+"px"}var X=n.getContext("2d"),D=j/A.height;X.scale(D,D*M);X.translate(-u,-B);X.save();function T(){var x=V.glyphs,ab,l=-1,g=-1,y;X.scale(G,1);while(y=Z[++l]){var ab=x[Z[l]]||V.missingGlyph;if(!ab){continue}if(ab.d){X.beginPath();if(ab.code){c(ab.code,X)}else{ab.code=d("m"+ab.d,X)}X.fill()}X.translate(E[++g],0)}X.restore()}if(z){for(var U=z.length;U--;){var F=z[U];X.save();X.fillStyle=F.color;X.translate.apply(X,L[U]);T()}}var q=t.textGradient;if(q){var v=q.stops,p=X.createLinearGradient(0,A.minY,0,A.maxY);for(var U=0,R=v.length;U<R;++U){p.addColorStop.apply(p,v[U])}X.fillStyle=p}else{X.fillStyle=P.get("color")}T();return s}})());