Random suggestions re: online html documentation navigation

Raoul_Duke · February 3, 2015, 9:52am

e.g. if i am reading
http://ats-lang.sourceforge.net/DOCUMENT/INT2PROGINATS/HTML/c95.html

and want to get to the TOC… I think the “up” link should appear at
the top of the page. As in, if it is going to be anywhere, it should
be at the top. Ok to have it on the bottom as well. Not so usable to
have it only at the bottom.

and it would be great if
http://ats-lang.sourceforge.net/DOCUMENT/INT2PROGINATS/HTML/

had an index.html file.

gmhwxi · February 9, 2015, 4:03pm

Yes, the dotted vertical line.

This line shifted when content changed. I now set width of TOC to be
25% to stop shifting.On Monday, February 9, 2015 at 10:44:05 AM UTC-5, Yannick Duchêne wrote:

Le lundi 9 février 2015 15:56:44 UTC+1, gmhwxi a écrit :

I experimented with the following issues:

Fixing the position of the vertical bar that separates TOC from the
book content

Shrinking the right margin of the book content

I don’t understand issue #1. The vertical bar that separates the TOC from
the content: is this the dotted line?

Yannick_Duchene · February 5, 2015, 2:40pm

What I had in mind is something like this:

3. “Hello, world!” on ATS — ATS Programming Foundations 0.2.0 documentation

To get this, we probably need some JS code to rearrange the layout of the
book.

OK, I see. There are two ways of achieving this: a static one relying on
your DSSSL sheet and a dynamic one relying on JavaScript. For JavaScript, I
see two possible variant: either use the main index page as the source for
the links or use an XML file a the source for the links.

I can only try the JavaScript way. May post something tomorrow or within
two or three days. There won’t be a search box, though.

Yannick_Duchene · February 8, 2015, 11:34pm

What I had in mind is something like this:

3. “Hello, world!” on ATS — ATS Programming Foundations 0.2.0 documentation

To get this, we probably need some JS code to rearrange the layout of the
book.

Sorry for being late.

Here is: as attached files, INT2PROG.js and INT2PROG.css

INT2PROG.css is a modified version of the original. All changes are at
the end, and nothing else was changed.

INT2PROG.js is to be located in the same directory as INT2PROG.css and
additionally, this snippet must be added into each page, just before the
body closing tags (i.e. as the last element of the body) :

 <script src="INT2PROG.js"></script>

I could not fully test it. If there is an issue, please, send me an archive
of all the files whith the snippet added at the end, so that I can better
test it.

If it’s OK or as soon as it will be OK, I will tweak the style a bit.

INT2PROG.js (7.52 KB)

INT2PROG.css (1.36 KB)

Yannick_Duchene · February 9, 2015, 11:37am

I can’t make it work neither. Something changed since.

Also the CSS file which was in the same directory as HTML files is now in
an assets subdirectory.

Yannick_Duchene · February 9, 2015, 7:16pm

The tutorial book with TOC is now available here:

A Tutorial on Programming Features in ATS
http://www.google.com/url?q=http%3A%2F%2Fats-lang.sourceforge.net%2FDOCUMENT%2FATS2TUTORIAL%2FHTML%2FHTMLTOC%2F&sa=D&sntz=1&usg=AFQjCNH-9Z0Sdh5erRKyk3FuAXhWsd6OJA

I don’t know if it’s temporary, but I noticed the previous
Introduction to Programming in ATS with some
broken links, still have broken links. Ex: “Elements of Programming” ends
into a 404 error.

Also, as I noticed you seem to have opted for invocation from the end of
BODY, I changed the JS as attached. That’s about flicker with Firefox (and
also fixed some minor stuffs). There is a comment at the end saying what to
do if ever the invocation is moved to the HEAD (but better to leave it in
the BODY).

With my apologizes for these successive updates.

INT2PROGINATS-BOOK.js (12.4 KB)

Yannick_Duchene · February 9, 2015, 5:23pm

Yes, the dotted vertical line.

This line shifted when content changed. I now set width of TOC to be
25% to stop shifting.

That’s because I used display: table-cell. It’s not the same now.

As two attached files, the next version of CSS of JS.

Changes:

Added a tiny margin at the right of the content (for when the window
size is narrow).
The ToC side bar is now of a fixed size, and disappears if the window
width is less than 800 pixels.
The ToC remains fixed (does not scroll with the document) if its height
is less than the window height.
The selected entries markes as such in the ToC, are now aware of
possibly multiple entries matching the current document (ex. with “Elements
of Programming”).
The BODY is temporarily hidden until JS has done its job, so as to make
flickering less ugly on page load (witnessed on Firefox).
The main page (book1.html) is displayed the same as other pages, except
the ToC area is blank (less ugly and more constant).

If people have any comments, please, just tell.

INT2PROGINATS-BOOK.css (1.97 KB)

INT2PROGINATS-BOOK.js (12.1 KB)

gmhwxi · February 9, 2015, 6:26pm

The tutorial book with TOC is now available here:

http://ats-lang.sourceforge.net/DOCUMENT/ATS2TUTORIAL/HTML/HTMLTOC/
http://www.google.com/url?q=http%3A%2F%2Fats-lang.sourceforge.net%2FDOCUMENT%2FATS2TUTORIAL%2FHTML%2FHTMLTOC%2F&sa=D&sntz=1&usg=AFQjCNH-9Z0Sdh5erRKyk3FuAXhWsd6OJA

Of course, links are available on the Documents page as well:

http://www.ats-lang.org/Documents.html
http://www.google.com/url?q=http%3A%2F%2Fwww.ats-lang.org%2FDocuments.html&sa=D&sntz=1&usg=AFQjCNE8Ocy6asnLdiiOhWm-H7aODRPiMQ

Thanks to everyone who contributed!On Monday, February 9, 2015 at 12:31:21 PM UTC-5, gmhwxi wrote:

I moved the book here:

Introduction to Programming in ATS

Enjoy

On Monday, February 9, 2015 at 12:23:40 PM UTC-5, Yannick Duchêne wrote:

Le lundi 9 février 2015 17:03:48 UTC+1, gmhwxi a écrit :

Yes, the dotted vertical line.

This line shifted when content changed. I now set width of TOC to be
25% to stop shifting.

That’s because I used display: table-cell. It’s not the same now.

As two attached files, the next version of CSS of JS.

Changes:

Added a tiny margin at the right of the content (for when the window
size is narrow).

The ToC side bar is now of a fixed size, and disappears if the window
width is less than 800 pixels.

The ToC remains fixed (does not scroll with the document) if its
height is less than the window height.

The selected entries markes as such in the ToC, are now aware of
possibly multiple entries matching the current document (ex. with “Elements
of Programming”).

The BODY is temporarily hidden until JS has done its job, so as to
make flickering less ugly on page load (witnessed on Firefox).

The main page (book1.html) is displayed the same as other pages,
except the ToC area is blank (less ugly and more constant).

If people have any comments, please, just tell.

Yannick_Duchene · February 9, 2015, 1:38pm

I could not make it work.

Could you manually handle one file and then put it on-line?

For instance, how about this one:

http://ats-lang.sourceforge.net/DOCUMENT/INT2PROGINATS/HTML/x514.html

As attached files, two archive:

HTML-old.tar.gz is not so old backup I fetched with wget. I’m posting
it in case of, as there seems to be an issue with the actual online
version. Note as this was fetched with wget, some URLs was made local.

HTML-new.tar.gz is the book with the JavaScript and CSS variant applied.
Please, don’t care about the home page book1.html, and sometime you may
have to scroll up to see the navigation panel (there are some things still
to be tweak to make both nicer). To test it, just unpack into a folder and
open any page with a web‑browser (no need to put it online).

HTML-old.tar.gz (163 KB)

HTML-new.tar.gz (162 KB)

Yannick_Duchene · February 3, 2015, 9:12pm

I finally learned a bit on customizing dsssl files. Take a look:

Introduction to Programming in ATS

I have not yet figured out how to move links around yet. Hope that
someone familiar with CSS can give it a try.

Where would you like to move links? I may have a look.

Congratulation for this new style, … it’s a lot more beautiful than the
previous one, and I bet it will be an invitation to read the doc’ even more
than before.

By the way, I did not suspected DSSSL was still in use today.

gmhwxi · February 3, 2015, 9:36pm

It would be nice to have a navigation menu on the left-hand side of each
page. Not sure if this is easy to not.On Tuesday, February 3, 2015 at 4:12:57 PM UTC-5, Yannick Duchêne wrote:

Le mardi 3 février 2015 21:06:02 UTC+1, gmhwxi a écrit :

I finally learned a bit on customizing dsssl files. Take a look:

Introduction to Programming in ATS

I have not yet figured out how to move links around yet. Hope that
someone familiar with CSS can give it a try.

Where would you like to move links? I may have a look.

Congratulation for this new style, … it’s a lot more beautiful than the
previous one, and I bet it will be an invitation to read the doc’ even more
than before.

By the way, I did not suspected DSSSL was still in use today.

Yannick_Duchene · February 3, 2015, 9:40pm

It would be nice to have a navigation menu on the left-hand side of each
page. Not sure if this is easy to not.

That must be feasible, at least something is possible even without changing
the HTML flow. I will have a look at it tomorrow.

Yannick_Duchene · February 4, 2015, 10:47pm

It would be nice to have a navigation menu on the left-hand side of each
page. Not sure if this is easy to not.

Not that’s what is expected, but here is a CSS variant as attachment. I
tested it using
http://ats-lang.sourceforge.net/DOCUMENT/INT2PROGINATS/HTML/c43.html . The
“Table of Contents” displays on the left.

Limitation (at least for now): the whole is not centred any‑more and “Table
of Contents” does not show when the windows is shrink too much.

Please, tell me if it’s close to or far from what you expected.

INT2PROG.css (1.32 KB)

gmhwxi · February 9, 2015, 2:59pm

Also, could you let me know how you added the link to INT2PROGINATS-BOOK.js
at the bottom of each page? I could not figure out how to do this using the
docbook
toolchain.On Mon, Feb 9, 2015 at 9:56 AM, Hongwei Xi gmh...@gmail.com wrote:

I experimented with the following issues:

Fixing the position of the vertical bar that separates TOC from the
book content

Shrinking the right margin of the book content

On Mon, Feb 9, 2015 at 9:38 AM, Hongwei Xi gmh...@gmail.com wrote:

Thanks!

I can now see the changes. I put a temporary link here
so that other people can see it:

http://www.cs.bu.edu/~hwxi/.xshare/HTML-new/book1.html

On Mon, Feb 9, 2015 at 8:38 AM, ‘Yannick Duchêne’ via ats-lang-users < ats-lan...@googlegroups.com> wrote:

Le lundi 9 février 2015 07:21:06 UTC+1, gmhwxi a écrit :

I could not make it work.

Could you manually handle one file and then put it on-line?

For instance, how about this one:

http://ats-lang.sourceforge.net/DOCUMENT/INT2PROGINATS/HTML/x514.html

As attached files, two archive:

HTML-old.tar.gz is not so old backup I fetched with wget. I’m
posting it in case of, as there seems to be an issue with the actual online
version. Note as this was fetched with wget, some URLs was made local.

HTML-new.tar.gz is the book with the JavaScript and CSS variant
applied. Please, don’t care about the home page book1.html, and sometime
you may have to scroll up to see the navigation panel (there are some
things still to be tweak to make both nicer). To test it, just unpack into
a folder and open any page with a web‑browser (no need to put it online).

–
You received this message because you are subscribed to the Google
Groups “ats-lang-users” group.
To unsubscribe from this group and stop receiving emails from it, send
an email to ats-lang-user...@googlegroups.com.
To post to this group, send email to ats-lan...@googlegroups.com.
Visit this group at http://groups.google.com/group/ats-lang-users.
To view this discussion on the web visit
https://groups.google.com/d/msgid/ats-lang-users/ca791ce3-0185-4368-bf4b-89bc444cb7e4%40googlegroups.com
https://groups.google.com/d/msgid/ats-lang-users/ca791ce3-0185-4368-bf4b-89bc444cb7e4%40googlegroups.com?utm_medium=email&utm_source=footer
.

gmhwxi · February 5, 2015, 2:27am

What I had in mind is something like this:

http://jats-ug.metasepi.org/doc/ATS2/ATS_Foundations/helloworld.html

To get this, we probably need some JS code to rearrange the layout of the
book.On Wed, Feb 4, 2015 at 5:47 PM, ‘Yannick Duchêne’ via ats-lang-users < ats-lan...@googlegroups.com> wrote:

Le mardi 3 février 2015 22:36:22 UTC+1, gmhwxi a écrit :

It would be nice to have a navigation menu on the left-hand side of each
page. Not sure if this is easy to not.

Not that’s what is expected, but here is a CSS variant as attachment. I
tested it using
http://ats-lang.sourceforge.net/DOCUMENT/INT2PROGINATS/HTML/c43.html .
The “Table of Contents” displays on the left.

Limitation (at least for now): the whole is not centred any‑more and
“Table of Contents” does not show when the windows is shrink too much.

Please, tell me if it’s close to or far from what you expected.

–
You received this message because you are subscribed to the Google Groups
“ats-lang-users” group.
To unsubscribe from this group and stop receiving emails from it, send an
email to ats-lang-user...@googlegroups.com.
To post to this group, send email to ats-lan...@googlegroups.com.
Visit this group at http://groups.google.com/group/ats-lang-users.
To view this discussion on the web visit
https://groups.google.com/d/msgid/ats-lang-users/ccaa7b39-8e7a-4de2-9a95-2d725f984aaa%40googlegroups.com
https://groups.google.com/d/msgid/ats-lang-users/ccaa7b39-8e7a-4de2-9a95-2d725f984aaa%40googlegroups.com?utm_medium=email&utm_source=footer
.

gmhwxi · February 9, 2015, 5:31pm

I moved the book here:

http://ats-lang.sourceforge.net/DOCUMENT/INT2PROGINATS/HTML/HTMLTOC/

Enjoy :)On Monday, February 9, 2015 at 12:23:40 PM UTC-5, Yannick Duchêne wrote:

Le lundi 9 février 2015 17:03:48 UTC+1, gmhwxi a écrit :

Yes, the dotted vertical line.

This line shifted when content changed. I now set width of TOC to be
25% to stop shifting.

That’s because I used display: table-cell. It’s not the same now.

As two attached files, the next version of CSS of JS.

Changes:

Added a tiny margin at the right of the content (for when the window
size is narrow).

The ToC side bar is now of a fixed size, and disappears if the window
width is less than 800 pixels.

The ToC remains fixed (does not scroll with the document) if its
height is less than the window height.

The selected entries markes as such in the ToC, are now aware of
possibly multiple entries matching the current document (ex. with “Elements
of Programming”).

The BODY is temporarily hidden until JS has done its job, so as to
make flickering less ugly on page load (witnessed on Firefox).

The main page (book1.html) is displayed the same as other pages,
except the ToC area is blank (less ugly and more constant).

If people have any comments, please, just tell.

gmhwxi · February 9, 2015, 6:21am

I could not make it work.

Could you manually handle one file and then put it on-line?

For instance, how about this one:

http://ats-lang.sourceforge.net/DOCUMENT/INT2PROGINATS/HTML/x514.htmlOn Sunday, February 8, 2015 at 6:34:11 PM UTC-5, Yannick Duchêne wrote:

Le jeudi 5 février 2015 03:27:37 UTC+1, gmhwxi a écrit :

What I had in mind is something like this:

3. “Hello, world!” on ATS — ATS Programming Foundations 0.2.0 documentation

To get this, we probably need some JS code to rearrange the layout of the
book.

Sorry for being late.

Here is: as attached files, INT2PROG.js and INT2PROG.css

INT2PROG.css is a modified version of the original. All changes are at
the end, and nothing else was changed.

INT2PROG.js is to be located in the same directory as INT2PROG.css and
additionally, this snippet must be added into each page, just before the
body closing tags (i.e. as the last element of the body) :
 <script src="INT2PROG.js"></script>
I could not fully test it. If there is an issue, please, send me an
archive of all the files whith the snippet added at the end, so that I can
better test it.

If it’s OK or as soon as it will be OK, I will tweak the style a bit.

gmhwxi · February 3, 2015, 8:06pm

I finally learned a bit on customizing dsssl files. Take a look:

http://ats-lang.sourceforge.net/DOCUMENT/INT2PROGINATS/HTML/

I have not yet figured out how to move links around yet. Hope that
someone familiar with CSS can give it a try.On Tuesday, February 3, 2015 at 4:52:40 AM UTC-5, Raoul Duke wrote:

e.g. if i am reading
http://ats-lang.sourceforge.net/DOCUMENT/INT2PROGINATS/HTML/c95.html

and want to get to the TOC… I think the “up” link should appear at
the top of the page. As in, if it is going to be anywhere, it should
be at the top. Ok to have it on the bottom as well. Not so usable to
have it only at the bottom.

and it would be great if
Introduction to Programming in ATS

had an index.html file.

Yannick_Duchene · February 9, 2015, 3:26pm

Also, could you let me know how you added the link to INT2PROGINATS-BOOK.js
at the bottom of each page? I could not figure out how to do this using
the docbook
toolchain.

I did a sed -i … on all HTML files (ref face).

If you have issue adding it in the BODY but can add it in the HEAD, that’s
fine too, I would just add to change a tiny thing.

I will look at your changes in the CSS and merged it with other change I
done, then will send you another slight variantion of the JS and the CSS.

gmhwxi · February 9, 2015, 7:37pm

Thank you so much for all the work!

I think the problem you saw was due to caching. If you refresh,
the problem should be gone.

I have put your JS code on-line:

github.com

githwxi/ATS-Postiats/blob/master/doc/BOOK/INT2PROGINATS/HTML/HTMLTOC/assets/INT2PROGINATS-BOOK.js

//-*- coding:utf-8; mode:js; indent-tabs-mode:nil; c-basic-offset:3; -*-

// Author: Yannick Duchêne <yannick_duchene@yahoo.fr>
// Date: 2015-02-09
// License: MIT

// To be used with INTPROGINATS, the ATS2 language introduction book, authored
// by Hongwei Xi.

// ###########################################################################
// JSLint configuration: do not remove.

/*jslint adsafe:false */
/*jslint bitwise:true */
/*jslint browser:false */
/*jslint continue:true */
/*jslint debug:false */
/*jslint eqeqeq:true */
/*jslint evil:false */
/*jslint forin:true */

This file has been truncated. show original

You could edit it on Github if you like.

Cheers!On Monday, February 9, 2015 at 2:16:03 PM UTC-5, Yannick Duchêne wrote:

Le lundi 9 février 2015 19:26:36 UTC+1, gmhwxi a écrit :

The tutorial book with TOC is now available here:

A Tutorial on Programming Features in ATS
http://www.google.com/url?q=http%3A%2F%2Fats-lang.sourceforge.net%2FDOCUMENT%2FATS2TUTORIAL%2FHTML%2FHTMLTOC%2F&sa=D&sntz=1&usg=AFQjCNH-9Z0Sdh5erRKyk3FuAXhWsd6OJA

I don’t know if it’s temporary, but I noticed the previous
Introduction to Programming in ATS with some
broken links, still have broken links. Ex: “Elements of Programming” ends
into a 404 error.

Also, as I noticed you seem to have opted for invocation from the end of
BODY, I changed the JS as attached. That’s about flicker with Firefox (and
also fixed some minor stuffs). There is a comment at the end saying what to
do if ever the invocation is moved to the HEAD (but better to leave it in
the BODY).

With my apologizes for these successive updates.

Topic		Replies	Views
Book CSS Google Group	9	517	January 29, 2015
A section on linear strings Google Group	1	424	January 4, 2016
Chapter on Linearly Typed Lists in ATS2TUTORIAL Google Group	2	348	April 9, 2015
Those of you with ats blogs Google Group	1	316	August 16, 2014
ATS books in pdf format Google Group	7	538	December 10, 2015

Random suggestions re: online html documentation navigation

Related topics