[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
Re: html structure revisited
|
From: |
Gavin Smith |
|
Subject: |
Re: html structure revisited |
|
Date: |
Sat, 8 Aug 2020 21:16:09 +0100 |
|
User-agent: |
Mutt/1.9.4 (2018-02-28) |
On Sat, Aug 08, 2020 at 08:55:57AM -0700, Per Bothner wrote:
> 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 don't know exactly what you mean by inconsistent padding but noticed
two issues.
One is the large space above the chapter headings, which is due to
the h2 { margin-top: 3em } style on line 53 of kawa.css.
The other issue is that there is a slight margin around all of the pages
apart from the top one. This appears to be because the pages are
wrapped in a <body> tag. Using the element inspector in Chromium, I have
"body { margin: 8px }" due to the "user-agent stylesheet".
I couldn't find an easy way to copy the value of the margin property
from the <body> element in CSS. It would be possible to specify both in
info.css:
--- a/info.css 2020-08-06 19:07:03.249204424 +0100
+++ b/info.css 2020-08-08 20:47:14.572921994 +0100
@@ -18,7 +18,12 @@
/* Non-iframed main page */
div[node]#index {
- overflow: auto
+ overflow: auto;
+ margin: 8px;
+}
+
+body {
+ margin: 8px;
}
/* Iframed sub pages */
but it would be better to use the browser defaults for this. The
following appears to do this:
--- a/info.css 2020-08-06 19:07:03.249204424 +0100
+++ b/info.css 2020-08-08 21:03:04.809936389 +0100
@@ -18,9 +18,12 @@
/* Non-iframed main page */
div[node]#index {
- overflow: auto
+ overflow: auto;
+ margin: inherit;
}
+#sub-pages { margin: inherit }
+
/* Iframed sub pages */
iframe.node {
width: 100%;
I think this is as much an issue with the way that info.js works as it
is an issue with the structure of the HTML.
> 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'll try to have a look at this but it would be better to avoid using
HTML5 tags without a good reason, or to have the complication of trying
to support different versions of HTML.
> * Fewer <span> elements added just for anchors: The 'id' refers to a
> corresponding
> element, not just a point at the start of the element.
That sounds good assuming there is an appropriate element for it. If I
understand right you are adding <div>'s where there weren't any before.
> So, is this a good layout?
It seems logical but I'd like to understand the practical benefits of
it.
Regarding this part of your patch:
> - $result .= "<span id=\"$element_id\"></span>"
> - if (defined($element_id) and $element_id ne '');
> + $result .= '<div class="convert-heading-' . $cmdname . '"';
> + $result .= " id=\"$element_id\""
> + if (defined($element_id) and $element_id ne '');
> + $result .= ">\n";
I don't follow as the text "convert-heading-" doesn't appear in your
sample structure.