Overview of Resizing in JavaScript

Resizing in JavaScript presents a number of problems. They stem from a)the number and complexity of Font properties and b)the almost arbitrary way the different browser vendors implement Fonts and their properties. But of course there is the rivalry in display engines ranging from Gecko to Webkit. This leads to 2 types of annoying variations: 1)between browsers - text with identically the same font, font-size, font-weight, font-style, font-variant, line-height, and letter-spacing will appear different as displayed by the browsers; and 2)within the same browser even if you have used CSS Styles to control all of the above text properties.

So this is the problem I confronted when adding a simple text or paragraph resizing feature to a clients blog. I embarked on JavaScript+DOM routine given the task seemed easy with the key JavaScript code being simple:

See the routine in action in the next Accordion Panel.

The Resizing Demo

Click anywhere in the text below to see a paragraph enlarged and upon moving the mouse out, see the paragraph somewhat restored.

Sed ego dicit este verbum non meus ego laboro multi dies vincere este montem - so why resort to Latin when Angle-Saxon speak will do??? amamus vosotro amatis illi amantego amo tu amas il amat nosotro amamus amantego amo tu amas il amat nosotro amamus vosotro amatis illi amantego amo tu amas il amat nosotro amamus vosotro amatis illi

Sed ego dicit este verbum non meus ego laboro multi dies vincere este montem - so why resort to Latin when Angle-Saxon speak will do??? amamus vosotro amatis illi amantego amo tu amas il amat nosotro amamus amantego amo tu amas il amat nosotro amamus vosotro amatis illi amantego amo tu amas il amat nosotro amamus vosotro amatis illi

Sed ego dicit este verbum non meus ego laboro multi dies vincere este montem - so why resort to Latin when Angle-Saxon speak will do??? amamus vosotro amatis illi amantego amo tu amas il amat nosotro amamus amantego amo tu amas il amat nosotro amamus vosotro amatis illi amantego amo tu amas il amat nosotro amamus vosotro amatis illi

Sed ego dicit este verbum non meus ego laboro multi dies vincere este montem - so why resort to Latin when Angle-Saxon speak will do??? amamus vosotro amatis illi amantego amo tu amas il amat nosotro amamus amantego amo tu amas il amat nosotro amamus vosotro amatis illi amantego amo tu amas il amat nosotro amamus vosotro amatis illi

Resizing Results and Summary

Depending on which browser you are viewing with, each one expands the text block with different line-spacing and kerning. On restoring the text block, all of the browsers returned a longer text block with wider spacing. Things look out of kilter. After a number of tries with detailed CSS styling used throughout the Web blog, the client decided to go with a small help note showing how to resize a web page depending on which browser a customer was using.

Lesson learned here - styling is easy to control using JavaScript+DOM coding. And it can be useful in many applications. But sometimes letting the browser do a styling task with their many extensions, add-ons and/or special CTRL button clicks is even easier.

Demo and test of the jQuery UI JavaScript Framework

Continuing our tests of JavaScript frameworks - this test mixes direct DOM JavaScript manipulations to test how robustly jQuery UI and its Accordion Widget mix with other JavaScript coding. The jQuery Accordion did present 3 problems:
1)it is not obvious how to control the maximum height of the overall accordion panel;
2)one small mistake in HTML tag balancing can result in bizarre jQuery error behavior
3)it is hard to control some of the CSS styling outside the jQuery Accordion panels;
On the plus side jQuery's accordion widget:
1)has a cool look and feel with many possible developer customized themes;
2)worked reliably and quickly in all tests done so far;
3)has a number of Accordion features like autoheight, collapsible, etc
Home
JavaScript Links
jQuery Framework
W3CSchools
Overview/Sidebar
Styling Fonts is difficult enough to do directly in HTML+CSS; thus to do it dynamically using JavaScript+DOM presents some real problems which is illustrated here with this demo of Font Resizing.

The whole problem is that when it comes to Fonts and all their properties, all the major browser vendors each does their own thing. The net result is that even if you meticulously style all your Web page text elements, users will see 2 different paragraphs before and after Resizing.