Help needed for WebHelp Responsive Output

Are you missing a feature? Request its implementation here.
felixliu
Posts: 4
Joined: Thu Jun 09, 2022 11:04 am

Help needed for WebHelp Responsive Output

Post by felixliu »

Hi, I am new to DITA and oXygen, and have encountered a few puzzles. Wondering anyone know the answer to the following:

1. How to achieve the same output as on this web page where multiple levels of headings exist in a single topic, and those headings are shown in the right-side TOC?

2. Is there any way to put the title of a table into the right-side TOC of a single topic web page?

3. Is there any way to set tables to be collapsed as default on the web page?

Thanks.
Last edited by felixliu on Wed Jun 15, 2022 12:26 pm, edited 1 time in total.
cosmin_andrei
Posts: 88
Joined: Mon Jun 12, 2017 10:50 am

Re: Help needed for WebHelp Responsive Output

Post by cosmin_andrei »

Hi felixliu,

You can find my answers below:
1. How to achieve the same output as in this web page where multiple levels of headings exist in a single topic, and those headings are shown in the right-side TOC?
For sections with ids the component is called topic Table of contents - A table of contents for the topic displayed on the right side with a heading named On this page and it contains links to each section within the current topic and the section corresponding to the current scroll position is highlighted. This component is generated for any topic that contains at least two <section> elements and each <section> must have an @id attribute. You can use the button to collapse the table of contents ( or the < button to expand it).
2. Is there any way to put the title of a table into the right-side TOC of a single topic web page?
Unfortunately this could not be achieved in the current implementation.
3. Is there any way to set tables to be collapsed as default on the web page?
There is the "webhelp.topic.collapsible.elements.initial.state" parameter, that you could use and set it's value to "collapsed". By default, the sections are expanded. This support is only available for some elements. More specific, only tables with a caption, sections that have a title and subtopics (nested topics) can be collapsible.
Regards,
Cosmin
--
Cosmin Andrei
oXygen XML Editor and Author Support
felixliu
Posts: 4
Joined: Thu Jun 09, 2022 11:04 am

Re: Help needed for WebHelp Responsive Output

Post by felixliu »

Hi Cosmin,
Thanks for your help.

Regards.
Felix
Last edited by felixliu on Fri Jun 10, 2022 12:47 pm, edited 1 time in total.
felixliu
Posts: 4
Joined: Thu Jun 09, 2022 11:04 am

Re: Help needed for WebHelp Responsive Output

Post by felixliu »

cosmin_andrei wrote: Fri Jun 10, 2022 12:36 pm Hi felixliu,

You can find my answers below:
1. How to achieve the same output as in this web page where multiple levels of headings exist in a single topic, and those headings are shown in the right-side TOC?
For sections with ids the component is called topic Table of contents - A table of contents for the topic displayed on the right side with a heading named On this page and it contains links to each section within the current topic and the section corresponding to the current scroll position is highlighted. This component is generated for any topic that contains at least two <section> elements and each <section> must have an @id attribute. You can use the button to collapse the table of contents ( or the < button to expand it).
2. Is there any way to put the title of a table into the right-side TOC of a single topic web page?
Unfortunately this could not be achieved in the current implementation.
3. Is there any way to set tables to be collapsed as default on the web page?
There is the "webhelp.topic.collapsible.elements.initial.state" parameter, that you could use and set it's value to "collapsed". By default, the sections are expanded. This support is only available for some elements. More specific, only tables with a caption, sections that have a title and subtopics (nested topics) can be collapsible.
Hi Cosmin, I have one more puzzle to add on top of my first question: how to achieve H2 and H3 title on a single topic web page? When I use the <section> element in a topic, it seems that the <section> is transformed with no specific heading level. Is there any attribute that I can use?
Last edited by felixliu on Sat Jun 11, 2022 5:08 pm, edited 1 time in total.
felixliu
Posts: 4
Joined: Thu Jun 09, 2022 11:04 am

Re: Help needed for WebHelp Responsive Output

Post by felixliu »

Still wondering how to make H2, H3, even H4 titles on a single web page as on this web page. Help~
chrispitude
Posts: 455
Joined: Thu May 02, 2019 2:32 pm

Re: Help needed for WebHelp Responsive Output

Post by chrispitude »

Hi Felix,

DITA supports only a single level of <section>; nested sections are not allowed.

The page you referenced uses nested topics, then sections in those:

https://github.com/oxygenxml/userguide/ ... pages.dita
felixliu
Posts: 4
Joined: Thu Jun 09, 2022 11:04 am

Re: Help needed for WebHelp Responsive Output

Post by felixliu »

chrispitude wrote: Wed Jun 15, 2022 2:21 pm Hi Felix,

DITA supports only a single level of <section>; nested sections are not allowed.

The page you referenced uses nested topics, then sections in those:

https://github.com/oxygenxml/userguide/ ... pages.dita
Hi chrispitude,

Thanks for sharing the information, and it helps me a lot. I also see the page I referenced has different font size for different heading levels. How can I set those font sizes as on that page? I guess the font size and relevant formats are controlled by .css files, but not sure which file specifically.

Regards,
Felix
chrispitude
Posts: 455
Joined: Thu May 02, 2019 2:32 pm

Re: Help needed for WebHelp Responsive Output

Post by chrispitude »

Hi Felix,

There are several YouTube videos that cover WebHelp customization:

oxygenxml on YouTube - "customize webhelp"

I am currently partway through the most recent video posted two months ago. Basically, you use your browser's CSS inspector to find the class of the element you want to customize, then you add a CSS style for that to your custom CSS file. For something like nested headers, it can be useful to click on the CSS filename in the browser inspector to see the full CSS file applying the rules, so you can see the relationship of how different heading-level selectors are written.
Post Reply