By Lee Sykes
March 2006 (Updated September 2006)
Continuing our series on How to build a DotNetNuke website, we are now going to enable the Vortex Music skin to use resizable text.
While viewing a web page using Internet Explorer, if you go to the View menu and select Text Size / Largest, you should see that the text size increases. Currently the Vortex Music skin does not allow you to re-size the text within Internet Explorer; however, here you can see an example of a skin that implements text sizing: http://skins.dnncreative.com
Why should we bother to create resizable text?
The main reason is to make your site accessible to as many people as possible. Enabling text sizing within your website allows visitors with visual impairments the opportunity to view the content of your site.
A further consideration is that it is law in the US and UK to create accessible sites. American National Federation for the Blind are suing Target over their inaccessible website, after alerting them to the problem months ago and seeing no remedial action - even though the fixes would be trivial.
There has been interesting comments from the web development community which unfortunately demonstrates an ignorance to accessibility. This is well summed up in Bruce Lawson’s blog
Another interesting fact is that 25% of all web users have some kind of accessibility problem. (This is a claim from the Danish Centre for Accessibility.)
This should give you a list of good reasons to consider implementing re-sizable text.
Creating re-sizable text in a website
In this section of the tutorial we will demonstrate how to set up a website which uses re-sizable text. Once we have discussed these principles for a standard website we will go through the steps required to implement this within DotNetNuke.
The in-accessible method
The common method for sizing text within a website is to set the font size of an element using pixels, eg:
.Body
{
font-size: 12px;
}
Web designers have opted for this method in the past to ensure that their designs are displayed in exactly the same text size across multiple browsers.
The problem with this is that you can not re-size the text within Internet Explorer. View this page: Fixed Font Sizes, go to the View menu and select Text Size / Largest. You can see that the text will not re-size using Internet Explorer. It is possible to re-size the text in other browsers such as Firefox, but Internet Explorer is currently the most popular browser, so this is a significant problem that we need to find a solution for.
Absolute-size Keywords
Font sizes specified using absolute-size keywords do however allow Internet Explorer to re-size the text.
The possible keyword values are:
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
Here you can see the text sizes within Internet Explorer.
And here you can see the text sizes with the font view size set to largest in Internet Explorer.
You can also view this text and test the sizing on this page.
It should be noted that there maybe slight variations in the font keyword sizes between various browsers. The size difference is minimal, but you should be aware that slight variations do exist.
Percentages
Percentages can be used to adjust the size of a font. A percentage size is based on the size of its parent element.
If we use a percentage of 150% this will add 50% to the font-unit that was previously specified. A percentage of 50% will reduce the font-unit by 50%.
Any font-sizes that use percentages can also be re-sized within the Internet Explorer browser.
Combining Font-Size Keywords and Percentages
If we combine the two font size methods we can create a very flexible system for specifying font sizes throughout our website.
The first task is to set the overall text size for our website which all further font sizes will be based upon. We do this by setting the text size within the body class of our CSS file.
body
{
font-size: small;
}
Any further text elements where we need to adjust the font size, we specify the font-size as a percentage. This percentage is related to the font-size: small which we created in the body class.
So, for instance, we can set the size for the header tags using:
h1
{
font-size: 145%;
}
h2
{
font-size: 135%;
}
h3
{
font-size: 120%;
}
h4
{
font-size: 90%;
}
etc.
This can also be applied to any custom classes that you have created, such as a class for formatting any text that is a quote.
.quote
{
font-size: 80%;
}
View the example page of this in action: Keyword and Percentage Sizes
If you view the above example and test the various view size options within Internet Explorer, you will see that all of the text can re-size without any problems.
This works great, what’s the catch?
If you view the above example using Windows Internet Explorer 5 or 5.5 you will see that the font sizes are displayed at one step larger ie. font-size: small actually displays font-size: medium.
IE 6 (font-size: small)
IE 5.5 (font-size: small displays at font-size: medium)
(Click here for an article which covers testing skins in various browsers, complete with links to download the browsers.)
IE5/Windows Hack
To fix the sizing problem within Internet Explorer 5, we will implement a hack which scales the base font size down one step, ie. font-size: x-small for IE5 is the equivalent of font-size: small in all other browsers.
Box Model Hack
We are going to use the Box Model Hack created by Tantek Celik.
The good thing about this hack is that it only applies to IE5 for windows. IE6 and IE7 will not be affected by the hack.
The hack tricks IE5/Win into thinking the CSS statement has ended.
Using this technique we specify a value for IE5/Win. IE5/Win thinks that the CSS values have ended and therefore following this we override the IE5/Win values with the values intended for all other browsers.
For our body class within our CSS file, we will add the following:
body
{
/* This sets IE5,5.5/Win to the correct size */
font: x-small verdana, tahoma, arial, helvetica, sans-serif;
voice-family: "\"}\"";
voice-family: inherit;
/* This size is for all other browsers, including IE6+ */
font: small verdana, tahoma, arial, helvetica, sans-serif;
}
The hack for IE5/Win comes from the voice-family attribute. IE5/Win recognises the closing bracket and thinks the class has ended. All other browsers continue and read the second font size which overrides the first font size.
This page demonstrates the percentage and keyword font-sizes combined with the IE5/Win hack.
Pixel sizes and percentage equivalents
This page: Text pixels and percentage equivalents displays a table which shows the font sizes in pixels and their equivalent size in percentages using the base font-keyword as ‘small’.
When you are setting up your percentage sizes, view them in a selection of browsers. You will find that at certain percentages there will be a difference in display between the browsers, but if you change the percentage plus or minus 5% you may find that the size is now equivalent across all of the browsers.
Some browsers will only recognize percentages in powers of 10 (110,120,130 etc), whereas others will recognize values in powers of 5 (115,125,135 etc.).
It is worth taking the time to find the correct percentages across the various browsers to help ensure a consistent look for your website.
DOC Type, quirks and strict modes
We are nearly ready to begin applying these techniques to our DotNetNuke website. Before we can begin looking at DotNetNuke however, it’s important that you understand DOC TYPES along with quirks and strict modes and how it affects the display of the font sizes within your browser.
All of the previous examples were created using a XHTML transitional DTD (Document Type Definition). If you change the DTD to HTML 4.01 transitional (which is the DTD that DotNetNuke uses), you will notice that the percentages are no longer consistent across the browsers, especially in IE6 and Opera 8.5, which will resort to quirks mode and display all text one step too large, just as the IE5/Win browser originally did.
This is why we need to set DotNetNuke to use a XHTML transitional DTD, to ensure that the font size is consistent across all browsers.
Default.aspx
Follow the Browser Quirks, Standard Compliance modes and Doc Types tutorial which explains:
- How to set DotNetNuke to use XHTML transitional DTD
- Quirks and Standards Compliance Modes
- DOC TYPES - Document Type Definition (DTD)
- Warnings, Pros and Cons
Download the default.aspx file from the end of the above tutorial. DO NOT INSTALL this new default.aspx yet however. We first of all need to configure a new menu system because the Solpart menu is not compatible with browsers working in standard compliance mode. (DNN Versions 3.2.2 / 4.0.3 and below)
Note: In the latest version of DotNetNuke (3.3.x and 4.3.x) the Solpart menu is now compatible with browsers operating in standard compliance mode. So if you wish, you do not need to switch to the HouseMenu or remove the Solpart menu from the containers. However, removing SolpartMenu can improve the performance and reduce the load time of the pages within your website.
The menu
The next step is to change the menu within our skin to use the House of Nuke menu. Follow this tutorial to learn How to replace the Solpart menu with the HouseMenu.
Container
We also need to ensure that our containers no longer use the Solpart menu to display the module settings etc. Follow this tutorial to learn how to replace the Solpart menu with a simple drop down list.
Videos
We are now ready to begin applying the font-sizing techniques to our DotNetNuke skin. Follow the video tutorials below for a step by step guide. The full source code for the skin and containers is included with the videos. |