Zoomable Pages With Em Sizing
Since Internet Explorer does not resize px-sized text when it changes the text size of a page, but Firefox does, the principle that a page should behave the same way in both browsers demands that one never use px-sized text. But using em-sized text with non-auto px-sized containers means that the page will break above a certain browser text size, as the words become too long to fit the width of their container. The solution to this problem is the use of em-sizing for all elements.
To use full em-sizing, one must have in mind the expected browser text size of the viewer (by default this is 16px per em in most browsers), and one must understand that the em sizes in the style of an element are specified relative to the calculated font size of the parent element. The former consideration is of trivial consequence, but the latter presents a complicating factor for document trees deeper than one element.
In order to allow for the inheritance of em sizing and the consequent shrinkage of px per em as the document tree is traversed from root to tip, there are two options:
By virtue of the easy restyleability of documents following option 2, it is to be preferred. Following this scheme presents no restriction to the visible form a document takes, so any document may take advantage of conversion to full em-sizing. In Waxpad, just check the option under the tools > layout mode menu to have your current document converted to full em-sizing, according to your current browser text size (observable under the view menu). You can change back to px output by re-checking the 'pixel layout' option.
Comments
Back to Waxpad
Since Internet Explorer does not resize px-sized text when it changes the text size of a page, but Firefox does, the principle that a page should behave the same way in both browsers demands that one never use px-sized text. But using em-sized text with non-auto px-sized containers means that the page will break above a certain browser text size, as the words become too long to fit the width of their container. The solution to this problem is the use of em-sizing for all elements.
To use full em-sizing, one must have in mind the expected browser text size of the viewer (by default this is 16px per em in most browsers), and one must understand that the em sizes in the style of an element are specified relative to the calculated font size of the parent element. The former consideration is of trivial consequence, but the latter presents a complicating factor for document trees deeper than one element.
In order to allow for the inheritance of em sizing and the consequent shrinkage of px per em as the document tree is traversed from root to tip, there are two options:
-
Style each element in the knowledge of the calculated font size of its parent.
- Prevent all em styled elements from inheriting from a font-sized ancestor
By virtue of the easy restyleability of documents following option 2, it is to be preferred. Following this scheme presents no restriction to the visible form a document takes, so any document may take advantage of conversion to full em-sizing. In Waxpad, just check the option under the tools > layout mode menu to have your current document converted to full em-sizing, according to your current browser text size (observable under the view menu). You can change back to px output by re-checking the 'pixel layout' option.
Comments
Back to Waxpad
Waxpad Article: Full Em Sizing