Request for help with CSS/Html formatted On-Calc Doc

[Tim Wessman]

Hello,

Spurred on by the discussion at http://www.hpmuseum.org/forum/thread-2796.html and to assuage my guilt at having Terje Vallestad once again spend so much time working on it, I spent a bit of time over the weekend creating the ability to output a more easily consumed format for the built in help outside the HP Prime interface.

I was planning to do it directly to PDF, but then I realized that if someone wanted to do things like make a table of contents, and indexes, images, etc it might be easier and better in the long term to go to HTML first as an intermediate step. Also, I wasn't sure that I could directly support writing of internal links between related topics with the limited pdf support I seem to have access to internally.

Thus, I added the ability in the language/help tool to output a tagged html file from the tree. That should allow anyone interested to make edits in other tools and save/export into various formats.

It has been far too long since I've done HTML/CSS stuff nor was it ever a specialty. The request I have is for anyone willing:

1. Take a look at the HTML output I've made and spot any issue or problems with it. - Some things seem unavoidable to me at this time (such as not being able to automatically do numbered lists automatically) due to limitations on the internal text. Maybe your questions or comments will jog my brain and help me get other things tagged up that will be useful though.
2. Propose any changes or tweaks that will make styling or modification easier. For example, finer <div> containers, better nesting.... dunno. Please help as I'm a bit clueless in this area!
3. Provide some CSS suggestions to make a much nicer looking document. Right now it is colored in blocks to highlight the grouping specifically for making it easy to see what items/things are currently grouped as classes or divs. I assume by teweaking some fonts, spacing, header looks and similar, a pretty decent looking document could appear.
   

Hopefully, with a bit of tweaking between both the internal side (by me, to add any changes to the automatic output) and suggestions from interested people reading this, we can make it so that a single click will spit out a decent enough looking document to be useful. At that point I will ensure that all supported languages receive the same treatment and are made available in some way.

Please don't go through and hand edit or modify the existing document! The goal really is to figure out how to automate it and make it easier all around - not just to do a one off fix of things!


  WIP_Html_Output_Prime_Help.zip (Size: 239.6 KB / Downloads: 71)
(html file and css file to open locally on your end to play with)

Thank you!

[pier4r]

Awesome that something happened so quickly. Many thanks!

[chromos]

Some simple and quick ideas in css style (you can see it here: http://chromos.cz/_exported/hp_prime/myHtmlPage.html)

PHP Code:

body {
  font-family: Verdana, Geneva, sans-serif;
  margin: 1em;
}

.example {
    font-family: "Prime Sans Mono", "Prime Sans", monospace;
    background-color: tomato;
    color: white;
    padding: 10px;
    margin: 1em 0;
}
.syntax {
    font-family: "Prime Sans Mono", "Prime Sans", monospace;
    background-color: LightSkyBlue;
    color: black;
  padding: 10px;
}

.seealso {
    font-variant: small-caps;
    background-color: LightSalmon;
    font-weight: bold;
    padding: 10px;
    border: 4px solid #cf704a;
}

ol {
    background: #ff9999;
    padding: 20px;
}

ul {
    /*background: #3399ff;*/
    padding: 5px;
    list-style-type: square;
    /*list-style-position: inside;*/
}

ol li {
    background: #ffe5e5;
    padding: 10px;
    margin-left: 35px;
}

ul li {
    background: #cce5ff;
    margin: 5px;
    padding: 10px;
}

.level1 {
  margin-left:0;
}

.level2, .level3, .level4, .level5, .level6 {
  margin-left:1em;
}

/*
.level3 {
  margin-left:2em;
}
.level4 {
  margin-left:3em;
}
.level5 {
  margin-left:4em;
}
.level6 {
  margin-left:5em;
}
*/

body {counter-reset: h1}
h1 {counter-reset: h2; margin-top: 2em}
h2 {counter-reset: h3; margin-top: 2em}
h3 {counter-reset: h4; margin-top: 2em}
h4 {counter-reset: h5; margin-top: 2em}
h5 {counter-reset: h6}

h1::before {counter-increment: h1; content: counter(h1) ". "}
h2::before {counter-increment: h2; content: counter(h1) "." counter(h2) ". "}
h3::before {counter-increment: h3; content: counter(h1) "." counter(h2) "." counter(h3) ". "}
/*
h4::before {counter-increment: h4; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "}
h5::before {counter-increment: h5; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "}
h6:before {counter-increment: h6; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "}
*/

h1.nocount::before, h2.nocount::before, h3.nocount::before, h4.nocount::before, h5.nocount::before, h6.nocount::before {content: ""; counter-increment: none}
  
.seealso p::before {
    content: "? ";
} 


Notes:
1) In html file, there should be <head> before <meta>.
2) There is many duplicated 'id's in html file, see w3.org validator.

[chromos]

Second try is here:

http://chromos.cz/_exported/hp_prime2/myHtmlPage.html

Screenshot:

[compsystems]

I will collaborate with extra CAS examples (text format) and cmds without documentation, of course, you make changes in the writing of English, my English is not my native language.

For example for assume cmd()
a second example

assume(x, integer);
solve(x^3-x^2+x = 1, x, '=' ) returns {x = 1} instead of {x = 1, x = i, x = −i},

//
makelist
Returns a list made with a function or with a constant. Or create a list of zeros from a constant as the final size

makelist(Fnc/constant,lnitVal,FinalVal,StepVal)

makelist(x->x^2,1,10,2) => [1,9,25,49,81]
makelist(x->ifte(x<=2,y^x,z^x),1,5) => [y,y^2,z^3,z^4,z^5,z^6]
makelist( 0,1,5 ) => [0,0,0,0,0]
makelist( 5 ) => [0,0,0,0,0]

[Tim Wessman]

I am not looking to add more text at this time. It is purely about how to modify existing tags/structure and and add some styling to make it look nicer.

[CyberAngel]

(09-26-2018 04:48 AM)Tim Wessman Wrote:  I am not looking to add more text at this time. It is purely about how to modify existing tags/structure and and add some styling to make it look nicer.

How about fixing those [Help] texts
where the second example is missing both the right arrow and the answer?

[Giancarlo]

Hello,
I like this initiative a lot. One can decide to use it as it is or print it.
The important thing is that it will be updated with every firmware release.

I understand this wants to be an extraction of the online help so, no extra contents. However I think it will be very useful.

Thanks

Giancarlo

[Didier Lachieze]

(09-25-2018 05:50 PM)chromos Wrote:  Second try is here:

http://chromos.cz/_exported/hp_prime2/myHtmlPage.html

This is nice, but I think there is an issue with the sub-lists not being indented correctly, for example look at section 4.4.2 "Function Plot View".

[Tim Wessman]

(09-25-2018 05:50 PM)chromos Wrote:  http://chromos.cz/_exported/hp_prime2/myHtmlPage.html

Looking quite nice! I never knew you could add a little lightbulb thing with CSS.

I was surprised you've kept my horrible two colors though (the blue and red background). Surprisingly, they now actually look pretty decent!

Have you found any places where you'd like more tags? Or fined blocks or elements missing tags you'd expect?

[Tim Wessman]

(09-26-2018 05:30 AM)CyberAngel Wrote:  

(09-26-2018 04:48 AM)Tim Wessman Wrote:  I am not looking to add more text at this time. It is purely about how to modify existing tags/structure and and add some styling to make it look nicer.

How about fixing those [Help] texts
where the second example is missing both the right arrow and the answer?

Such as?

There are examples with no given output specifically because it won't be useful, or has some randomness, or other types of things. Only items that show a result and arrow in the calculator, but are missing it in the outputted HTML are concerning at this point I think.

[chromos]

(09-26-2018 08:56 AM)Didier Lachieze Wrote:  This is nice, but I think there is an issue with the sub-lists not being indented correctly, for example look at section 4.4.2 "Function Plot View".

Unfortunately, there are many such places, not only at section 4.4.2, because in source html code are no nested lists, they are coded as ordinary paragraphs. :-(

(09-26-2018 11:09 AM)Tim Wessman Wrote:  I was surprised you've kept my horrible two colors though (the blue and red background). Surprisingly, they now actually look pretty decent!

They are corporation colors, so I was not dare enough to change them. :-)

(09-26-2018 11:09 AM)Tim Wessman Wrote:  Have you found any places where you'd like more tags? Or fined blocks or elements missing tags you'd expect?

No, I think your code is very well made regarding to semantic. Only some lists aren't coded as lists (see my reply a few lines above).

===
I'm glad you both liked my effort. I tried to get as close as possible to the official HP Prime manual.

= Current changelog at my css =
Added

PHP Code:

.seealso a {
    font-variant: normal;
} 


Reason: 'See Also:' is in small-caps and links were in small-caps too.

[Tim Wessman]

(09-26-2018 03:04 PM)chromos Wrote:  They are corporation colors, so I was not dare enough to change them. :-)

Boarding a plane to head to the HHC conference shortly so I can't say much - the colors most definitely were not "official" hp colors. In fact, the red "tomato" color was just some color from the CSS snipped I found and pasted in.

The blue if you've pulled it from the document is probably some sort of corporate color. If it is the original one, that was just me picking a blue.

Looks pretty amazing!

I will see if I can do more to recognize some of the internal sub lists to correct those items. Will be a bit tricky, but I can probabably do it for 90-95% of them or so. Guess I know a project to work on in the flight!

[Tim Wessman]

(09-25-2018 01:01 PM)chromos Wrote:  1) In html file, there should be <head> before <meta>.
2) There is many duplicated 'id's in html file, see w3.org validator.

Can fix the first, but didn't see that reporting duplicate IDs. There may be a few help items placed in more then 1 spot, so guessing that is what they are potentially. Do you have an example though to help me test/findit?

[chromos]

(09-26-2018 11:22 PM)Tim Wessman Wrote:  

(09-25-2018 01:01 PM)chromos Wrote:  1) In html file, there should be <head> before <meta>.
2) There is many duplicated 'id's in html file, see w3.org validator.

Can fix the first, but didn't see that reporting duplicate IDs. There may be a few help items placed in more then 1 spot, so guessing that is what they are potentially. Do you have an example though to help me test/findit?

Sorry, link to w3.org validator goes to my first page (which is no longer that page to prevent confusion). Proper link is now https://validator.w3.org/nu/?doc=http%3A...lPage.html.

If you want, you can validate your own copy of html file here: https://validator.w3.org/ (by uri, file upload or pasting text).
If nothing from above works for you, you can see saved result from w3.org validator here: http://chromos.cz/_exported/hp_prime2/va...result.htm.