• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

DW 2019: Automatical Table of Content for a Document

Contributor ,
Dec 19, 2018 Dec 19, 2018

Copy link to clipboard

Copied

Since 2004, where I started to use DW I miss a feature, which I consider is important for documents with extensive content.

Every text processor software has that feature.

I talk about a table of content.

The function should create the TOC based on the headings of the document.

The id attributes should be created based on the content of the specific heading.

The TOC is useful for the user of the webpage and of course for the editor while he works at the document in the design view. It allows the editor to navigate easily in the content.

What do you think about that idea for a future version of DW?

And, independent of that:
Do you know of any extension, which can add that TOC?

Thanks.

Views

1.9K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Dec 19, 2018 Dec 19, 2018

Copy link to clipboard

Copied

I understand where you are coming from, but I am not sure that a feature available in text editors would make sense for an HTML editor. However, I defer to the other experts on the forum for their opinion. I haven't seen a similar request on this forum in a really long time.

Thanks,

Preran

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 19, 2018 Dec 19, 2018

Copy link to clipboard

Copied

As you say Preran, it has been a while since this request was last seen, (about 5 years) but it does surface every now and again.

The problem with generating a table of contents for a site, is that each entry would have to be linked to the corresponding position, ( page) in the site, otherwise it would be useless. Previously the best solution was to offer the site visitor a pdf, word, epub, file that included a table of content, and an index.

Having The feature in Dw would be beyond what a code editor is for, (writing code) and would require the editor to have word processor features, which is way beyond the requirerments of any code editor. The argument against that was that Dw has a design and editable live view, but as those features are doing nothing more than adding/displaying code that is placed in a code document, it was thought that such a feature as generating a toc, would make the code editor into a cut down version of a word processor.

There used to be apps that could generate toc's from html documents, but as there was really no market for them once epub became an accepted alternative, they hav quietly disapeared.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Dec 19, 2018 Dec 19, 2018

Copy link to clipboard

Copied

Thanks for your honest feedback,

But you missunderstood my issue.

I did not talk about a table of content of the site but of a single page.

For a table of content for site I agree with you. Such task is one for content management system.

No, I'm talking about a page, a document.

A good editor should provide methods to move throught the document efficiently. A standard structure is given by the headings. Perfect for jumps.

And when we talk about differences between a "pure" editor and a "rich" one, we found many many existing features that makes me believe that DW is one of the second category.

But my main interest is to know, if you like the idea of having that feature in your editor - independent of what Adobe decides.

An easy navigation is, in my humble opinion, in a big document a must have.

PDF, Nancy, is not comparable at all to HTML. We are talking about highly responsive Webpages.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 19, 2018 Dec 19, 2018

Copy link to clipboard

Copied

You have heard of mobile friendly PDFs / eBooks,  I'm sure. 

I deal with lots of technical product manuals in PDF which contain search, bookmarks and table of contents.   I'm using one right now that contains well over 100 pages. 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Dec 19, 2018 Dec 19, 2018

Copy link to clipboard

Copied

@Nancy

I don't know any content, which can be used on screens better with a (mobile friendly) pdf than with a wellmade html.

Do you like to give us an example?

Please keep accessibility in mind.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 19, 2018 Dec 19, 2018

Copy link to clipboard

Copied

Use Adobe Acrobat DC to create digital  documents containing page thumbnails, bookmarks  (aka TOC links).

Page thumbnails and bookmarks in PDFs, Adobe Acrobat

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Dec 19, 2018 Dec 19, 2018

Copy link to clipboard

Copied

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Dec 19, 2018 Dec 19, 2018

Copy link to clipboard

Copied

@Rag and Bone

Thanks for your first link.

But you missunderstood my issue.

An experienced web author knows which HTML and CSS is appropriate to provide a TOC.

My point is:
The HTML should be created automatically.

And of course it should be changed automatically when there's any change in the content of a heading or in the structure of the headings.

And, last but not least: when the value of the id attribute is automatically change, than the corresponding fragment identifiers should be changed automatically whereever on the site they are used.

Example without TOC:

<h1>...</h1>

<h2>Lorem</h2>

<h2>Ipsum</h2>

<h3>Dölor & adipisit!</h3>

Example with the fictitious function TOC enabled:

<nav aria-label="Table of Content of this Page">

  <ol>

    <li><a href="#toc-1-lorem">Lorem</a></li>

    <li><a href="#toc-2-ipsum">Ipsum</a>

      <ol>

        <li><a href="#toc-2-1-doelor-and-adipisit">Dölor & adipisit!</a></li>

      </ol>

    </li>

  </ol>

</nav>

...

<h1>...</h1>

<h2 id="toc-1-lorem">Lorem</h2>

<h2 id="toc-2-ipsum">Ipsum</h2>

<h3 id="toc-2-1-doelor-and-adipisit">Dölor & adipisit!</h3>

About your second link:

Thanks for the interesting hint. I haven't heard of that method with the element slot.

At the moment I did not understood the details and if they could fulfill, what I suggested.

I suppose they cannot fulfull the task of providing the TOC for the editor in the design view. But I'm not sure.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 19, 2018 Dec 19, 2018

Copy link to clipboard

Copied

I understand your problem, but I must admit that since I've been doing the web, I've never asked myself the question in this sense.

I don't think the web as I would think a printed document

by saying that, I'm not saying I'm right

the fact is that if a TOC is present on a single page, it is equivalent to saying that the page is large enough to require, and especially justify, the presence of such a navigation tool...

so generally I avoid filling in the HTML content manually. I rely heavily on a database... and from there on a third party script (PHP or JS) to fill the various tags... and whether this operation is delivered when loading the entire page, or by successive loading (AJAX) it is then easy to tag anchors on the fly to simplify their location (using different compoent tool (depending on the needs and/or the device)... accordion, tabs, TOC, dropdown menus, and so on.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Dec 19, 2018 Dec 19, 2018

Copy link to clipboard

Copied

@Birnou

Of course I know, that many websites are filled via a database/ content management system.

But there are usecases, where a publisher don't need or don't want to use such tools.

And may be the content is semantically complex and needs rich markup, which only a real powerful editor (like DW) is a real help to do that work.

To justify a TOC:
It is always helpful for both, the reader and the editor, when you have more than - let's say 6-8 headings.

Please look at longer wikipedia articles for example.

It is so helpful to have a TOC there.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 19, 2018 Dec 19, 2018

Copy link to clipboard

Copied

in this case, then use a JS that will retrieve each targeted TAGs, for example all H2

then create a node containing a list of each of these titles, taking care to tag them with an adhoc ID attribute and linked to the previous list

once finished, place this node at the top of the page and that's it...

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Dec 20, 2018 Dec 20, 2018

Copy link to clipboard

Copied

@Birnou

Thanks for your suggestion to use a JS.

But on there are reasons, why I suggested an integration of a function into DW:

1 Not every editor is a programmer and could provide all scripts he needs. And extracting an appropriate value of the content of a heading is not a trivial task.

2 Many authors prefer it to provide important parts of the page (and a TOC is such a part) independent of the fact, if the user has ativated JS in his browser.

3 The automatic function should help the editor in the design view, too. He needs efficient methods to navigate.

4 When the author refers on page 2 to a fragment of a page 1 (a heading in the discussed example) and the value of changes, than the link on page 2 should be suggested for a change by DW (exactly like it is done with links without fragment identifier like href="/lorem/ipsum")

Independent of these aspects:
If you know of a nice JS for that task, I would love to use it as a workaround.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 20, 2018 Dec 20, 2018

Copy link to clipboard

Copied

mistershortcut  a écrit

1 Not every editor is a programmer and could provide all scripts he needs. And extracting an appropriate value of the content of a heading is not a trivial task.

well I agree, but that is an other subject... a lot of user whose use DW doesn't know how code HTML, CSS and JS... but DW can't be a tool that fits in a WYSIWYG scenarri.... how many users do you think will need a TOC for the only page full content ? And how this TOC will be set ... child, nested child, then how will be nested the content ????

I think it will be more appropriate to ask Bootstrap to integrate such a feature in the next libs... or Al to vreate a dedicate plugin... after all it is christmas time...

mistershortcut  a écrit

2 Many authors prefer it to provide important parts of the page (and a TOC is such a part) independent of the fact, if the user has ativated JS in his browser.

in that case, using a server side script to generate it should be called... sure it will implicitly link it to a database which is not your requirement... but how many users today will fill page with large content and manually done ??? I have no idea... and in an other hand too, how many users are turning JS off (from this days...) I don't think not too much...

mistershortcut  a écrit

3 The automatic function should help the editor in the design view, too. He needs efficient methods to navigate.

you have a plug in for that.. in browser... for exemple ... HeadingsMap – Get this Extension for    Firefox (en-US)  so here again see point 1

mistershortcut  a écrit

4 When the author refers on page 2 to a fragment of a page 1 (a heading in the discussed example) and the value of changes, than the link on page 2 should be suggested for a change by DW (exactly like it is done with links without fragment identifier like href="/lorem/ipsum")

if you use Anchor is currently working that way in DW

mistershortcut  a écrit


If you know of a nice JS for that task, I would love to use it as a workaround.

I don't know if that will fits your needs, but here is a small piece of code, that handle that purpose... I used a basic algoryhtm to make it as open as possible to adapt it to your real needs...

http://www.birnou.net/mistershortcut

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Dec 20, 2018 Dec 20, 2018

Copy link to clipboard

Copied

@Birnou

Thanks for your detailled answer and the arguments. I appreciate that a lot!

1

Well, of course I cannot prove how many users of DW will benefit from the suggested feature.

But I believe, that when it exists, we would have some more websites with that very helpful TOC. I thing many users of DW will not provide such a TOC because they do not know an easy way to do that.

2

I just think it is a better practice to provide a TOC not via JS. And secondly I thought of the usage of the TOC by the editor too - in the design view. That should be easier to realize with generated html instead of a JS. But I don't know, if you can display HTML in the design view which is generated by a JS.

3

I do not talk about the browser. I talk about editing in the design view.

But I liked, that you mentioned it. In a better web world, every nav, the one for the site and the one for the page, should be created by the client and not by the web author. That would be a huge improvement in the usability of websites. But it will never happen.

4

Yes, it is a very old bug in DW, that he cannot deal with changed fragment identifiers. I filed that bug in the year 2004. Without success.

5

Thanks for that script 🙂 It is a step in the direction I think of.
Please, can you give me a hint how to use a JS in DW to get the output in the design view?

But as you can see in my code example above a script which provides the function of TOC is not a trivial task.
* It must be able to extract a human readable value for the id attribute by "normalizing" the content of the heading

* It must provide a way to define the level of heading where the toc should start. Typical it will be h2.

* I must provide a way to define if all levels of headings should be mentioned in the (nested) TOC

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 20, 2018 Dec 20, 2018

Copy link to clipboard

Copied

well I read all your answer with attention, and I think that if we need (want) to continue this talk and as it has already different fork, it can become quickly complex to manage (use or not JS, native part of DW or not, being settable from the auth but generate by the client, and so on...)

anyway, for my unique and subjective point of view (so I'm just a simple web app designer, I don't speak for any general and large use and objective use...)...

I will say that I will create a specific JS lib that will handle all setting using data-* attributes and perhaps a external JSON file settings... but again I just speak for my own business...

first of all I will dig github and npm to see if such a libs doesn't already exist... instead of reibventing hot water...

so do you want to continue such a thread, and if so... please,  set and define the rules as you like...

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Dec 20, 2018 Dec 20, 2018

Copy link to clipboard

Copied

I appreciate your attention and your friendlyness, that you are open for the idea in general.

Thanks for that 🙂

I agree that we have to narrow the discussion.

If there is a method to use a JS in the design view to provide  a clickable TOC for the editor, than we can focus on that method. I'm fine with such a solution.

Which must haves I see?

1 Code example can be seen in the posting https://forums.adobe.com/message/10825644#10825489

2 It must be able to extract a human readable value for the id attribute by "normalizing" the content of the heading
Example: Umlauts  (ä->ae) or other special characters must be normalized, lower cases.
A nice to have would be an additional part of the value which reflects the level.
Example: <h3>Dölor & adipisit!</h3>
A nice result: id="toc-2-1-doelor-and-adipisit"

3 It must provide a way to define the level of heading where the toc should start. Typical it will be h2.

4 I must provide a way to define if all levels of headings should be mentioned in the (nested) TOC

Do you need more frame conditions? Please let me know.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 20, 2018 Dec 20, 2018

Copy link to clipboard

Copied

just to be clear... do you want the TOC working in within the production file (usable by the surfer) or to be present in the DW IDE to be used by the web designer ... in other word a DW extension ?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Dec 20, 2018 Dec 20, 2018

Copy link to clipboard

Copied

https://forums.adobe.com/people/B+i+r+n+o+u  schrieb

just to be clear... do you want the TOC working in within the production file (usable by the surfer) or to be present in the DW IDE to be used by the web designer ... in other word a DW extension ?

Both! That is very important.
The TOC should be usable for the surfer and the web designer (when he edits in the design view).

I found an answer from Nancy about my question "Can you use JS in the design view?"
Enable Javascript in Dreamweaver CC design view

It is impossible, like I supposed.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 20, 2018 Dec 20, 2018

Copy link to clipboard

Copied

mistershortcut  a écrit

1 Code example can be seen in the posting Re: DW 2019: Automatical Table of Content for a Document

when I click on this link I don't get any code snippet... just reload the page in the same place ?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Dec 20, 2018 Dec 20, 2018

Copy link to clipboard

Copied

https://forums.adobe.com/people/B+i+r+n+o+u  schrieb

mistershortcut   a écrit

1 Code example can be seen in the posting Re: DW 2019: Automatical Table of Content for a Document 

when I click on this link I don't get any code snippet... just reload the page in the same place ?

I inserted a link with a fragment identifier to the specific posting with the code example. It seems the forum software changed it.
Sorry.
Please just scroll some posting up, than you see the code example.

If you know how to insert a link to a specific posting,  please let me know.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 20, 2018 Dec 20, 2018

Copy link to clipboard

Copied

ok...

I realize that I asked my question not precisely enough... so when I talk about usable from DW, I'm not talking about a link or a JS code that can be executed from the live view, as it would be from a classic browser (except CFE)... but I'm talking about a palette of tools present from the DW IDE interface

by reading you I understand that it is indeed a link and a JS present in the page and readable (and usable) from live view directly... insn't it?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Dec 20, 2018 Dec 20, 2018

Copy link to clipboard

Copied

@Birnou

It is me to have to be more precise.

My English is quite poor, sorry for that.

My intention is, that a web author who uses the design view (not the

live view) should have any clickable TOC.

It is not important, if that TOC is inside the design view window or if

it is provided in a sidebar (which I even prefer).

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 20, 2018 Dec 20, 2018

Copy link to clipboard

Copied

Ok I finnaly got what you want...

what you're looking for is a Navigation Panel the same than Word propose... ?

(by the way if you want to edit your post... you can simply handle it using the Actions > Modify menu present on the bottom left of your message... (this link is valid during an hour after you post the message) so you can still remove the first shot

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 20, 2018 Dec 20, 2018

Copy link to clipboard

Copied

I can remember back in the days of dhtml, menus being generated from the page title, so if you only want a toc from one page it should be possible. I still think that if a page is long enough to require a toc, then the page is possibly to long for users to read comfortably.

It is probably best if you are going to file a feature request, to include a brief idea of how it would work. Otherwise like me others will think of applying it to the entire site.

With html5 you can use multiple h1, h2....etc tags in the same document, so it is possible to have it apply to say every 'h2' element on a document, (I would suggest limiting it to h2 elements). That would leave the h1 for the document 'title' in the html itself.

It would be reasonably simple to have a feature that found every h2 element, (with a unique id) in the document, and generate a toc of h2 elements, (with the text of the h2) and use that as a toc as a jump menu in the document.

I can remember when MS Word had such a feature for the html code it generated, (though the code was so bad, I don't think it should be used). Plus it may have been removed by now, as MS has also tried to remove features from its apps that generated invalid code.

Work on the theory that if 1 person is asking for this, (yourself) then there are probably many others who would like such a feature. So spend a little time working out how you want it to work.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines