User font size change in chm output

[SimonH]

Howdy,

Is it possible to have a control in the chm help viewer so that the user can increase/decrease their display font size?

Ta.

[Tim Green]

Hi Simon,

The Microsoft HTML Help viewer doesn't support this. It's part of Windows and hasn't really been updated at all since Windows 98...

[SimonH]

Thanks, Tim.

[Malcolm Jacobson]

Hi Simon,

Is it possible to have a control in the chm help viewer so that the user can increase/decrease their display font size?

While this isn't natively supported in the CHM viewer, you can add a control to increase/decrease font size by using the javascript code here:

http://www.white-hat-web-design.co.uk/a ... ntsize.php

Cheers,

Malcolm.

[SimonH]

Superb stuff, Malcolm. That works a treat.

Tim, copy that code, man...

[Winsteps]

Brilliant, Malcolm! Tim, please include in the standard HTML templates.

[Pete Lees]

Hi,

Just to add that, although Microsoft's HTML Help documentation and Help Workshop tool don't make any mention of it, it is possible to add a Font button to the toolbar of the HTML Help viewer. However, the technique requires you to edit the window settings in your HTML Help project (.hhp) file in a text editor, so I don't suppose that it will fit in very well with your H&M workflow.

See this article for details:

http://frogleg.mvps.org/helptechnologie ... fontbtnchm

Alternatively, you can open the .hhp file in FAR and add the button there.

Pete

[Tim Green]

Hi Malcolm and Pete,

Thanks for the workarounds! This is not the sort of thing you can add to the standard templates, however -- it really needs to be implemented individually, as needed.

[Martin Wynne]

While this isn't natively supported in the CHM viewer, you can add a control to increase/decrease font size by using the javascript code here:

http://www.white-hat-web-design.co.uk/a ... ntsize.php

Hi Malcolm,

That works in IE/CHM, but only for inline styles, not css, and not at all in Firefox or Opera.

It appears to work, but in fact it is first setting the font size to 12px, and then increasing or decreasing from there. It doesn't start from the current font size.

Here is some basic code which reads the current font size correctly, and increases or decreases it from there. Plenty of room for further improvement, but it does work.

This is for p paragraph tags and a links, min size 6px, max 24px. Modify as required. Note that if the page has been zoomed by the user (Ctrl+Roll), the results are a bit unpredictable.

Code: Select all

<script type="text/javascript">
var min=6;
var max=24;

function getFontSize(u)
{ 
 if (u.currentStyle) { var fs = u.currentStyle['fontSize']; }  // IE
 else { var fs = document.defaultView.getComputedStyle(u,null).getPropertyValue('font-size'); } // Firefox, Opera
 return fs; 
} 

function increaseFontSize()
{
  var i;
  var v = document.getElementsByTagName('p');
  for(i=0; i<v.length; i++)
  { var s = parseInt(getFontSize(v[i]));
    if(s!=max) { s += 1; }
    v[i].style.fontSize = s+"px";
  }

  var v = document.getElementsByTagName('a');
  for(i=0; i<v.length; i++)
  { var s = parseInt(getFontSize(v[i]));
    if(s!=max) { s += 1; }
    v[i].style.fontSize = s+"px";
  }
}

function decreaseFontSize()
{
  var i;
  var v = document.getElementsByTagName('p');
  for(i=0; i<v.length; i++)
  { var s = parseInt(getFontSize(v[i]));
    if(s!=min) { s -= 1; }
    v[i].style.fontSize = s+"px";
  }

  var v = document.getElementsByTagName('a');
  for(i=0; i<v.length; i++)
  { var s = parseInt(getFontSize(v[i]));
    if(s!=min) { s -= 1; }
    v[i].style.fontSize = s+"px";
  }
}
</script>

regards,

Martin.

[Malcolm Jacobson]

That works in IE/CHM, but only for inline styles, not css, and not at all in Firefox or Opera.

Yeah, my answer was only aimed at CHM. For Webhelp I leave font size variation up to the Ctrl+Scroll function of the browser.

Cheers,

Malcolm.

[Martin Wynne]

Yeah, my answer was only aimed at CHM. For Webhelp I leave font size variation up to the Ctrl+Scroll function of the browser.

Hi Malcolm,

That's ok in Firefox, where you can zoom the text without zooming the graphics. But in IE and Opera, Ctrl+Roll zooms the entire page, including the graphics. This javascript function changes only the font size, and only for the specified tags, so it's not the same as a full page zoom.

The code can be modified for other style changes. For example you could give the user buttons to swap from a sans serif font for the screen (Arial, Verdana) to a serif font (Times New Roman) more suitable for printing the page.

regards,

Martin.

[SimonH]

Hi Martin,

With that code for getting the tag name, can that accept multiple tags or does one have to duplicate the code for each tag? The reason I ask is that controlling the font size for one style is not the best form.

Thanks kindly.

[SimonH]

As good as this is, its a bit quirky to implement. One of the reasons for this is the tags that H&M applies to certain para's. For example, after using this code and applying it to H2, H3, H4 tags etc. When I test, heading styles within a toggle have some bizarro tag name like "f_heading3", which of course is a non-recognised tag. This creates the annoying scenario where *some* of the text updates its size and some doesn't.

[Martin Wynne]

With that code for getting the tag name, can that accept multiple tags or does one have to duplicate the code for each tag?

Hi Simon,

Well I said there was room for improvement.

For multiple tags you can create a list of them first, like this below -- var tags = new Array('body','div','p','a','td','th'); -- add tags as required. These 6 tags cover most of a normal page.

You no doubt noticed a flaw in this code -- when one element reaches the maximum size it stops changing, but other eements don't. If you keep on clicking, eventually all elements will have the same font size.

A proper solution is quite complex, but a brute force solution is to make the limits so wide that no sensible user will ever reach them. This now runs from 1px to 48px.

Code: Select all

<script type="text/javascript">
var min=1;
var max=48;
var tags = new Array('body','div','p','a','td','th');

function getFontSize(u)
{ 
 if (u.currentStyle) { var fs = u.currentStyle['fontSize']; }  // IE
 else { var fs = document.defaultView.getComputedStyle(u,null).getPropertyValue('font-size'); } // FF, Opera
 return fs; 
} 

function increaseFontSize()
{
 var i;
 var j;
 for(j=0; j<tags.length; j++)
  {var v = document.getElementsByTagName(tags[j]);
   for(i=0; i<v.length; i++)
    { var s = parseInt(getFontSize(v[i]));
      if(s!=max) { s += 1; }
      v[i].style.fontSize = s+"px";
    } 
  }
}

function decreaseFontSize()
{
 var i;
 var j;
 for(j=0; j<tags.length; j++)
  {var v = document.getElementsByTagName(tags[j]);
   for(i=0; i<v.length; i++)
    { var s = parseInt(getFontSize(v[i]));
      if(s!=min) { s -= 1; }
      v[i].style.fontSize = s+"px";
    } 
  }
}

</script>

regards,

Martin.

[Martin Wynne]

When I test, heading styles within a toggle have some bizarro tag name like "f_heading3", which of course is a non-recognised tag. This creates the annoying scenario where *some* of the text updates its size and some doesn't.

Hi Simon,

That's not a tag, it's a class name. H&M uses such class names in span tags, so you need to add 'span' to the list:

Code: Select all

var tags = new Array('body','div','p','a','td','th','span');

regards,

Martin.