bug-texinfo
[Top][All Lists]
Advanced
[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

html structure revisited

From: Per Bothner
Subject: html structure revisited
Date: Sat, 8 Aug 2020 08:55:57 -0700
User-agent: Mozilla/5.0 (X11; Linux x86_64; rv:68.0) Gecko/20100101 Thunderbird/68.10.0 
The DomTerm manual with --html and info.js is looking better and better:
http://per.bothner.com/tmp/DomTerm-txjs/
One glich is the inconsistent padding between the home page and the other pages,
which you easily see by clicking between them.

This is relating to the CSS 'margin' property, but setting it consistently
is complicated by the lack of structure in the HTML. So I'd like to revisit
"modernizing html output" thread from 2018/12-2019/1, which in turn was
re-visiting the "use id="xx" instead of <a name="xx"> in html output" thread 
from 2016/2.

I tried an exploratory patch (attachment), which adds the node structure.
This would make fixing the "margin" problem easier, but I'm not happy with it:
Some of the extra <div>s aren't useful; id nodes go in awkward places.
Also, I haven't figured out how to add <section> elements
that also wrap subsections, as suggested by the HTML5 and EPUB specifications.

I think the following would be a good structure (notes below),
assuming --split=chapter:

<body>
  <section class="chapter" id="chapter4">
    <div class="header">Next/Previous etc links </div>
    <div class="node" id="character4-1">
      <h2 class="chapter">This is chapter 4</h2>
      <p>preamble text</p>
      <ul class="menu">...</ul>
    </div>

    <section class="section" id="section-41">
      <div class="header">Next/Previous etc links </div>
      <div class="node" id="character41-1">
        <h3 class="section">This is section 4.1</h3>
        <p>text for 4.1</p>
      </div>
    </section>

    <section class="section" id="section-42">
      <div class="header">Next/Previous etc links </div>
      <div class="node">
        <h3 class="section" id="character42-1">This is section 4.2</h3>
        <p>text for 4.2</p>
        </div>
    </section>

  </section>
</body>

* The <section> elements are properly nested.

* We also have <div class="node"> elements that wrap node-contents without 
children.

* The navigation headers are inside their respective <section> (so they will be 
at the
top of the page when navigating using the 'id' as a #hash), but outside the node
(which makes logical sense).  I think that is a reasonably elegant layout.

* Anchors ('id' attributes) are in reasonable places both logically and in terms
of where navigation ends up (consistent with current behavior).

* Fewer <span> elements added just for anchors: The 'id' refers to a 
corresponding
element, not just a point at the start of the element.

* Having both <section> and <div class="node"> elements is somewhat redundant.
I think I can solve the "margin" styling problem reasonably cleanly with either.
We can implement one first and the other later. My intuition is the <section> 
elements
are more important and useful than the <div class="node"> elements.  One reason 
is
that <section> is desirable for EPUB.  However, <div class="node"> seems easier 
to
implement, and I think it would be helpful to have both.

* HTML5 specifies a <header> element which we could use, but I don't think it 
buys
you anything, and it makes the structure a little more awkward.
It should probably wrap both the h1/h2/... title and the navigation links.

So, is this a good layout?

If so, I will probably need some help with implementation.  It would probably
be easy for some who understands the logic to implement <section>
and it would be really helpful.
--
        --Per Bothner
per@bothner.com   http://per.bothner.com/

Attachment: structuring.patch
Description: Text Data

reply via email to
[Prev in Thread] Current Thread [Next in Thread]