Jump to content
  • Announcements

    • AndalayBay

      Leaving IP.Board   11/13/2017

      See full announcement here.
    • AndalayBay

      New Theme Set Up   11/14/2017

      We have a new theme created by Vincent that's now available to everyone. It has been set as the default theme, so everyone should see it when you refresh the page. If you still aren't seeing it, you can select it from the Theme drop-down at the bottom of the page. It's called Assimilation. Thanks Vincent. Awesome looking theme!
Sign in to follow this  
Schtearn

HTMLHelp: Sundry Tips, Trip-Ups & Musings

Recommended Posts

Posted (edited)

A facsimile (love the word) copy of the blurb at AHK- (Edit: well a few revisions behind as of 5/17 as the BBCcode differs):

 

Interested in using HTMLHelp for your own project?

Then read on!

Despite HTMLhelp running remarkably well for it's age in windows 10, can't help wondering why AHK stuck with it when there are good and possibly more user friendly (and free) programs around based on it.

Pity MS never made it open source like they never did with the (possibly superior) original WinHlp32 system.

In reading user comments on HTMLHelp the general consensus appears to be don't bother unless one is not competent in HTML.

TBQH mine own knowledge of HTML isn't great either, which is why using it as the recommended help system presents itself somewhat as a challenge.

The other thing to watch out for is keeping one's code to HTML version 4 or less, and there are not many 3rd party programs today that do it well enough (Bluefish and Dreamweaver come to mind as being useful in that regard). And the dinky (oh so nineties) gui featuring the Notepad-like CTRL-Z undo/redo toggle.

 

As MS's own riff on how to use HTMLHelp cannot be surpassed, we are not offering a full-blown tutorial,- just a few points on ease of use.

 

To begin with, download and install it, then run the executable hhw.exe from the install directory- typically Program Files (x86)\HTML Help Workshop.

The in-built help file describes how to start a project and add HTML files to it. It's recommended at some stage decompiling the AHK help file to see how things are setup, so let's do that now.

After decompiling the project to an empty folder, we note there is no hpp file generated so download it from github and copy it to the location where the decompiled AHK chm resides along with the Table of Contents.hhc and index.hhk. Upon closing any current projects in the Help Gui, open the AHK project and double click the windows section in the sidebar pane.

Click the files tab to verify the file layout. Note the settings in the other tabs and that the HTMLHelp WM_Help context question mark doesn't trigger on the controls. Meh. Also note there is no in-house "browser preview" of the content until the project is compiled, which at least has since become an integral part of the Visual Studio environment. Double click on the Options section for the tabbed options dialog- perhaps checking "Support enhanced decompilation" under Compiler generates the above missing hhp?

Click over to the Index tab to view the vast indexed list, then return to the contents tab and double click on Quick Reference. Yep, the layout is as with any other HTML page- the most critical is the following:

 

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="static/theme.css" rel="stylesheet" type="text/css" />
<script src="static/content.js" type="text/javascript"></script>
The link href points to the theme.css file and the script source points to content.js where various js constructs reside. Note the above content is found on every page in the project!

The following line of code shows how an image in the project is linked:

<img src="static/ahk_logo.png" alt="AutoHotkey"></a>
BTW the in-house image editor is still very capable for its age!

Lets now look at the entire stylesheet here with some extra (hopefully explanatory) comments- bearing in mind OP has been using CSS for barely five minutes: :lol:

 

 

html, body { /*comma applies to both elements*/

margin: 0;

padding: 0;

height: 100%;

}

body {

margin: 0 8px 0 8px;

font-size: .875em; /*em is an HTML emphasis phrase tag. Here it is typographic font size with properties overridden below */

line-height: 1.75;

background-color: #fefefe;

padding-bottom: 3em;

}

html {

font-family: Arial, sans-serif;

}

img {

border: none;

}

img::selection { /*selects portion selected by user- "selection" is a pseudo-element*/

background: transparent;

}

img::-moz-selection { /*above for Firefox*/

background: transparent;

}

a { /*a element refers to all hyperlink tags*/

text-decoration: none;

}

a:link, a:active { /* :link looks to be a class selector, not a pseudo-element*/

color: #4280CA;

}

a:visited {

color: #AA00AA;

}

a:hover, a:focus {

text-decoration: underline;

color: #2A6496;

}

#MyApp img { /*hash before ID makes it unique*/

margin: 20px 0 20px 0;

}

input, select {

border: 1px solid #ccc;

}

pre, code { /*pre is pre-formatted*/

border-right: solid 1px #C8C8C8;

border-bottom: solid 1px #C8C8C8;

background-color: #F6F6E8;

}

pre, .Syntax { /* "Syntax: user defined class with following properties */

font-family: Consolas, Courier New, monospace;

}

.Syntax {

background-color: #FFFFAA;

border: solid 1px #E8E89A;

}

code, span.Syntax { /* span or inline element with class name of Syntax */

font-family: Consolas, Courier New, monospace;

padding: 0 1px;

}

pre {

background-color: #F6F6E8; /*#F3F3FF*/

margin: 0.7em 1.5em 0.7em 1.5em;

padding: 0.7em 0 0.7em 0.7em;

white-space: pre-wrap; /* works in IE8 but apparently not CHM viewer */

word-wrap: break-word; /* works in CHM viewer */

}

pre.Syntax {

margin: 0 0 1.0em 0;

padding: 12px 0 12px 4px;

line-height: 150%;

}

pre, pre.Short /*used with .Syntax -to enforce make Short a subclass?*/ {

line-height: 120%;

}

pre em, code em { /* em is a size factor of Font, em is some descendant of both pre and code */

color: #00A000;

font-style: normal;

}

.NoIndent {

margin-left: 0;

}

::selection {

color: #fff;

background: #6c7a95;

}

::-moz-selection {

color: #fff;

background: #6c7a95;

}

h1 {

font-size: 2em;

font-weight: bold;

border-bottom-color: #FFFFFF;

border-bottom-width: 2px;

margin-top: 8px;

color: #3F5770; /* Well known navy bluish header */

}

.navh1 { /* override of h1 in javascript main.js */

font-weight: normal;

background-color: #606060;

color: #FFF;

margin: 0px -8px 8px -8px;

padding: 7px 8px 0px 8px;

text-overflow: ellipsis;

overflow: hidden;

height: 43px;

border-bottom: 1px solid #ccc;

font-size: 1.5em;

white-space: nowrap;

}

.navh1 a {

color: #CCC !important;

}

h2 {

color: #A04040;

}

h3 {

color: #008800;

}

#headerbar { /* referenced in javascript main.js but not used in help files*/

background-color: #606060;

position: absolute;

top: 108px;

left: 0px;

width: 100%;

height: 50px;

z-index: -1;

border-bottom: 1px solid #ccc;

}

a:visited {

color: #7847b2;

}

h2:first-child {

margin-top: 0;

}

h4 {

margin-bottom: 0;

line-height: 1;

}

 

h1, h2, h3 {

border-bottom: 1px solid #ddd;

}

/* table of command parameters */

table {

margin-bottom: 1em;

}

table.info {

border: solid 2px #C0C0C0;

border-collapse: collapse;

width: 100%;

}

table.info td {

border: solid 1px #C0C0C0;

padding: 0.3em 0.5em;

}

table.info th {

background-color: #F6F6F6;

padding: 0.3em 0.5em;

}

/* heading note / version number/requirement tag */

.headnote,

h1 .ver, h2 .ver, h3 .ver {

color: #808080;

font-size: 65%;

font-weight: normal;

margin-left: 1em;

vertical-align: text-middle;

}

h4 .headnote,

h4 .ver {

font-weight: normal;

}

.ver, a.ver {

color: gray;

}

a.ver:hover, a.ver:focus {

text-decoration: none;

}

.dull {

color: gray;

}

.red {

color: red;

} /* used for highlight in various places */

.blue {

color: blue;

}

/* emphasized note */

.note {

border-left: 2px solid #99BB99;

background-color: #E6FFE6;

color: #005500;

padding: .5em 1em;

}

.warning {

border-left: 2px solid #FFA000;

background-color: #FFF8E6;

color: #C05500;

padding: .5em 1em;

}

/* styles for briefly documenting multiple methods on one page: */

.methodShort {

border: solid thin #C0C0C0;

padding: 0.5em;

margin-bottom: 1em;

}

.methodShort h2 {

margin-top: 0;

color: black;

border-bottom: 0px;

}

.methodShort table.info {

border: none;

}

.methodShort table.info td {

border: none;

vertical-align: text-top;

}

.methodShort:target { /* non-essential, but helpful if it works */

border-color: black;

}

 

/* sidebar - or navigation pane if you like */

 

ul.jqtree-tree {

margin-left: 20px;

}

 

ul.jqtree-tree,

ul.jqtree-tree ul.jqtree_common {

list-style: none outside;

margin-bottom: 0;

padding: 0;

}

 

ul.jqtree-tree ul.jqtree_common {

display: block;

margin-left: 12px;

margin-right: 0;

}

ul.jqtree-tree li {

line-height: 1.5em;

padding: .2em 0 .2em 0;

}

ul.jqtree-tree li.jqtree-closed > ul.jqtree_common {

display: none;

}

 

ul.jqtree-tree li.jqtree_common {

clear: both;

list-style-type: none;

}

ul.jqtree-tree .jqtree-toggler {

display: block;

position: absolute;

left: -1.5em;

top: 30%;

*top: 0; /* fix for ie7 */

font-size: 10px;

line-height: 12px;

font-family: arial; /* fix for ie9 */

border-bottom: none;

color: #333;

}

 

ul.jqtree-tree .jqtree-toggler:hover {

color: #000;

}

 

ul.jqtree-tree .jqtree-element {

cursor: pointer;

}

 

ul.jqtree-tree .jqtree-title {

vertical-align: middle;

}

 

ul.jqtree-tree li.jqtree-folder {

margin-bottom: 4px;

}

 

ul.jqtree-tree li.jqtree-folder.jqtree-closed {

margin-bottom: 1px;

}

 

ul.jqtree-tree li.jqtree-folder .jqtree-title {

margin-left: 0;

}

 

ul.jqtree-tree .jqtree-toggler.jqtree-closed {

background-position: 0 0;

}

 

ul.jqtree-tree .jqtree-element {

width: 100%; /* todo: why is this in here? */

*width: auto; /* ie7 fix; issue 41 */

position: relative;

}

 

ul.jqtree-tree li.jqtree-selected > .jqtree-element

{

font-weight: bold;

color: #dd4b39;

}

 

ul.jqtree-tree li > .jqtree-element:hover

{

background-color: #eee;

}

 

.main-content {

width: 100%;

min-height: 100%;

height: auto!important;

height: 100%;

}

#app-body {

width: 100%;

}

#app-body .left-col {

width: 231px;

float: left;

}

#app-body .right-col {

margin-left: 231px;

}

#main-content {

padding-left: 13px;

padding-right: 26px;

min-height: 230px;

max-width: 950px;

}

.right-col #main-content {

border-left: 1px solid #e5e5e5;

}

 

/* Header */

 

.header {

position: relative;

background: #333;

height: 67px;

padding: 20px 25px;

margin: 0 -8px 0 -8px;

border-bottom: 1px solid #e5e5e5;

z-index: 9999;

white-space: nowrap;

}

 

.hdr-table {

width: 100%;

max-width: 1180px;

height: 81px;

}

 

.hdr-table td {

margin: 0;

padding: 0;

}

.hdr-table .hdr-image, .hdr-table .hdr-image img {

width: 217px;

}

 

.hdr-table .hdr-search {

vertical-align: bottom;

padding-bottom: 13px;

}

 

.hdr-table .hdr-search form {

display: inline-block;

}

 

.hdr-table .hdr-search input {

padding-left: 5px;

font-size: 1em;

height: 25px;

font-family: Arial, sans-serif;

width:210px;

vertical-align: middle;

border: 1px solid #999;

margin-left: 8px;

}

 

.hdr-table .hdr-search #search-btn {

display: inline-block;

height: 27px;

line-height: 27px;

width: 70px;

color: #bbb;

background: #606060;

text-align: center;

vertical-align: middle;

border: 1px solid #808080;

text-transform: uppercase;

cursor: pointer;

margin: 0px 10px;

}

 

.hdr-table .hdr-search #search-btn:hover, .hdr-table .hdr-language li:hover {

color: #FFF;

background: #808080;

}

 

.hdr-table .hdr-language {

vertical-align: bottom;

text-align: right;

padding-bottom: 13px;

}

 

.hdr-table .hdr-language ul {

display: inline-block;

padding:0;

margin:0;

}

 

.hdr-table .hdr-language li {

border:1px solid #808080;

background: #606060;

color:#bbb;

cursor:pointer;

display:block;

width: 100px;

text-align: center;

vertical-align: middle;

height: 27px;

line-height: 27px;

position:relative;

text-transform: uppercase;

}

 

.hdr-table .hdr-language .second {

left:-1px;

position:absolute;

top:28px;

display: none;

}

 

.hdr-table .hdr-language .second li {

text-transform: none;

}

 

/* Footer */

 

.footer {

background: #333;

color: #fff;

line-height: 44px;

margin: 0 -8px 0 -8px;

padding: 0 26px;

}

 

.footer a {

color: #CCC;

}

 

.float-clear {

clear: both;

}

 

.nav {

width: 242px;

float: left;

margin-top: -2px;

;

padding: 0;

list-style: none;

background-color: #808080;

border-bottom: 1px solid #ccc;

border-top: 1px solid #ccc;

}

 

.nav li {

float: left;

width: 50%;

text-align: center;

cursor: pointer;

}

.nav .selected {

background-color: #bbb;

}

 

.nav .selected span {

color: #000;

}

 

.nav li span {

display: block;

padding: 8px 15px;

text-decoration: none;

color: #FFF;

border-right: 1px solid #ccc;

height: 35px;

text-transform: uppercase;

font-size: 1.5em;

}

 

.nav li span:hover {

color: #000;

background-color: #bbb;

}

 

#IndexEntry {

width: 214px;

font-size: 1em;

font-family: helvetica, Arial, sans-serif;

}

 

#indexcontainer {

width: 216px;

font-size: 1em;

font-family: helvetica, Arial, sans-serif;

height: 100%;

}

 

/* command parameters */

dt { /* param name */

color: #008800;

margin-left: 0.5em;

}

 

dd {

margin-left: 1.5em;

padding-left: 1.0em;

border-left: 0.3em solid #e0e0e0;

margin-bottom: 1em;

}

dd > p:first-child {

margin-top: 0.3em;

}

 

 

 

So what now? How do we pare down something like the AHK file help for a smaller but fully functional and different help system? A good way is to modify the stylesheet with different font pitch font, colour, padding and so forth, but to aid the beginner with something much less erudite click Tags/Insert from the menu and note the slots are all empty.

Let's populate them! (A SuperUser may be able to expedite the following process)

Clicking Tags/Edit and the first empty slot, paste the following into the title edit box:

Standard link to file
And paste this into the Text block:

<a href="Root/File.htm">Link_to_File.htm_text</a>
Slot 2 title:

Metas (used by AHK)
This into the Text block:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Slot 3 title:

Java Source
Slot 3 Text:

<script src="static/content.js" type="text/javascript"></script>
Slot 4 title:

Tables
Slot 4 Text:

<h3>Table Title</h3>
<table class="info">
<tr id="Something label">
<td>Something</td>
<td>Info on something</td>
</tr>
</table>
Slot 5 title:

Unordered list
Slot 5 Text:

<ul>
  <li>Something</li>
  <li><a href="htm file">htm filename</a></li>  
</ul>
Slot 6 title:

Span for Color
Slot 6 Text:

<span style="color:red">red</span>
Slot 7 title:

Standard paragraph
Slot 7 Text:

<p>Blah...Paragraph can be broken up with <br> no closing tag required</p>
Slot 8 title:

Description List (From W3 schools)
Slot 8 Text:

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
And lastly for slot 9 do something fancy like the well-known Select All/Download routine:

Pre Code AHK style
And paste this into the Text block:

<pre>Some Code like Text</pre>

In the CSS
pre, code {
border-right: solid 1px #C8C8C8;
border-bottom: solid 1px #C8C8C8;
background-color: #F6F6E8;
}

In the js file

// Show select and download buttons in lower right corner of a pre box

var divStyle = {fontSize: "11px", float: "right"};
var aStyle = {cursor: "pointer", color: $("a:not([href=])").css("color")};
var selectLink = $('<a id="selectCode"></a>').text(translate.cdSelectBtn).css(aStyle);
var downloadLink = $('<a id="downloadCode"></a>').text(translate.cdDownloadBtn).css(aStyle);

$('pre').each(function(index) {
if ($(this).is(".Syntax")) {
$.extend(divStyle, {marginTop: "-32px", marginRight: "7px"});
$(this).after($('<div>').css(divStyle).prepend(selectLink.clone()));
}
else {
$.extend(divStyle, {marginTop: "-28px", marginRight: "28px"});
$(this).after($('<div>').css(divStyle).prepend(selectLink.clone(), [' | ', downloadLink.clone()]));
}
});

// Select complete code when clicking

$('a#selectCode').each(function(index) {
$(this).on('click', function(e) {
var doc = document
, text = $(this).parent().prev('pre')[0]
, range, selection
;
if (doc.body.createTextRange) {
range = document.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if (window.getSelection) {
selection = window.getSelection();
range = document.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
}
});
});

// Download complete code when clicking

$('a#downloadCode').each(function(index) {
$(this).on('click', function(e) {
var textToWrite = '\ufeff' + $(this).parent().prev('pre').text().replace(/\n/g, "\r\n");
var textFileAsBlob = new Blob([textToWrite], {type:'text/csv'});
var fileNameToSaveAs = location.pathname.match(/([^\/]+)(?=\.\w+$)/)[0] + "-Script.ahk";

var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";

if (window.webkitURL != null) {
// Chrome
downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
downloadLink.click();
}
else if (navigator.userAgent.indexOf("Trident")>-1) {
// IE 10+
navigator.msSaveBlob(textFileAsBlob, fileNameToSaveAs)
}
else {
// Firefox
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
downloadLink.click();
}
});
});
}
Well not all that for Slot #9 really, but it's there if you wanted to know how it all works - or want to do something similar. :P

 

And the spanning tag can also be expanded to the following item via another element: e.g.h2

 

<li><a href="#Something">Something</a></li>

<span id="Something"></span><h2 id="Description_of_Something">Something</h2>

with

h2 {

color: #A04040; /* red */

in the css file

Inserting these blocks into the help pages saves a little bit of extra work:- evidenced when only one project can be loaded in one time. Sure other files from other projects can be loaded, but in doing so leaves one prone to errors or unwanted files in the project as it evolves.

 

So there we have it- if there is anything amiss with a project the compiler will let you know. To actually link the files into an application refer to WM_Help Context IDs for GUI Controls and chm invocation. Using Anchors with the hidden attribute for topic section jumps is a good idea as well.

The AHK help file itself has been taken care of over the years by many hands, but some components still remain a mystery. e.g. the Footer. It doesn't use anything like a (floating) footer, yet the CSS definitions remain for it.

Good idea then to only keep the elements & classes that will be actually used in the chm.

Edited by Schtearn

Share this post


Link to post
Share on other sites

It really would be a lot easier to just write your own HTML 5 help pages. HTML 5 and CSS 3 are major improvements over the previous versions and I wouldn't be surprised to see modern browsers drop support for the older syntax.

Share this post


Link to post
Share on other sites

Then why does it have a browser test block? If you use HTML 5 and CSS 3, you can scrap all that because they all support it. :) You can still display the results in your own GUI. And put the appropriate hooks in your program to display the appropriate help section.

Share this post


Link to post
Share on other sites

What's a browser test block? Someone said HTMLHelp can be used to sidestep browser lockout in a malware infected PC. Dunno 'bout that though. :P

It's actually possible to use HTML5 & CSS3 in it anyway, but haven't gone that route yet. :)

But yeah, it's ridiculous using a program so old- 20 years now? Even larger programs like AOO or Libre don't use context help- and what with the advent of WPF it doesn't seem to be called on anyway.

However, it would be nice if the browser developers of today cooked up their own chm utilities based on HTMLHelp. Chms are very portable, and even designing and implementing a web site in a chm_like gui could be quite fun!

Share this post


Link to post
Share on other sites

Browser test block:

 

if (window.webkitURL != null) {
// Chrome
downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
downloadLink.click();
}
else if (navigator.userAgent.indexOf("Trident")>-1) {
// IE 10+
navigator.msSaveBlob(textFileAsBlob, fileNameToSaveAs)
}
else {
// Firefox
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
downloadLink.click();
}
});
});

I have no idea what the context is or why this code is necessary, but code like that is a major PITA because it's notorious for failing on a regular basis.

 

I would imagine that you could change to HTML 5 and CSS 3 fairly easily.

Share this post


Link to post
Share on other sites

Oh that's from the AHK content.js. It's used for their website.
Dunno who wrote that script or where it came from. Perhaps based on the old PHPBB setup there? Terrible format, and sparsely commented.

Share this post


Link to post
Share on other sites
Posted (edited)

AL pages load very nicely into HTMLHelp. As opposed to others. AHK produces tons of JS errors.

gallery_5078_72_79321.jpg

Don't know what the IPB 4.1 will do. :P

Edit:

Couldn't resist the Droste like effect on this post. :P

gallery_5078_48_23202.jpg

Edited by Schtearn

Share this post


Link to post
Share on other sites

Wouldn't it be better to transfer that into the help file and provide a link to the download page in the help file that can be clicked on for more information? :)

 

I'm not entirely sure the HTML help system was designed with web browsing in mind. :P

Share this post


Link to post
Share on other sites
Posted (edited)

Wouldn't it be better to transfer that into the help file and provide a link to the download page in the help file that can be clicked on for more information? :)

 

I'm not entirely sure the HTML help system was designed with web browsing in mind. :P

Already done. Was just testing how the page would show. :)

No. Funnier how development of the incredible HTMLHelp system was dropped by M$S in favour of WPF crapware amongst other things.

Edited by Schtearn

Share this post


Link to post
Share on other sites

Ah, okay.

 

They've been pushing Net for years, they've just started pushing harder lately. I've never been a personal fan of the approach they're trying to transition to with the whole UWP and all. :shrug:

 

The overall idea of a unified platform is a good one but, in my opinion, they're not going about it the right way.

Share this post


Link to post
Share on other sites

How's this for a laugh?

 

Here's the html for the welcoming page of HTMLHelp:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>

<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="GENERATOR" content="Microsoft HTML Help Workshop 4.0">
<title>Microsoft HTML Help</title>
<style>@import url(coUA.css);</style>
<link disabled rel="stylesheet" href="htmlhelp.css">

<script language="JavaScript" src="master.js"></script>

</head>

<BODY background="blue.jpg" STYLE="background-repeat:no-repeat;">

<img src="hhwani.gif" align = right border="0" width="60"
height="60">
<h1>Microsoft HTML Help
</h1>

<p><a onclick="doExpand(exp1,ar1)" href="#nowhere">
	<img src="arrowdn.gif" id="ar1" border=0>Overview</a></p>
	<DIV CLASS="expara" ID="exp1" STYLE="display:">	
 
Microsoft® HTML Help consists of an online Help Viewer, related help components, and help authoring tools from Microsoft Corporation. The Help Viewer uses the underlying components of Microsoft Internet Explorer to display help content. It supports HTML, ActiveX®, Java™, scripting languages (JScript®, and Microsoft Visual Basic® Scripting Edition), and HTML image formats (.jpeg, .gif, and .png files). The help authoring tool, HTML Help Workshop, provides an easy-to-use system for creating and managing help projects and their related files.
	</DIV>

<p><a onclick="doExpand(exp2,ar2)" href="#nowhere">
	<img src="arrowrt.gif" id="ar2" border=0>Features</a></p>
	<DIV CLASS="expara" ID="exp2" STYLE="display: none;">	
	<ul>
	<li>The HTML Help components, which consist of an ActiveX control or Java Applet to insert into HTML files, a help authoring tool, an online image editing tool, and an executable program that displays a user's help files.
<a href="whatis.htm" onmouseover="liteGo(go2)" onmouseout="liteOff(go2)">
<span ID="go2" class="endlink">GO</span></a>
	<li>An authoring guide with sections on how to design a help system and how to use HTML Help Workshop. 
<a href="guide.htm" onmouseover="liteGo(go3)" onmouseout="liteOff(go3)">
<span ID="go3" class="endlink">GO</span></a>
	<li>References that contain information about the HTML Help ActiveX control, an HTML Help API reference for developers, a complete HTML tag reference, and reusable help topics that explain how to use the Help Viewer. 
<a href="helpref.htm" onmouseover="liteGo(go4)" onmouseout="liteOff(go4)">
<span ID="go4" class="endlink">GO</span></a>
	</li>
	</ul>

	</DIV> 

<table border="0" cellpadding="0" cellspacing="0">

<tr> <td valign="top"><a href="overauth.htm"><img src="home.gif" alt="Home page link" border="0"></a>
</td><td><a href="overauth.htm">About creating help</A>
</td></tr>
<tr><td> </td></tr>
</table>

</body>
</html>

Here's the coua.css:

 

 

/* Cascading Style Sheet for HTML Help Workshop */

body { font-size: 75%;
line-height: 125%;
font-family: Verdana, Arial, Helvetica, }

a:link { color: #0000FF; }

a:active { color: #FF33CC; }

a:visited { color: #800080; }

a:hover {color: #800080;
font-weight: bold; }

a:sidebar {color: #339900; }

h1 { font-size: 125%;
margin-bottom: .5em;
line-height: 125%; }

h2 { font-size: 115%;
margin-top: 1.5em;
margin-bottom: .5em; }

h3 { font-size: 100%;
margin-top: 1.2em;
margin-bottom: .5em; }

h4 { font-size: 100%;
color: darkmagenta;
margin-top: 1.2em;
margin-bottom: .5em; }

p { margin-top:6pt; margin-bottom: 6pt; }

p.margin {
margin-left: 57pt;
margin-top: -47pt; }

p.margin2 {
margin-left: 57pt; }

li p { margin-top: .6em;
margin-bottom: 0em; }

big { font-weight: bold;
font-size: 105%; }

ol {margin-top: .5em;
margin-bottom: 0em }

ul {margin-top: .6em;
margin-bottom: 0em;
margin-left: 2.75em; }

ol ul { list-style: disc; margin-top: 2em; }

li {padding-bottom: .3em;
; }

dl ul { margin-top: 2em;
margin-bottom: 0em; } /*list item inside a def/term*/

dl { margin-top: -1em; }

ol dl { margin-top: -1.5em;
margin-left: 0em; } /*term/def list inside a numbered list*/

ol dl dl { margin-top: 0em;
margin-left: .2em; } /*term/def list inside a term/def list*/

dd { margin-bottom: 0em; /*not currently working*/
margin-left: 1.5em; }

dt { padding-top: 2em;
font-weight: bold;
margin-left: 1.5em; }

code {font-family: Courier; }

pre { margin-top: 0em;
margin-bottom: 1.5em;
font-family: Courier;
}

table { font-size: 100%;
text-align: left;
margin-top: 1em;
}

tr { margin: .50em;
vertical-align: top;
}

th { text-align: left;
margin: .50em;
vertical-align: top;
background: #dddddd;
}

td { margin: .50em;
vertical-align: top;
}

/* Only use this for sidebars that ARE in a list */
DIV.sidebartext {
position: relative;
left: -22px;
height: 72px;
width: 300px;
margin-top: .6em;
margin-right: 3em;
margin-left: 0;
margin-bottom: .6em;
padding-top: .75em;
padding-right: 6px;
padding-left: .75em;
padding-bottom: .75em;
cursor: hand;
border-left: 4pt solid #339900;
background-color: #F0F0F0; }

/* Only use this for sidebars that are NOT in a list */
DIV.sidebartbl {
height: 72px;
width: 300px;
margin-top: .6em;
margin-right: 3em;
margin-left: 0;
margin-bottom: .6em;
padding-top: .75em;
padding-right: 8em;
padding-left: .75em;
padding-bottom: .75em;
cursor: hand;
border-left: 4pt solid #339900;
background-color: #F0F0F0; }

a:visited.sidebar: {
color: #339900;
text-decoration: none; }

a:hover.sidebar: {
text-decoration: underline; }

.endlink {
line-height: 6pt;
position: relative;
top: 1pt;
background-color: transparent;
font-weight: bold;
font-size: 7pt;
font-style: italic;
color: black;
text-decoration: none;
cursor: hand;
width: 20px;
height: 8pt;
padding-top: -2pt;
padding-bottom: 1pt;
margin: 0pt;
border-bottom: 1pt solid #00cc33;
border-top: 1pt solid #00cc33;
}

 

And the HTMLHelp.css:

 

/* Microsoft HTML Help WorkShop CSS*/

body { font-size: 75%;
font-family: Verdana, Arial, Helvetica, Sans-Serif; }


a:link { background: transparent;
color: #0000FF; }

a:visited { color: #800080; }

h1 { font-weight: bold;
font-size: 55%;
margin-bottom: -2.2em; }

li { margin-top: 4pt; }

ul li { padding-top: 4pt; }

ol li { padding-bottom: 4pt; }

ul { ;
margin-top: -7em; }

ol { ;
margin-top: -7em; }

ol ul { margin-top: 0em;
list-style: disc; }

code { font-family: Courier; }

pre { font-family: Courier; }

table { width: auto;
text-align: left;
font-size: 75%;
font-size: +12; }

th { text-align: left; }

td { margin-right: 0em; }

img { margin-top: -4pt; }

/* Overview heading */
h5.overh { font-size: 120%; }

h5 { font-size: 100%; }

/* Procedure heading */
h5.proch { font-size: 100%; }

/* Decision heading */
h5.what { font-size: 100%;
color: #993399; }

/* Note & Tip heading */
h5.note { font-size: 95%; }

 

Well blimey according to the background-repeat value the background bitmap somehow magically stretches if the window is maximised.

The JS scripts don't do anything:

 

//This is the master JavaScript file for the HTML Help documentation.

/* These functions (doSection, noSection) are used to make sidebars appear and disappear.
*/

function doSection (secNum){
//display the section if it's not displayed; hide it if it is displayed
if (secNum.style.display=="none"){secNum.style.display=""}
else{secNum.style.display="none"}
}

function noSection (secNum){
//remove the section when user clicks in the opened DIV
if (secNum.style.display==""){secNum.style.display="none"}
}

function doExpand(paraNum,arrowNum){
//expand the paragraph and rotate the arrow; collapse and rotate it back
if (paraNum.style.display=="none"){paraNum.style.display="";arrowNum.src="arrowdn.gif"}
else{paraNum.style.display="none";arrowNum.src="arrowrt.gif"}
}

//These functions control the behavior of the homepage go arrows.
function liteGo(spNo){
spNo.style.background="#00cc33";
spNo.style.color="#FFFFFF";
}

function liteOff(spNo){
spNo.style.background="transparent";
spNo.style.color="#000000";
}

//Insert new functions here. Please use unique identifiers and comment liberally.

 

But see the answers to this page, stretching or scaling didn't happen until around 10 years ago.

How did MS do that I wonder?

Share this post


Link to post
Share on other sites
Posted (edited)

Why did you disable your stylesheet with

<link disabled rel="stylesheet" href="htmlhelp.css">
?

 

And your first stylesheet has

font-family: Verdana, Arial, Helvetica,
which should probably be
font-family: Verdana, Arial, Helvetica;
Edited by Visceral Moonlight

Share this post


Link to post
Share on other sites

My stylesheet? This is the decompiled original Help file for HTMLHelp ~1998 with revisions up to 2002 -think.

Did you find where MS have scaled the bitmaps? I think it's one of their best kept secrets. :)

Share this post


Link to post
Share on other sites

Ah, then it looks like the generator may have messed some stuff up that's no longer supported by newer web standards. I'll look at fixing some of it up. :)

 

Does the viewer support HTML 5?

 

No idea on the bitmaps, sorry.

Share this post


Link to post
Share on other sites

There's no need to fix it, because it won't be needed. Just to illustrate a point that picture stretching in html was done a different way prior to CSS3  discussed at Stackoverflow,probably with the API. Compiling the above in a user chm will never get anything stretched or scaled unless using CSS3 attributes.

Share this post


Link to post
Share on other sites

Win32: the package contains an inf file, advpack.dll and dcomcnfg.exe showed a tabbed gui. Was able to apply the LAA flag to the zipped executable and dcomcnfg.exe with PrgLnch!

95 was a major release. Goodbye to 16 bit forever. DOS was on the way out- you still had win.ini and system.ini and autoexec.bat in Win9.x but not for long!

Share this post


Link to post
Share on other sites

DOS wasn't killed until XP! I remember having to use the DOS mode on 95 for some recovery operations. My install had a tendency to break periodically. :P

 

I really liked Windows 95, though. It was, overall, a good version of Windows.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×