Slight tweak of layout

I noticed that the "Edit HTML" feature of Blogger Beta was now active so I've been trying to make a few small improvements to the layout of my blog by hacking the CSS and HTML a bit. I say "hacking" just because these changes weren't possible through the layout editor itself.

Today's shopping list contained two items:

1. Change my Dari Blog Description to be right-justified.


2. Change the font of the Blog Description to one that looks a bit nicer.

Right-Justifying the text

The Blog Description is written in Dari, which is an Arabic-based language. It is read from right to left and, consequently, should really be right-justified on the page for normal situations. (Granted, in English we sometimes right-justify things that are written in English, but that is in special cases such as the header of a letter or something.)

There are two ways I knew of to right-justify the text. Firstly, you could use the CSS attribute of "text-align:right". I was able to do this by editing the Template HTML and finding the rule for "#header .description". However, this isn't really the best solution. Why do I say that? Well, because the direction of the text is implied by the content, not just by style. As we are all starting to catch on to these days, Style=CSS and Content=HTML. Therefore, an HTML solution would be better here.

The HTML solution I had in mind was to use the dir attribute. It is used to indicate that a piece of content is either ltr (left to right) or rtl (right to left). To make this change, I had to check the "Expand Widget Templates" checkbox above the HTML editor, because the HTML for the Blog Description is hidden inside the Header widget.

Inside this widget, I tried applying the dir="rtl" attribute to a number of different elements but it didn't work. Now as I write this, I'm wondering if it only affects the direction of the characters while not implying a change in justification of text one way or the other.

A quick check on the web reveals this W3C article which suggests setting the directionality on a block element should change the justification. Oh well. I've stuck with the CSS option for now, but I don't like it.

Changing the Blog Description's Font

The font for the Blog Description can be changed through the Fonts and Colours section of the Template area of Blogger Beta. You can choose the font family and size as well as bold and italic settings. It contains the following fonts:

• Arial


• Courier


• Georgia


• Times


• Trebuchet


• Verdana

While I understand that these are probably the only fonts you can assume a user has available, I would still like to add a font of my own choosing to the front of the list. With CSS, the browser will attempt to use the first font family specified and then roll over to the second if the first is not installed and so on.

In my previous Blog Description, I used the Tahoma font which makes Arabic characters look quite nice. I wanted to make that the first font it would attempt to use here, with Verdana and sans-serif as the other options.

Poking about the CSS in the template, I discovered the #header .description rule contained the following attribute for the font:

font: $descriptionFont;

This is using a placeholder which is later substituted with the values you chose earlier in the font settings. Very clever - a spot of dynamic CSS. I tried adding my font to the front of the list like so:

font: Tahoma,$descriptionFont;

This didn't work, though, because the $descriptionFont variable does more than simply state the font family, it specifies font weight, size, boldness, italicisity (?) and finally font family. My attempt to hack it produced this CSS:

font: Tahoma,normal normal 173% Verdana, sans-serif;

This isn't a valid CSS rule since Tahoma should appear between 173% and Verdana.

In the end, what I did was add a font-family attribute immediately after the font: $descriptionFont; line:

font: $descriptionFont;
font-family: Tahoma,Verdana,sans-serif;

This way, I can still use $descriptionFont to alter bold, italic and size settings, while my rule will only override the font family.

I think in the future, custom fonts could be supported through Template -> Fonts and Colours by allowing users to specify a font family in a text box while still forcing them to choose one of the generic fonts as well. Their own font would be put at the start of the list and ignored if the user doesn't have it installed.

Phew! That was quite a long post. Sorry about that!