Clever use of Firefox extension Stylish

Students of the Thai language around the world are no doubt hoping for some day being able to read some of Thai language based websites. This would indeed be nice, but there is a long way ahead for most of us.

One of the obstacles with a site like manager.co.th (besides, of course, being almost totally incomprehensible for me), is that it is very hard telling the different Thai letters apart. When visiting a site like that, I always have had to enlarge the font a couple of times, just to even recognize the individual letters.

Maybe Thais have very strong eyes because many Thai sites I come along, use smallish letters like these. Or I may be getting old, but fortunately there is a keyboard shortcut for this.

On the Mac (Firefox), Zoom in is Command-"+" and Zoom out is Command-"-".

When Zoom does not work

On some sites you will see a mixture of Thai and English. For sites like these, it just does not work increasing the general font size. The mix of enormous English letters with barely readable Thai letters, really messes up everything and paradoxically makes it even harder to read.

Hence most of these sites will have spent some time setting up styling balancing all this for you.

But sometimes even the most careful styling does not work. One such site is thai2english.com.

This site is an online dictionary and works really well if you are browsing from a PC platform.

The problem

From the PC, there is nothing wrong with this site. All the Thai text on this site is clear and easy to read, but unfortunately it is a completely different story when browsing from a Mac for some reason.

Browser compatibility can be a real killer. I personally maintain a couple of sites like lyngbytaekwondo and sonnal, so I know just how hard it is to maintain a consistent layout across the different viewing platforms – and how time consuming and tedious this is.

Long time ago, I stopped blaming other people for not doing the proper job from a technical point of view. It is almost impossible to be on top of everything. And these days, we users are truly empowered by some of the tools available out there!

Example

Searching for an English word like “success” on thai2english gives you a number of different options in Thai. Notice below how the large and bold Thai lettering appears condensed and almost smudged. This is maybe not a problem for native readers, but for me the letters no longer resemble anything I have seen in the textbooks. And believe me, I have enough issues already.

Stylish

Now, if you are using Firefox, there is a very simple fix. The Stylish extension allows easy management of user styles. This is exactly the kind of empowerment you need to fix ugly layout, remove inappropriate ads, customize the look of your browser or mail client, or plain and simply just have fun.

If you do not already have the Stylish extension, go get it now to follow along in this example.

Wait, there is more…

When you are done with this, I can recommend some quality browsing time on the userstyles.org directory. There are an abundance of interesting Stylish Scripts. (There is enough content there to get lost for hours if you have time to kill)

To use the Stylish Extension, we just need to find the right entry points in the source code and then we can overrule existing styling in most cases.

Firebug

And here is another trick. Although it is certainly possible to browse the source code directly from the browser, I prefer using the Firebug Firefox extension for ease of operation. Firebug is the clear favorite on my list of “Firefox extensions you cannot live without” – so, go get your copy here.

This is a really sophisticated tool that can do really useful things for you if you are a developer. Fortunately it can also be used by mere mortal users like me.

Activate the extension by clicking on the bug like icon in the bottom part of the Firefox window and then press "Inspect". This will give you visual and very convenient access to the relevant html section along with context sensitive and fully resolved CSS statements right next to it.

I used it below to identify the two class names needed to modify on the page above.

So now we know that the biggest problem text is tagged as the largeThai class in the HTML code. Using the same technique, I quickly learned that the pronounciation text is tagged as the uc class.

The Solution

Stylish can help us control the format of these two classes. By adding a couple of CSS statements in the extension, we can get a much clearer picture of the Thai text. This is what I used to get started:

a.largeThai {
      text-decoration:none !important;
      color:#663366 !important;
      font-family:Arial !important;
      font-size:42px !important;
}
.uc {
     color:#3366FF !important;
     font-size:16px !important;
}

With this new styling in place, the page looks like the picture below. Notice how much clearer the large text has become.

The whole solution

Accidentally(!) clicking on one of Thai words on the list of options presented, reveals another site structure used for looking up Thai words. For example, I have searched for something in Thai below and now is presented with the same problem as we had initially when looking up English words.

By using Firebug again, we can quickly determine that there are a couple of new classes in play on pages like this one.

In Stylish we can reuse the formats from previous and use this to overwrite the classes called ThaiTextHeadline and ThaiText. After that we are done.

I have made the script available for download below, so you do not have to re-type all of this.

Stylish Script

After installing Stylish, right click on the Stylish Icon in the bottom left corner of the Firefox browser and select "Manage Styles...". Click the Write button and paste in the script you have downloaded from here, and you are good to go.

Download

[download#5#image]

One Reply to “Clever use of Firefox extension Stylish”

  1. Thanks for this post, I run thai2english.com and I never realised the Thai font looked so blurry on a Mac. I’m getting a Mac myself soon so I’ll try and fix it then, and hopefully this workaround won’t be necessary shortly.

Leave a Reply

Your email address will not be published. Required fields are marked *