Firefox 3.6 “Final” was released today and one of the major addition is the support for the Web Open Font Format or “WOFF”. The result of a collaboration between the font designers Erik van Blokland and Tal Leming with help from Mozilla’s Jonathan Kew.
What is it for? How can you use it? By using the CSS2 @font-face (yes CSS2 not CSS3). This new format is promising because of the large number of support from the font creators and font foundries. Hopefully this will be the first font format that Microsoft® will accept for Internet Explorer browser other than their existing Embedded OpenType or “EOT”.
If IE9 supports WOFF, then this format will be the first cross-browser @font-face/webfont format. There is no question when it comes to Chromium/Chrome, Opera, and Safari, the problem with cross-browser technology is always with MSIE.
Update: Microsoft added WOFF support in Internet Explorer 9 Platform Preview 3.
So how can you start using WOFF? Just follow these simple steps:
|
|
And here’s what happens when a browser reads your font stylesheet:
The table below presents which font format is supported by the four major browsers - Chromium/Chrome, Firefox, Internet Explorer, Opera, and Safari. As you will see, no font format is supported across all five browsers except for WOFF… in the near future.
Microsoft’s EOT is out of the race, even though many font creators and foundries support it, the other four browsers are likely never going to support it. Then OTF, SVG, and TTF are out too because Internet Explorer is surely never going to implement it, and font creators/foundries do not like these formats for @font-face use.
That is where WOFF comes in. Commercial font creators and font foundries wants control (or restriction if you want it that way) to the fonts that can be used for the CSS @font-face rule.
Of course there are other advantages to WOFF like compression. WOFF is compressed, which site administrators will like because it eats less bandwidth. You can go check the fonts that came with your FontSquirrel generated font kit, WOFF is the smallest of them.
For now as with all new technologies, we have to wait until all major browsers adds support for WOFF. But that should not stop you from using it today. Just like with CSS3 and some HTML5, you can use it right now. It will save you time later if you do the update now than whenever you feel like to, which you will probably forget.
Chrome (WebKit) |
Firefox (Gecko) |
IE (Trident) |
Opera (Presto) |
Safari (WebKit) |
|
---|---|---|---|---|---|
EOT | No | No | v4.0 | No | No |
OTF | No | v3.5 | No | v10.0 | v3.1 |
SVG | v0.3 | No | No | v10.0 | v3.1 |
TTF | v2.0 | v3.5 | No | v10.0 | v3.1 |
WOFF | v5.0 | v3.6 | v9.0 | No | No |
If you see the Baybayin writing script below, then your browser supports one of the font formats - EOT, OTF, SVG, TTF, or WOFF. If not, then you should upgrade your browser because my font stylesheet captures all browsers. (At least from my testing, on two computers without any Baybayin fonts - it displays correctly on all the major browsers.)
Filipino-Baybayin: ᜀᜅ᜔ ᜊᜓᜃᜓ ᜀᜌ᜔ ᜉᜍ ᜐ ᜆᜂ ᜇᜑᜒᜎ᜔ ᜏᜎ ᜈᜅ᜔ ᜉᜓᜏᜒᜇᜒᜅ᜔ ᜋᜁᜈᜓᜋ᜔ ᜈ ᜄᜆᜐ᜔᜶
Filipino-Latin: Ang buko ay para sa tao dahil wala nang puwedeng mainom na gatas.
English: The coconut is for people because there is not enough milk to drink.
Filipino-Baybayin: ᜉᜓᜏᜒᜇᜒ ᜃᜅ᜔ ᜌᜓᜋᜋᜈ᜔ ᜇᜑᜒᜎ᜔ ᜐ ᜊᜄᜓᜅ᜔ ᜍᜓᜎᜒᜆ᜶
Filipino-Latin: Puwede kang yumaman dahil sa bagong roleta.
English: You can be rich because of the new wheel.
Enjoy!
Sources:
For this post, I will talk about how to correctly declare the language of your content, this way you are being friendly with translation software and helper applications, and other technologies that rely on this often taken-for-granted HTML attribute. As is shown in our image, everyone can see the writing script used, but in the digital world there are people who do not have the fonts you are using. There are also people who do not use the same browser as you and me use - it could be a text-only browser, a speech browser, or a Braille browser.
It is then only appropriate that we properly and correctly tag our content with the language and script we are using. Get ready to use the LANG attribute a lot.
]]>In my previous post I talked about “Baybayin - the Forgotten Pre-Hispanic Writing of the Filipino”. It was added in version 5.0 of the Unicode Standard together with Buhid, Hanunoo, and Tagbanwa under the “Philippine Scripts” group. But how should we properly write or mark our content written in another language and script?
For this post, I will talk about how to correctly declare the language of your content, this way you are being friendly with translation software and helper applications, and other technologies that rely on this often taken-for-granted HTML attribute. As is shown in our image, everyone can see the writing script used, but in the digital world there are people who do not have the fonts you are using. There are also people who do not use the same browser as you and me use - it could be a text-only browser, a speech browser, or a Braille browser.
It is then only appropriate that we properly and correctly tag our content with the language and script we are using. Get ready to use the LANG attribute a lot.
When creating websites, it is important to properly declare the language being used on the webpage. For example, I use the following for my sites:
|
|
It is also important to declare the character set especially when you are going to use any characters beyond the scope of ASCII. This is how it looks like:
|
|
Putting it all together, our basic HTML should be.
|
|
Now let’s dig-in…
The HTML lang attribute defines the language of the content enclosed within the element it was declared. The codes are called subtag, and for my Filipino readers, there are only three subtag types you should worry about: language-Script-REGION. The full format: language-extended_language-Script-REGION-variant-extension-privateuse.
See the table below:
Code | Language | Subtag Placement |
---|---|---|
en | (Generic) English | language |
en-PH | Philippine English | language+REGION |
fil-Tglg | Filipino in Baybayin | language+Script |
bik-cts-Tglg | Bikolano of the Pandan (Northern Catanduanes) dialect in Baybayin script | language+extended_language+Script |
phi-Tglg-tsg | Tausug Philippine language written in Baybayin script | language+Script+variant |
If you want to find the subtags for a particular language, previously we have to check different websites and plenty of official code lists. A time-consuming task (although normally you only have to do this once), right? Well, the latest official subtags can now be found in the IANA Language Subtag Registry. It is now the universal source for all valid subtags.
According to the latest list (as of this writing), the subtags that are related to the Philippines are the following (if I missed anything, please leave a comment below):
Tagalog
Bikol
Cebuano
Filipino/Pilipino
Hiligaynon
Iloko
Pangasinan
Pampanga/Kapampangan
Philippine languages
Waray
Buhid
Hanunoo (Hanunóo)
Tagbanwa
Tagalog
Now that we have the subtags we need we can start coding the correct lang
value for any Philippines language and script. See these examples:
lang
value for your website: lang="en-PH"
lang="fil"
lang="tl"
lang="bik"
lang="ceb"
lang="hil"
lang="ilo"
lang="pag"
lang="pam"
lang="war"
lang="phi"
Then if you want to write something in Baybayin script you have to enclose it correctly with the script subtag “Tglg”. Remember, the format is: language-Script, like so:
lang="fil-Tglg"
lang="bik-Tglg"
lang="ceb-Tglg"
lang="phi-Tglg"
Why do we have no lang="tl-Tglg"
subtag code? Because of Suppress-Script: Latn , in the IANA Language Subtag Registry as was shown earlier. If I understood it correctly, it means that the Tagalog language as per the official standard should always be written in the Latin script. I assume then that lang=“tl-Tglg” is wrong and applications have the option to ignore it or drop the “Tglg” script subtag. In this case, just use “fil-Tglg”.
There is another subtag that you should learn if you want to target dialects and macrolanguages. You can find a list from the ISO standard ISO-639-3. Let’s use Bikolano as an example. The format to use is: language-extended_language-Script.
lang="bik-bcl"
lang="bik-bhk"
lang="bik-bto-Tglg"
lang="bik-cts-Tglg"
The language-extended_language-Script is, as of this article, still not yet implemented. The basis for the lang attribute is always the IANA Language Subtag Registry, once it has been updated to include extended_languages then we can start using it where needed.
Next is if your language have an ISO-639-3 code and is under or part of the language code “phi” in ISO-639-2, then the phi subtag is to be used. This subtag code is considered a collective language. Good examples are:
lang="phi-krj"
lang="phi-mdh"
lang="phi-Tglg-mrw"
lang="phi-Tglg-tsg"
As you probably have noticed the format I used was language-Script-variant and not language-extended_language-Script. My reasoning is simple - the phi language code is not really a language, it is accurately called a “collective” language entry in ISO-639-2 for all other Philippine languages not found in this version of the ISO language standard. Compare that to the bik language code, it was clearly marked as a “macrolanguage” both in ISO-639-2 and ISO-639-3.
Additionally, according to the World Wide Web Consortium or W3C, dialects of macrolanguages are considered/should be written immediately after the language subtag. In other words, if your ISO-639-2 code is considered a macrolanguage then you should use the extended_language subtag position like lang="bik-cts-Tglg"
. If it wasn’t defined as a macrolanguage, then you should use the variant subtag position as is the case in lang="phi-Tglg-tsg"
.
If you website is mainly about Iriga and you write in your own language, then you should adjust your website’s header files accordingly:
|
|
If you want to write “Happy Father’s Day” in Baybayin, this is how you do it:
|
|
Simple? Cool! Just remember that when writing language tags, keep it as simple and as short as possible. If you do not have a need to be very specific like say lang="bik-bcl"
then don’t be! Simply use lang="bik"
. This is especially true for blogs. So if your blog is in Filipino language (!not Tagalog!) then you use:
|
|
Only be specific when you need it or when your site caters mainly to that particular audience and/or region. Additionally, if you are going to use (which you probably will) other languages and scripts, enclose it always in a span or div element as I’ve shown in my Baybayin example above.
Easy? Yes it is. It takes time to get used to it, and yes, it is confusing at first. But you will get the hang of it eventually. Go on and update your websites now and start practising marking your content with the correct language and script.
This only applies to “first-generation classic themes” or “traditional templates”.
Maybe you have read my HOW TO: Add DISQUS Manually on Blogger/BlogSpot but found it is for XML-based templates. Fret not, in this how-to, we are going to integrate DISQUS on your Blogger/BlogSpot Classic/Custom Template!
]]>Maybe you have read my HOW TO: Add DISQUS Manually on Blogger/BlogSpot but found it is for XML-based templates. Fret not, in this how-to, we are going to integrate DISQUS on your Blogger/BlogSpot Classic/Custom Template!
Check for updates below this guide. Latest update on Tuesday, 2009-04-28.
But first, thanks to Nathan Henderson for sharing the changes he did. I then added a few more edits to give the finishing touch. Last but definitely not the least, read this warning.
1.1: Add this to your CSS area or CSS file:
|
|
Step 2 is for the “0 Comment”; “1 Comment”; “10 Comments” link that shows on your main page.
2.1: Look for:
|
|
OR
|
|
2.2: Change it to:
|
|
OR
|
|
This step is for “0 Comment”; “1 Comment”; “10 Comments” text that shows up when viewing a single post. Also note that this piece of code is not present in some templates by-design, so skip to Step 4.
3.1: Look for:
|
|
OR
|
|
3.2: Change it to:
|
|
OR
|
|
4.1: Look for:
|
|
4.2: Change it to:
|
|
4.3: Look for:
|
|
4.4: Change it to:
|
|
5.1: Look for:
|
|
5.2: Add above/before:
|
|
5.3: In Step 5.2, change the DISQUS-SHORT-NAME to your blog’s DISQUS URL.
Example, if your DISQUS URL is libresoftware.disqus.com then change DISQUS-SHORT-NAME to libresoftware. There is one to change.
6.1: Look for:
|
|
6.2: Add above:
|
|
6.3: In step 6.2, change the DISQUS-SHORT-NAME to your blog’s DISQUS URL.
Again, if your DISQUS URL is libresoftware.disqus.com then change DISQUS-SHORT-NAME to libresoftware. Only one to change here.
You’re done! Congratulations!
Some notes to remember. This how-to guide was designed to still show the comments posted via your built-in comment system (Blogger’s in this case), while at the same disabling the ability to post new comments using the old system by removing the link.
For the adventurous, you can also find the DISQUS API here.
Friday, 2013-08-02: Updated the JavaScript code to reflect the latest disqus script in steps 5 and 6
Saturday, 2008-06-14
Saturday, 2008-08-02: The tutorial was added at DISQUS help forums by Andrew (from Disqus). Thank you very much and I’m glad to be of help to the community!
Saturday, 2008-08-23: Changed /{YOUR-DISQUS-URL}/ to /DISQUS-SHORT-URL/ to avoid confusion. Thanks to hackcrack for the suggestion.
Tuesday, 2009-04-28: Corrected Steps 5.2 and 6.2. Hat tip to chrisdfeld for catching the errors.
Tuesday, 2011-07-06: Fixed typographical error in Step 5.2, thanks to lil-bee for bringing it to my attention
If you have other questions, don’t hesitate to reply in our Disqus-powered comments or the official Disqus forums!
This guide was last updated on 2008 and since then Disqus created an automated method. It is strongly suggested to use it by visiting this link and then switch to the correct site.
If like me you are using DISQUS for your blog or site comments system, then maybe you’ve encountered a problem with integrating it to your custom theme/template. In this simple tutorial, I will show you which code bits to edit to successfully integrate Disqus into your Google Blogger/BlogSpot XML-based template. (Basically it is the same with any theme/template regardless of your blog platform or CMS.)
But if you have a Classic Template, then read my HOW TO: Integrate DISQUS on Blogger/BlogSpot Classic Template instead.
]]>If like me you are using DISQUS for your blog or site comments system, then maybe you’ve encountered a problem with integrating it to your custom theme/template. In this simple tutorial, I will show you which code bits to edit to successfully integrate Disqus into your Google Blogger/BlogSpot XML-based template. (Basically it is the same with any theme/template regardless of your blog platform or CMS.)
But if you have a Classic Template, then read my HOW TO: Integrate DISQUS on Blogger/BlogSpot Classic Template instead.
Check for updates below this guide. Latest update: Saturday, 2008-08-23.
With that said, let’s begin!
This step is for the “0 Comment”; “1 Comment”; “10 Comments” link that shows on your main page.
1.1: Add this to your CSS area or CSS file
|
|
2.1: Look for:
|
|
2.2: Change it to:
|
|
Step 3 is for the “0 Comment”; “1 Comment”; “10 Comments” text that shows when viewing a specific post. Some templates do not have this, so if you can’t find it, skip to Step 4.
3.1: Look for:
|
|
3.2: Change it to:
|
|
4.1: Look for:
|
|
4.2: Usually, above the code bit in 4.1, you will find this:
|
|
It may be enclosed on a DIV tag instead of a P element. Additionally, sometimes you may find that it’s arranged differently, if so, just look for any bits similar to 4.1.
4.3: Once you find it, change it to:
|
|
5.1: Look for:
|
|
5.2: Above it add:
|
|
Note: If above the code bit shown in 5.1 there is a </b:if>, then put the code bit in 5.2 before </b:if>. If it isn’t there, as in some templates, you probably have to add it.
6.1: Look for:
|
|
6.2: Add above:
|
|
6.3: In Step 6.2, change the DISQUS-SHORT-URL to your blog’s DISQUS URL.
Again, if your DISQUS URL is libresoftware.disqus.com then change DISQUS-SHORT-URL to libresoftware, there is only one to change.
At this point, you are done when all is working fine. Congratulations!
Some things to remember. This how-to was designed to still show the comments posted on your built-in comment system (usually Blogger’s) while at the same time disabling any new comments from being posted using the built-in comment system, by removing the link to do so. However, if your visitors knows the direct link to Blogger’s built-in comment system, they can still leave comments the old way.
To effectively disable it without hiding all earlier comments, you need to edit the Post Options of each of your posts and change it to “Don’t allow, show existing”. Later, Disqus will introduce an import feature, so all old comments will be copied to your Disqus as well. Until then, this is the solution that I can think of.
For the adventurous, you can find information on the Disqus API by visiting the official developers webpage.
Hope that helps!
Friday, 2013-08-02: Updated the JavaScript code to reflect the latest disqus script in steps 5 and 6
Saturday, 2008-05-24: Thanks to Disqus’ Daniel Ha for featuring this how-to article on the official website! Glad to be of help.
Monday, 2008-05-26: Chinese (Taiwan) version [教學]Blogger如何手動安裝Disqus with screenshots by Joyce Wu.
Saturday, 2008-06-14: I updated step 6. I missed to change a Disqus URL to DISQUS-SHORT-URL, it was previously pulling data from “highstreet5”. Please check your codes on step 6.
Saturday, 2008-08-02: The tutorial was added at Disqus help forums by Andrew (from Disqus). Thank you very much and I’m glad to be of help to the community!
Saturday, 2008-08-23: Changed /{YOUR-DISQUS-URL}/ to /DISQUS-SHORT-URL/ to avoid confusion. Thanks to hackcrack.
If you have other questions, don’t hesitate to post a reply in our Disqus powered comments system.