The most obvious is the change in font size on the te Reo versions of headings.
This was achieved across the whole site by changing one line and adding a second to our master CSS file.
From this:
h2.bi .reo{font-size:12px; padding: 0; text-transform:none;}
to this:
h2.bi .eng{font-size:12px; padding: 0; text-transform:none;}
h2.bi .reo{font-size:19px; padding: 0; text-transform:none;}
We've also extended the bi-lingual headings beyond the home page to other parts of the site.
The second change is the substitution of te Reo for English in the left side menu on all pages. Hovering over the headings on most modern browsers displays a tool tip with the English equivalent.
If you look at the code on any page (I could not get blogger to display it), there is a span with the class hide. This is for users of screen-readers, and ensures that the verbal rendering of the headings remained consistent with other headings on the site.
The other major addition is some bi-lingual pages. The about us page is an example.
There are links at the top of the page that allow visitors to select which language they want, or to see both side-by-side.
The page is laid out with a series of alternating divs - one for each language - and they are styled with CSS to sit alongside each other.
The links use Javascript to show and hide the sections.
To return the original design at the end of the week it'll be a simple matter to restore the CSS, and swap a few bits of text in the master site template.
No comments:
Post a Comment