]> git.cameronkatri.com Git - mandoc.git/commitdiff
git.ckatri.com / mandoc.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: ae49b31)
Finally get rid of the archaic <table> markup for header and footer lines
authorIngo Schwarze <schwarze@openbsd.org>
Tue, 5 Jul 2022 21:25:29 +0000 (21:25 +0000)
committerIngo Schwarze <schwarze@openbsd.org>
Tue, 5 Jul 2022 21:25:29 +0000 (21:25 +0000)
and use flexbox CSS instead.  Improve accessibility by adding role
and aria-label attributes to these header and footer lines.
Using ideas from both Anna Vyalkova <cyber at sysrq dot in> and myself.

As a welcome side effect, this also resolves the long-standing issue
that the rendering was always 65em wide, requiring horizontal scrolling
when the window was narrower.  Now, rendering nicely adapts to browser
windows of arbitrary narrowness.

TODO patch | blob | history
man_html.c patch | blob | history
mandoc.css patch | blob | history
mdoc_html.c patch | blob | history

diff --git a/TODO b/TODO
index f3bcd73f0d07a52bc2aefac5bc2a63d0bc51d7c3..40bea7973b203afe330709b9c04b4b70ad128124 100644 (file)
--- a/TODO
+++ b/TODO
@@ -1,6 +1,6 @@
 ************************************************************************
 * Official mandoc TODO.
-* $Id: TODO,v 1.325 2022/06/26 20:21:22 schwarze Exp $
+* $Id: TODO,v 1.326 2022/07/05 21:25:29 schwarze Exp $
 ************************************************************************
 
 Many issues are annotated for difficulty as follows:
@@ -538,13 +538,6 @@ are mere guesses, and some may be wrong.
   does this affect other characters, other source macros...?
   Jackson Pauls  29 Aug 2017 16:56:27 +0100
 
-- The tables used to render the three-part page headers actually force
-  the width of the <body> to the max-width given for <html>.
-  Not yet sure how to fix that...
-  Observed by an Anonymous Coward on undeadly.org:
-  http://undeadly.org/cgi?action=article&sid=20140925064244&pid=1
-  loc *  exist *  algo **  size *  imp ***
-
 - generate <img> tags in HTML
   idea from florian@  Tue, 7 Apr 2015 00:26:28 +0000
   may be possible to implement with .Lk img://something.png alt_text
diff --git a/man_html.c b/man_html.c
index 1eeaadf22aeb294a888be1188901a474ae34aff5..19337a10321cb2959ac91104eebc09760a049b46 100644 (file)
--- a/man_html.c
+++ b/man_html.c
@@ -1,6 +1,6 @@
-/* $Id: man_html.c,v 1.181 2022/07/04 14:37:33 schwarze Exp $ */
+/* $Id: man_html.c,v 1.182 2022/07/05 21:25:29 schwarze Exp $ */
 /*
- * Copyright (c) 2013-2015, 2017-2020 Ingo Schwarze <schwarze@openbsd.org>
+ * Copyright (c) 2013-2015,2017-2020,2022 Ingo Schwarze <schwarze@openbsd.org>
  * Copyright (c) 2008-2012, 2014 Kristaps Dzonsons <kristaps@bsd.lv>
  *
  * Permission to use, copy, modify, and distribute this software for any
@@ -263,26 +263,26 @@ print_man_node(MAN_ARGS)
 static void
 man_root_pre(const struct roff_meta *man, struct html *h)
 {
-       struct tag      *t, *tt;
+       struct tag      *t;
        char            *title;
 
        assert(man->title);
        assert(man->msec);
        mandoc_asprintf(&title, "%s(%s)", man->title, man->msec);
 
-       t = print_otag(h, TAG_TABLE, "c", "head");
-       tt = print_otag(h, TAG_TR, "");
+       t = print_otag(h, TAG_DIV, "cr?", "head", "doc-pageheader",
+           "aria-label", "manual header line");
 
-       print_otag(h, TAG_TD, "c", "head-ltitle");
+       print_otag(h, TAG_SPAN, "c", "head-ltitle");
        print_text(h, title);
-       print_stagq(h, tt);
+       print_stagq(h, t);
 
-       print_otag(h, TAG_TD, "c", "head-vol");
+       print_otag(h, TAG_SPAN, "c", "head-vol");
        if (man->vol != NULL)
                print_text(h, man->vol);
-       print_stagq(h, tt);
+       print_stagq(h, t);
 
-       print_otag(h, TAG_TD, "c", "head-rtitle");
+       print_otag(h, TAG_SPAN, "c", "head-rtitle");
        print_text(h, title);
        print_tagq(h, t);
        free(title);
@@ -291,16 +291,19 @@ man_root_pre(const struct roff_meta *man, struct html *h)
 static void
 man_root_post(const struct roff_meta *man, struct html *h)
 {
-       struct tag      *t, *tt;
+       struct tag      *t;
+
+       t = print_otag(h, TAG_DIV, "cr?", "foot", "doc-pagefooter",
+           "aria-label", "manual footer line");
 
-       t = print_otag(h, TAG_TABLE, "c", "foot");
-       tt = print_otag(h, TAG_TR, "");
+       print_otag(h, TAG_SPAN, "c", "foot-left");
+       print_stagq(h, t);
 
-       print_otag(h, TAG_TD, "c", "foot-date");
+       print_otag(h, TAG_SPAN, "c", "foot-date");
        print_text(h, man->date);
-       print_stagq(h, tt);
+       print_stagq(h, t);
 
-       print_otag(h, TAG_TD, "c", "foot-os");
+       print_otag(h, TAG_SPAN, "c", "foot-os");
        if (man->os != NULL)
                print_text(h, man->os);
        print_tagq(h, t);
diff --git a/mandoc.css b/mandoc.css
index fded351541656d2282e2c001f17b7486ce9939f9..f2b5e733f79243bde16eba613c0637d721e97870 100644 (file)
--- a/mandoc.css
+++ b/mandoc.css
@@ -1,4 +1,4 @@
-/* $Id: mandoc.css,v 1.50 2022/07/03 14:29:45 schwarze Exp $ */
+/* $Id: mandoc.css,v 1.51 2022/07/05 21:25:29 schwarze Exp $ */
 /*
  * Standard style sheet for mandoc(1) -Thtml and man.cgi(8).
  *
@@ -53,19 +53,28 @@ table.results {     margin-top: 1em;
 
 /* Header and footer lines. */
 
-table.head {   width: 100%;
+div[role=doc-pageheader] {
+               display: flex;
                border-bottom: 1px dotted #808080;
                margin-bottom: 1em;
                font-size: smaller; }
-td.head-vol {  text-align: center; }
-td.head-rtitle {
+.head-ltitle { flex: 1; }
+.head-vol {    flex: 0 1 auto;
+               text-align: center; }
+.head-rtitle { flex: 1;
                text-align: right; }
 
-table.foot {   width: 100%;
+div[role=doc-pagefooter] {
+               display: flex;
+               justify-content: space-between;
                border-top: 1px dotted #808080;
                margin-top: 1em;
                font-size: smaller; }
-td.foot-os {   text-align: right; }
+.foot-left {   flex: 1; }
+.foot-date {   flex: 0 1 auto;
+               text-align: center; }
+.foot-os {     flex: 1;
+               text-align: right; }
 
 /* Sections and paragraphs. */
 
diff --git a/mdoc_html.c b/mdoc_html.c
index 390fcbcaae85a790ec24ef8a56f8e49eff5502ec..bd731ddf4be98d67b52209b9c709bf83a228c240 100644 (file)
--- a/mdoc_html.c
+++ b/mdoc_html.c
@@ -1,4 +1,4 @@
-/* $Id: mdoc_html.c,v 1.346 2022/07/04 14:37:33 schwarze Exp $ */
+/* $Id: mdoc_html.c,v 1.347 2022/07/05 21:25:29 schwarze Exp $ */
 /*
  * Copyright (c) 2014-2022 Ingo Schwarze <schwarze@openbsd.org>
  * Copyright (c) 2008-2011, 2014 Kristaps Dzonsons <kristaps@bsd.lv>
@@ -453,16 +453,19 @@ print_mdoc_node(MDOC_ARGS)
 static void
 mdoc_root_post(const struct roff_meta *meta, struct html *h)
 {
-       struct tag      *t, *tt;
+       struct tag      *t;
+
+       t = print_otag(h, TAG_DIV, "cr?", "foot", "doc-pagefooter",
+           "aria-label", "manual footer line");
 
-       t = print_otag(h, TAG_TABLE, "c", "foot");
-       tt = print_otag(h, TAG_TR, "");
+       print_otag(h, TAG_SPAN, "c", "foot-left");
+       print_stagq(h, t);
 
-       print_otag(h, TAG_TD, "c", "foot-date");
+       print_otag(h, TAG_SPAN, "c", "foot-date");
        print_text(h, meta->date);
-       print_stagq(h, tt);
+       print_stagq(h, t);
 
-       print_otag(h, TAG_TD, "c", "foot-os");
+       print_otag(h, TAG_SPAN, "c", "foot-os");
        print_text(h, meta->os);
        print_tagq(h, t);
 }
@@ -470,7 +473,7 @@ mdoc_root_post(const struct roff_meta *meta, struct html *h)
 static int
 mdoc_root_pre(const struct roff_meta *meta, struct html *h)
 {
-       struct tag      *t, *tt;
+       struct tag      *t;
        char            *volume, *title;
 
        if (NULL == meta->arch)
@@ -485,18 +488,18 @@ mdoc_root_pre(const struct roff_meta *meta, struct html *h)
                mandoc_asprintf(&title, "%s(%s)",
                    meta->title, meta->msec);
 
-       t = print_otag(h, TAG_TABLE, "c", "head");
-       tt = print_otag(h, TAG_TR, "");
+       t = print_otag(h, TAG_DIV, "cr?", "head", "doc-pageheader",
+           "aria-label", "manual header line");
 
-       print_otag(h, TAG_TD, "c", "head-ltitle");
+       print_otag(h, TAG_SPAN, "c", "head-ltitle");
        print_text(h, title);
-       print_stagq(h, tt);
+       print_stagq(h, t);
 
-       print_otag(h, TAG_TD, "c", "head-vol");
+       print_otag(h, TAG_SPAN, "c", "head-vol");
        print_text(h, volume);
-       print_stagq(h, tt);
+       print_stagq(h, t);
 
-       print_otag(h, TAG_TD, "c", "head-rtitle");
+       print_otag(h, TAG_SPAN, "c", "head-rtitle");
        print_text(h, title);
        print_tagq(h, t);
 
A git conversion mirror of mandoc.bsd.lv