Finally get rid of the archaic <table> markup for header and footer lines

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.

diff --git a/usr.bin/mandoc/man_html.c b/usr.bin/mandoc/man_html.c
index a8fbe6c..ae46293 100644 (file)
--- a/usr.bin/mandoc/man_html.c
+++ b/usr.bin/mandoc/man_html.c
@@ -1,6 +1,6 @@
-/* $OpenBSD: man_html.c,v 1.134 2022/07/04 14:37:14 schwarze Exp $ */
+/* $OpenBSD: man_html.c,v 1.135 2022/07/05 21:25:23 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
@@ -261,26 +261,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);
@@ -289,16 +289,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/usr.bin/mandoc/mandoc.css b/usr.bin/mandoc/mandoc.css
index c446b51..b5b4ae7 100644 (file)
--- a/usr.bin/mandoc/mandoc.css
+++ b/usr.bin/mandoc/mandoc.css
@@ -1,4 +1,4 @@
-/* $OpenBSD: mandoc.css,v 1.37 2022/07/03 14:28:27 schwarze Exp $ */
+/* $OpenBSD: mandoc.css,v 1.38 2022/07/05 21:25:24 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/usr.bin/mandoc/mdoc_html.c b/usr.bin/mandoc/mdoc_html.c
index dca0635..2a0c58c 100644 (file)
--- a/usr.bin/mandoc/mdoc_html.c
+++ b/usr.bin/mandoc/mdoc_html.c
@@ -1,4 +1,4 @@
-/* $OpenBSD: mdoc_html.c,v 1.221 2022/07/04 14:37:14 schwarze Exp $ */
+/* $OpenBSD: mdoc_html.c,v 1.222 2022/07/05 21:25:24 schwarze Exp $ */
 /*
  * Copyright (c) 2014-2022 Ingo Schwarze <schwarze@openbsd.org>
  * Copyright (c) 2008-2011, 2014 Kristaps Dzonsons <kristaps@bsd.lv>
@@ -451,16 +451,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);
 }
@@ -468,7 +471,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)
@@ -483,18 +486,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);