From 4bdfcd60f7ce934d1e863a8c48b3737cb899918b Mon Sep 17 00:00:00 2001 From: Martin Thomson Date: Thu, 27 Nov 2025 17:45:04 +1100 Subject: [PATCH 1/7] Add an option for /doc/html that renders as HTML This tries to make the HTML rendering look good, using the native bootstrap styling as much as I can be bothered to do for now. --- ietf/doc/views_doc.py | 6 +- ietf/static/css/document_html.scss | 4 +- ietf/static/css/document_html_html.scss | 792 ++++++++++++++++++ ...ml_txt.scss => document_html_txthtml.scss} | 4 +- ietf/static/js/document_html.js | 2 +- ietf/templates/doc/document_html.html | 15 +- package.json | 3 +- 7 files changed, 815 insertions(+), 11 deletions(-) create mode 100644 ietf/static/css/document_html_html.scss rename ietf/static/css/{document_html_txt.scss => document_html_txthtml.scss} (99%) diff --git a/ietf/doc/views_doc.py b/ietf/doc/views_doc.py index 5210317325e..e840c46515c 100644 --- a/ietf/doc/views_doc.py +++ b/ietf/doc/views_doc.py @@ -316,7 +316,8 @@ def document_main(request, name, rev=None, document_html=False): js = Path(finders.find("ietf/js/document_html.js")).read_text() css = Path(finders.find("ietf/css/document_html_inline.css")).read_text() if html: - css += Path(finders.find("ietf/css/document_html_txt.css")).read_text() + css += Path(finders.find("ietf/css/document_html_html.css")).read_text() + css += Path(finders.find("ietf/css/document_html_txthtml.css")).read_text() # submission submission = "" @@ -639,7 +640,8 @@ def document_main(request, name, rev=None, document_html=False): js += Path(finders.find("ietf/js/theme.js")).read_text() css = Path(finders.find("ietf/css/document_html_inline.css")).read_text() if html: - css += Path(finders.find("ietf/css/document_html_txt.css")).read_text() + css += Path(finders.find("ietf/css/document_html_html.css")).read_text() + css += Path(finders.find("ietf/css/document_html_txthtml.css")).read_text() return render(request, "doc/document_draft.html" if document_html is False else "doc/document_html.html", dict(doc=doc, diff --git a/ietf/static/css/document_html.scss b/ietf/static/css/document_html.scss index 47ef8d64b47..f553dfcbda3 100644 --- a/ietf/static/css/document_html.scss +++ b/ietf/static/css/document_html.scss @@ -114,7 +114,7 @@ } .rfcmarkup, -.rfchtml { +.rfctxthtml { font-family: var(--bs-font-monospace); caption { @@ -342,7 +342,7 @@ tbody.meta tr { line-height: 1.25em !important; } - .rfchtml { + .rfctxthtml { font-size: 9.75pt; line-height: 1.25em; } diff --git a/ietf/static/css/document_html_html.scss b/ietf/static/css/document_html_html.scss new file mode 100644 index 00000000000..3072948ffaf --- /dev/null +++ b/ietf/static/css/document_html_html.scss @@ -0,0 +1,792 @@ +// Based on https://github.com/martinthomson/rfc-css/blob/main/rfc.css + +:root { + color-scheme: light dark; + --background-color: #fff; + --text-color: #222; + --title-color: #191919; + --link-color: #2a6496; + --highlight-color: #f9f9f9; + --line-color: #eee; + --pilcrow-weak: #ddd; + --pilcrow-strong: #bbb; + --small-font-size: 14.5px; + --font-mono: 'Oxygen Mono', monospace; + --font-title: "Sofia Sans Semi Condensed", sans-serif; + scrollbar-color: #bbb #eee; +} + +/* Dark mode. */ +@media (prefers-color-scheme: dark) { +:root { + --background-color: #121212; + --text-color: #f0f0f0; + --title-color: #fff; + --link-color: #4da4f0; + --highlight-color: #282828; + --line-color: #444; + --pilcrow-weak: #444; + --pilcrow-strong: #666; + scrollbar-color: #777 #333; +} +} + +.rfchtml { +// body { + max-width: 600px; + margin: 75px auto; + padding: 0 5px; + color: var(--text-color); + background-color: var(--background-color); + font: 16px/22px "Lora", serif; + scroll-behavior: smooth; +//} + +.ears { + display: none; +} + +/* headings */ +section { + clear: both; +} +.section-number { + padding-right: 0.5em; +} +h1, h2, h3, h4, h5, h6 { + font-family: var(--font-title); + font-weight: 680; + margin: 0.8em 0 0.3em; + font-size-adjust: 0.5; + color: var(--title-color); +} +h1#title { + font-size: 32px; + line-height: 40px; + clear: both; +} +h1#title, h1#rfcnum { + margin: 1.5em 0 0.2em; +} +h1#rfcnum + h1#title { + margin: 0.2em 0; +} + +h1, h2, h3 { + font-size: 22px; + line-height: 27px; +} +h4, h5, h6 { + font-size: 20px; + line-height: 24px; +} + +/* general structure */ +.author { + padding-bottom: 0.3em; + vertical-align: top; +} +#abstract+p { + font-size: 18px; + line-height: 24px; +} +#abstract+p code, #abstract+p samp, #abstract+p tt { + font-size: 16px; + line-height: 0; +} + +p { + padding: 0; + margin: 0.5em 0; + text-align: left; +} +div { + margin: 0; +} +.alignRight.art-text { + background-color: var(--highlight-color); + border: 1px solid var(--line-color); + border-radius: 3px; + padding: 0.5em 1em 0; + margin-bottom: 0.5em; +} +.alignRight.art-text pre { + padding: 0; + width: auto; +} +.alignRight { + margin: 1em 0; +} +.alignRight > *:first-child { + border: none; + margin: 0; + float: right; + clear: both; +} +.alignRight > *:nth-child(2) { + clear: both; + display: block; + border: none; +} +svg { + display: block; +} +/* font-family isn't space-separated, but =~ will have to do */ +svg[font-family~="monospace" i], svg [font-family~="monospace" i] { + font-family: var(--font-mono); +} +.alignCenter.art-text { + background-color: var(--highlight-color); + border: 1px solid var(--line-color); + border-radius: 3px; + padding: 0.5em 1em 0; + margin-bottom: 0.5em; +} +.alignCenter.art-text pre { + padding: 0; + width: auto; +} +.alignCenter { + margin: 1em 0; +} +.alignCenter > *:first-child { + border: none; + /* this isn't optimal, but it's an existence proof. PrinceXML doesn't + support flexbox yet. + */ + display: table; + margin: 0 auto; +} + +/* lists */ +ol, ul { + padding: 0; + margin: 0 0 0.5em 2em; + & :is(ol, ul) { + margin-left: 1em; + } +} +li { + margin: 0 0 0.25em 0; +} +ul.empty, .ulEmpty { + list-style-type: none; + & li { + margin-top: 0.5em; + } +} +:is(ul, ol).compact, .ulCompact, .olCompact { + margin: 0 0 0 2em; + & li { + margin: 0; + & :first-child { margin-top: 0; } + & :last-child { margin-bottom: 0; } + } +} + +/* definition lists */ +dl { + clear: left; + --indent: attr(indent ch, 3ch); + &.olPercent { + --indent: 5ch; + & > dt { + min-width: calc(var(--indent) - 2ch); + } + } + &.olPercent > dt { + float: none; + } + + dl > dd > & { + margin-top: 0.5em; + margin-bottom: 0; + } +} +dl:not(.dlNewline) > dt { + float: left; + margin-right: 2ch; + min-width: 8ch; +} +dl > dd { + margin-bottom: .8em; + margin-left: var(--indent) !important; /* stupid element overrides */ + min-height: 2ex; +} +:is(dl.compact, .dlCompact) > dd { + margin-bottom: 0; + & > :is(:first-child, .break:first-child + *) { + margin-top: 0; + } + & > :is(:last-child) { + margin-bottom: 0; + } +} +:is(dd, span).break { + display: none; +} + +/* links */ +a, a[href].selfRef:hover { + text-decoration: none; +} +a[href] { + color: var(--link-color); +} +a[href].selfRef, .iref + a[href].internal { + color: var(--text-color); +} +a[href]:hover { + text-decoration: underline; +} +a[href].selfRef:hover { + background-color: var(--highlight-color); +} +a.xref:is(.cite, .auto), :is(#status-of-memo, #copyright) a { + white-space: nowrap; +} + +/* Figures */ +tt, code, pre { + background-color: var(--highlight-color); + font: 14px/22px var(--font-mono); +} +tt, code { + /* changing the font for inline elements leads to different ascender + and descender heights; as we want to retain baseline alignment, + remove leading to avoid altering the final height of lines + note: this fails if these blocks take an entire line, + a different solution would be great */ + line-height: 0; +} +:is(h1, h2, h3, h4, h5, h6) :is(tt, code) { + font-size: 84%; +} +pre { + border: 1px solid var(--line-color); + font-size: 13.5px; + line-height: 16px; + letter-spacing: -0.2px; + margin: 5px; + padding: 5px; +} +img { + max-width: 100%; +} +figure { + margin: 0.5em 0; + padding: 0; +} +figure blockquote { + margin: 0.8em 0.4em 0.4em; +} +figcaption, caption { + font-style: italic; + margin: 0.5em 1.5em; + text-align: left; + caption-side: bottom; +} +@media screen { + /* Auto-collapse boilerplate. + :is(#status-of-memo, #copyright) p { + margin: -2px 0; + max-height: 0; + transition: max-height 2s ease, margin 0.5s ease 0.5s; + overflow: hidden; + } + :is(#status-of-memo, #copyright):hover p, + :is(#status-of-memo, #copyright) h2:target ~ p { + margin: 0.5em 0; + max-height: 500px; + overflow: auto; + } */ + pre, svg { + display: inline-block; + /* In the horizontal direction, sometimes people make over-sized figures. + Scrollbars for those is therefore necessary: auto adds them as necessary.. + In the vertical direction, the line-height can combine with the font + asender/descender height to produce scrollbars: hidden avoids that. */ + overflow: auto hidden; + } + pre { + max-width: 100%; + width: calc(100% - 22px - 1em); + } + svg { + max-width: calc(100% - 22px - 1em); + } + figure pre { + display: block; + width: calc(100% - 25px); + } + :is(pre, svg) + .pilcrow { + display: inline-block; + vertical-align: text-bottom; + padding-bottom: 8px; + } +} + +/* aside, blockquote */ +aside, blockquote { + margin-left: 0; + padding: 0 2em; + font-style: italic; +} +blockquote { + margin: 1em 0; +} +cite { + display: block; + text-align: right; + font-style: italic; +} + +/* tables */ +table { + width: auto; + max-width: 100%; + margin: 0 0 1em; + border-collapse: collapse; +} +table.right { + margin-left: auto; +} +table.center { + margin-left: auto; + margin-right: auto; +} +table.left { + margin-right: auto; +} +table .text-left { + text-align: left; +} +table .text-center { + text-align: center; +} +table .text-right { + text-align: right; +} + +thead, tbody { + border: 1px solid var(--line-color); +} +th, td { + text-align: left; + vertical-align: top; + padding: 5px 10px; +} +th { + background-color: var(--line-color); +} +:is(tr:nth-child(2n), thead+tbody > tr:nth-child(2n+1)) > td { + background-color: var(--background-color); +} +:is(tr:nth-child(2n+1), thead+tbody > tr:nth-child(2n)) > td { + background-color: var(--highlight-color); +} +table caption { + margin: 0; + padding: 3px 0 3px 1em; +} +table p { + margin: 0; +} + +/* pilcrow */ +a.pilcrow { + margin-left: 3px; + opacity: 0.2; + user-select: none; + &[href] { + color: var(--pilcrow-weak); + &:hover { text-decoration: none; } + } +} +@media not print { + :hover > a.pilcrow, a.pilcrow:focus { + opacity: 1; + } + a.pilcrow[href]:hover { + color: var(--pilcrow-strong); + background-color: transparent; + } +} +@media print { + a.pilcrow { + display: none; + } +} + +/* misc */ +hr { + border: 0; + border-top: 1px solid var(--line-color); +} +.bcp14 { + font-variant: small-caps; + font-weight: 600; + font-size: var(--small-font-size); +} +.role { + font-variant: all-small-caps; +} +sub, sup { + line-height: 1; + font-size: 80%; +} + +/* info block */ +#identifiers { + margin: 0; + font-size: var(--small-font-size); + line-height: 18px; + --identifier-width: 15ch; + & dt { + width: var(--identifier-width); + min-width: var(--identifier-width); + clear: left; + float: left; + text-align: right; + margin-right: 1ch; + } + & dd { + margin: 0; + margin-left: calc(1em + var(--identifier-width)) !important; + min-width: 5em; + } + & .authors { + & .author { + display: inline-block; + margin-right: 1.5em; + } + & .org { + font-style: italic; + } + } +} + +/* The prepared/rendered info at the very bottom of the page */ +.docInfo { + color: #999; + font-size: 0.9em; + font-style: italic; + margin-top: 2em; +} +.docInfo .prepared { + float: right; +} + +/* table of contents +#toc { + padding: 0.75em 0 2em 0; + margin-bottom: 1em; + + & nav { + & ul { + margin: 0 0.5em 0 0; + padding: 0; + list-style: none; + } + & li { + line-height: 1.3em; + margin: 2px 0; + padding-left: 1.2em; + text-indent: -1.2em; + } + } + & a.xref { + white-space: normal; + } +} */ + +.references { + & > dt { + text-align: right; + font-weight: bold; + min-width: 10ch; + margin-right: 1.5ch; + &:target::before { + content: "⇒"; + margin: 0 10px 0 -25px; + } + } + & > dd { + margin-left: 12ch !important; + overflow: visible; + & .refInstance { + margin-bottom: 0.8em; + } + & .ascii { + margin-bottom: 0.25em; + } + } +} + +#rfc\.index\.index + ul { + margin-left: 0; +} + +/* authors */ +address.vcard { + font-style: normal; + max-width: 20em; + margin: 1em auto 1em 0; + + & .nameRole { + font-weight: 700; + margin-left: 0; + } + & .label { + margin: 0.5em 0; + } + & .type { + display: none; + } + & .alternative-contact { + margin: 0.5em 0 0.25em 0; + } + & .non-ascii { + margin: 0 0 0 2em; + } + & div.left { + text-align: left; + } + & div.right { + text-align: right; + } +} + +hr.addr { + border-top: 1px dashed; + margin: 0; + color: #ddd; + max-width: calc(100% - 16px); +} +@media (min-width: 500px) { + #authors-addresses > section { + column-count: 2; + column-gap: 20px; + } + #authors-addresses > section > h2 { + column-span: all; + } + /* hack for break-inside: avoid-column */ + #authors-addresses address { + display: inline-block; + break-inside: avoid-column; + } +} + +/* Comments */ +.rfcEditorRemove p:first-of-type { + font-style: italic; +} +.cref { + background-color: rgba(249, 232, 105, 0.3); + padding: 2px 4px; +} +.crefSource { + font-style: italic; +} + +@media screen { + #toc nav { + font-family: var(--font-title); + font-weight: 360; + & > ul { margin-bottom: 2em; } + & ul { + margin: 0 0 0 4px; + & :is(p, li) { + margin: 2px 0; + } + } + } +/* #toc a.toplink { + float: right; + } */ +} +/* @media not screen { */ + #toc a.toplink { + display: none; + } +/* } */ + + +/* TOC layout for smaller screens +@media screen and (max-width: 929px) { + #toc { + position: fixed; + z-index: 2; + top: 0; + right: 0; + padding: 1px 0 0 0; + margin: 0; + border-bottom: 1px solid #ccc; + opacity: 0.6; + } + #toc h2 { + margin: 0; + padding: 2px 0 2px 6px; + padding-right: 1em; + font-size: 18px; + line-height: 24px; + min-width: 190px; + text-align: right; + background-color: #444; + color: white; + cursor: pointer; + &::before { // css hamburger // + float: right; + position: relative; + width: 1em; + height: 1px; + left: -164px; + margin: 8px 0 0 0; + background: white none repeat scroll 0 0; + box-shadow: 0 4px 0 0 white, 0 8px 0 0 white; + content: ""; + } + } + #toc nav { + display: none; + background-color: var(--background-color); + padding: 0.5em 1em 1em; + overflow: auto; + overscroll-behavior: contain; + height: calc(100vh - 48px); + border-left: 1px solid #ddd; + } + #toc.active { + opacity: 1; + & nav { display: block; } + } + // Make the collapsed ToC header render white on gray also when it's a link // + #toc h2 a, + #toc h2 a:is(:link, :focus, :hover), + #toc a.toplink, + #toc a.toplink:hover { + color: white; + background-color: #444; + text-decoration: none; + } + #toc a.toplink { + margin: 2px 0.5em 0; + } +} */ + +/* TOC layout for wide screens +@media screen and (min-width: 930px) { + body { + padding-right: 360px; + padding-right: calc(min(180px + 20%, 500px)); + } + #toc { + position: fixed; + bottom: 0; + right: 0; + right: calc(50vw - 480px); + width: 312px; + margin: 0; + padding: 0; + z-index: 1; + } + #toc h2 { + margin: 0; + padding: 0.25em 1em 1em 0; + } + #toc nav { + display: block; + height: calc(90vh - 84px); + bottom: 0; + padding: 0.5em 0 2em; + overflow: auto; + overscroll-behavior: contain; + scrollbar-width: thin; + } + img { --/ future proofing / + max-width: 100%; + height: auto; + } + #toc a.toplink { + margin: 8px 0.5em 0; + } +} */ + +/* pagination */ +@media print { + body { + width: 100%; + } + p { + orphans: 3; + widows: 3; + } + #n-copyright-notice { + border-bottom: none; + } + #toc, #n-introduction { + page-break-before: always; + } + #toc { + border-top: none; + padding-top: 0; + } + figure, pre, .vcard { + page-break-inside: avoid; + } + h1, h2, h3, h4, h5, h6 { + page-break-after: avoid; + } + :is(h2, h3, h4, h5, h6)+*, dd { + page-break-before: avoid; + } + pre { + white-space: pre-wrap; + word-wrap: break-word; + font-size: 10pt; + } + table { + border: 1px solid #ddd; + } + td { + border-top: 1px solid #ddd; + } +} + +/* @page :first { + padding-top: 0; + @top-left { + content: normal; + border: none; + } + @top-center { + content: normal; + border: none; + } + @top-right { + content: normal; + border: none; + } +} + +@page { + size: A4; + margin-bottom: 45mm; + padding-top: 20px; +} */ + +/* SVG Trick: a prefix match works because only black and white are allowed */ +svg :is([stroke="black"], [stroke^="#000"]) { + stroke: var(--text-color); +} +svg :is([stroke="white"], [stroke^="#fff"]) { + stroke: var(--background-color); +} +svg :is([fill="black"], [fill^="#000"], :not([fill])) { + fill: var(--text-color); +} +svg :is([fill="white"], [fill^="#fff"]) { + fill: var(--background-color); +} +} diff --git a/ietf/static/css/document_html_txt.scss b/ietf/static/css/document_html_txthtml.scss similarity index 99% rename from ietf/static/css/document_html_txt.scss rename to ietf/static/css/document_html_txthtml.scss index a5991056c96..c5c59d197d8 100644 --- a/ietf/static/css/document_html_txt.scss +++ b/ietf/static/css/document_html_txthtml.scss @@ -31,10 +31,10 @@ margin-left: 3ch; } -.rfchtml { +.rfctxthtml { // body { // color: black; -// font-family: monospace; + font-family: monospace; // font-size: 1em; line-height: var(--line); width: 72ch; diff --git a/ietf/static/js/document_html.js b/ietf/static/js/document_html.js index 6e8861739a6..a1606f5c2bf 100644 --- a/ietf/static/js/document_html.js +++ b/ietf/static/js/document_html.js @@ -50,7 +50,7 @@ document.addEventListener("DOMContentLoaded", function (event) { const btn_pref = { "sidebar": "on", "deftab": "docinfo", - "htmlconf": "html", + "htmlconf": "txthtml", "pagedeps": "reference", "reflinks": "refsection" }; diff --git a/ietf/templates/doc/document_html.html b/ietf/templates/doc/document_html.html index a85b1f5310a..2901286c559 100644 --- a/ietf/templates/doc/document_html.html +++ b/ietf/templates/doc/document_html.html @@ -28,7 +28,8 @@ {% else %} {% if html %} - + + {% endif %} {% vite_asset 'client/embedded.js' %} @@ -163,7 +164,11 @@ tabindex="0" id="content"> {% if html and request.COOKIES.htmlconf != 'txt' %} + {% if request.COOKIES.htmlconf == 'html' %}
+ {% else %} +
+ {% endif %}
{{ html|safe }}
@@ -295,10 +300,14 @@ - -
diff --git a/package.json b/package.json index e2e6fd7dab7..5e3b3643c26 100644 --- a/package.json +++ b/package.json @@ -82,7 +82,8 @@ "ietf/static/css/datepicker.scss", "ietf/static/css/document_html_inline.scss", "ietf/static/css/document_html_referenced.scss", - "ietf/static/css/document_html_txt.scss", + "ietf/static/css/document_html_html.scss", + "ietf/static/css/document_html_txthtml.scss", "ietf/static/css/highcharts.scss", "ietf/static/css/ietf.scss", "ietf/static/css/liaisons.css", From 4bc3d85b6e33dc4a0714dba15d5344f9c6933c67 Mon Sep 17 00:00:00 2001 From: Martin Thomson Date: Fri, 28 Nov 2025 00:06:59 +1100 Subject: [PATCH 2/7] Fixups --- ietf/static/css/document_html_html.scss | 44 ++++++++----------------- ietf/templates/doc/document_html.html | 6 ++-- 2 files changed, 17 insertions(+), 33 deletions(-) diff --git a/ietf/static/css/document_html_html.scss b/ietf/static/css/document_html_html.scss index 3072948ffaf..db8fdeb199f 100644 --- a/ietf/static/css/document_html_html.scss +++ b/ietf/static/css/document_html_html.scss @@ -2,33 +2,17 @@ :root { color-scheme: light dark; - --background-color: #fff; - --text-color: #222; - --title-color: #191919; - --link-color: #2a6496; - --highlight-color: #f9f9f9; - --line-color: #eee; - --pilcrow-weak: #ddd; - --pilcrow-strong: #bbb; + --background-color: var(--bs-body-bg); + --text-color: var(--bs-body-color); + --title-color: var(--bs-heading-color); + --link-color: var(--bs-link-color); + --highlight-color: var(--bs-highlight-color); + --line-color: var(--bs-border-color); + --pilcrow-weak: var(--bs-focus-ring-color); + --pilcrow-strong: var(--bs-secondary-color); --small-font-size: 14.5px; - --font-mono: 'Oxygen Mono', monospace; - --font-title: "Sofia Sans Semi Condensed", sans-serif; - scrollbar-color: #bbb #eee; -} - -/* Dark mode. */ -@media (prefers-color-scheme: dark) { -:root { - --background-color: #121212; - --text-color: #f0f0f0; - --title-color: #fff; - --link-color: #4da4f0; - --highlight-color: #282828; - --line-color: #444; - --pilcrow-weak: #444; - --pilcrow-strong: #666; - scrollbar-color: #777 #333; -} + --font-mono: 'Oxygen Mono', var(--bs-font-monospace), monospace; + --font-title: "Sofia Sans Semi Condensed", var(--bs-font-sans-serif), sans-serif; } .rfchtml { @@ -38,7 +22,7 @@ padding: 0 5px; color: var(--text-color); background-color: var(--background-color); - font: 16px/22px "Lora", serif; + font: 16px/22px "Lora", var(--bs-body-font-family), serif; scroll-behavior: smooth; //} @@ -468,7 +452,7 @@ sub, sup { /* The prepared/rendered info at the very bottom of the page */ .docInfo { - color: #999; + color: var(--bs-secondary-text-emphasis); font-size: 0.9em; font-style: italic; margin-top: 2em; @@ -560,7 +544,7 @@ address.vcard { hr.addr { border-top: 1px dashed; margin: 0; - color: #ddd; + color: var(--line-color); max-width: calc(100% - 16px); } @media (min-width: 500px) { @@ -583,7 +567,7 @@ hr.addr { font-style: italic; } .cref { - background-color: rgba(249, 232, 105, 0.3); + background-color: var(--bs-warning-bg-subtle); padding: 2px 4px; } .crefSource { diff --git a/ietf/templates/doc/document_html.html b/ietf/templates/doc/document_html.html index 2901286c559..4f9ac4d9a9a 100644 --- a/ietf/templates/doc/document_html.html +++ b/ietf/templates/doc/document_html.html @@ -105,7 +105,7 @@ href="{% url 'ietf.doc.views_doc.document_main' name=doc.name %}"> {% if doc.type_id == "rfc" %} RFC {{ doc.rfc_number }} - {% else %} + {% else %} {{ doc.name }}-{{ doc.rev }} {% endif %}
@@ -195,14 +195,14 @@ {% document_type_badge doc snapshot submission resurrected_by %}

- {% if request.COOKIES.htmlconf and request.COOKIES.htmlconf != 'html' and html %} + {% if request.COOKIES.htmlconf and request.COOKIES.htmlconf == 'txt' and html %}
You are viewing the legacy rfc2html rendering of this document. Change the preferences for a modern xml2rfc-based HTMLization.
- {% elif request.COOKIES.htmlconf == 'html' and not html %} + {% elif request.COOKIES.htmlconf != 'txt' and not html %}
You are viewing the legacy rfc2html rendering, because no xml2rfc-generated From 08309b78155701011dae659fa425839134d170c5 Mon Sep 17 00:00:00 2001 From: Martin Thomson Date: Fri, 28 Nov 2025 11:25:56 +1100 Subject: [PATCH 3/7] Style fixes --- ietf/static/css/document_html_html.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/ietf/static/css/document_html_html.scss b/ietf/static/css/document_html_html.scss index db8fdeb199f..7ff5f26545b 100644 --- a/ietf/static/css/document_html_html.scss +++ b/ietf/static/css/document_html_html.scss @@ -6,7 +6,7 @@ --text-color: var(--bs-body-color); --title-color: var(--bs-heading-color); --link-color: var(--bs-link-color); - --highlight-color: var(--bs-highlight-color); + --highlight-color: var(--bs-secondary-bg); --line-color: var(--bs-border-color); --pilcrow-weak: var(--bs-focus-ring-color); --pilcrow-strong: var(--bs-secondary-color); @@ -433,6 +433,7 @@ sub, sup { float: left; text-align: right; margin-right: 1ch; + font-weight: inherit; /* override */ } & dd { margin: 0; From 32f25eec01bc80d4a0b2b9332ddd7fb520da7b6a Mon Sep 17 00:00:00 2001 From: Martin Thomson Date: Fri, 28 Nov 2025 11:55:36 +1100 Subject: [PATCH 4/7] Fix dl indent --- ietf/static/css/document_html_html.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/ietf/static/css/document_html_html.scss b/ietf/static/css/document_html_html.scss index 7ff5f26545b..7fa98e670d8 100644 --- a/ietf/static/css/document_html_html.scss +++ b/ietf/static/css/document_html_html.scss @@ -171,7 +171,8 @@ ul.empty, .ulEmpty { /* definition lists */ dl { clear: left; - --indent: attr(indent ch, 3ch); + --indent: 3ch; + /* --indent: attr(indent ch, 3ch); -- Thanks Firefox */ &.olPercent { --indent: 5ch; & > dt { From 7ca7f5e8baf9a389e9a74b3d1019f3ccfeb62cbd Mon Sep 17 00:00:00 2001 From: Martin Thomson Date: Fri, 28 Nov 2025 16:20:40 +1100 Subject: [PATCH 5/7] fix: Restyle references in /doc/html fake text This is a little hacky in that it relies on xml2rfc inserting `
` after each reference, but that seems to be something that we can rely on consistently across the series. This is, as far as I can tell, character-for-character identical to the placement used in xml2rfc's text generation output. I had to make a small tweak to the layout for regular definition lists as well, but that's fairly minor (it was missing an indent). See https://github.com/martinthomson/rfc-txt-html/issues/13 for a discussion on the fix. Based on #10016, but this could be retargeted at main if that makes more sense. --- ietf/static/css/document_html_txthtml.scss | 99 +++++++++++++--------- 1 file changed, 61 insertions(+), 38 deletions(-) diff --git a/ietf/static/css/document_html_txthtml.scss b/ietf/static/css/document_html_txthtml.scss index c5c59d197d8..efc7b2f5924 100644 --- a/ietf/static/css/document_html_txthtml.scss +++ b/ietf/static/css/document_html_txthtml.scss @@ -261,46 +261,69 @@ li { @include margin-line; // margin: var(--line) 0; padding: 0 0 0 2ch; } -dl { - margin: 0; -} -section > dl, section > div > dl { - @include margin-block; // margin: var(--block); -} -dl, dt { - clear: left; -} -dt { - float: left; - font-weight: bold; - margin: 0 2ch 0 0; - break-after: avoid; -} -dd { - @include margin-paragraph; // margin: var(--paragraph); - margin-left: 3ch !important; /* override attribute added by xml2rfc */ - padding: 0; - break-before: avoid; -} -dl.dlNewline > dd { - clear: left; -} -dl.olPercent > dt { - min-width: 4ch; -} -dl.olPercent > dd { - margin-left: 6ch !important; /* as above */ -} -dl > dd > dl { - margin-top: var(--line); - margin-bottom: 0; -} -dl.references dt { - margin-right: 1ch; +dl:not(.references) { + @include margin-paragraph; + &, & dt { + clear: left; + } + dt { + float: left; + font-weight: bold; + margin: 0 2ch 0 0; + break-after: avoid; + } + dd { + @include margin-paragraph; + margin-left: 3ch !important; /* override attribute added by xml2rfc */ + padding: 0; + break-before: avoid; + } + &.dlNewline > dd { + clear: left; + } + &.olPercent > dt { + min-width: 4ch; + } + &.olPercent > dd { + margin-left: 6ch !important; /* as above */ + } + & > dd > dl { + margin-top: var(--line); + margin-bottom: 0; + } } -dl.references dd { - margin-left: 11ch !important; /* grr */ +dl.references { + --indent: 10ch; + --gutter: 1ch; + --max-label: 32ch; + + display: flex; + flex-flow: row wrap; + width: calc(100% - var(--indent)); + padding-left: var(--indent); + + dt { + flex: 0 0 max-content; + margin-left: calc(-1 * var(--indent)); + min-width: var(--indent); + max-width: var(--max-label); + padding: 0; + } + dd { + flex: 0 0 100%; + margin: 0 0 var(--line) 0; + &:last-child, &:has(+.break:last-child) { margin: 0; } + div.refInstance { margin: 0 0 var(--line) 0; } + padding: 0 0 0 var(--gutter); + } + dd.break:not(:last-child) { + display: flex block; + flex: 0 0 calc(100% + 0.02px); /* overflow to force wrap */ + margin: 0; + height: 0; + } } + :is(dd, span).break { display: none; } From e000bcb65243f26752e737d39209b07cc93f3beb Mon Sep 17 00:00:00 2001 From: Martin Thomson Date: Fri, 28 Nov 2025 16:47:00 +1100 Subject: [PATCH 6/7] Fixup margins --- ietf/static/css/document_html_txthtml.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/ietf/static/css/document_html_txthtml.scss b/ietf/static/css/document_html_txthtml.scss index efc7b2f5924..42c920daf9b 100644 --- a/ietf/static/css/document_html_txthtml.scss +++ b/ietf/static/css/document_html_txthtml.scss @@ -299,8 +299,9 @@ dl.references { display: flex; flex-flow: row wrap; - width: calc(100% - var(--indent)); + width: calc(100% - var(--indent) - 3ch); padding-left: var(--indent); + @include margin-block; dt { flex: 0 0 max-content; From 171aa69c4429b6c55a24041b2ee99f2850ca5dfe Mon Sep 17 00:00:00 2001 From: Martin Thomson Date: Fri, 28 Nov 2025 16:54:42 +1100 Subject: [PATCH 7/7] Fix width --- ietf/static/css/document_html_txthtml.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ietf/static/css/document_html_txthtml.scss b/ietf/static/css/document_html_txthtml.scss index 42c920daf9b..087580c41b6 100644 --- a/ietf/static/css/document_html_txthtml.scss +++ b/ietf/static/css/document_html_txthtml.scss @@ -299,7 +299,7 @@ dl.references { display: flex; flex-flow: row wrap; - width: calc(100% - var(--indent) - 3ch); + width: calc(100% - 3ch); padding-left: var(--indent); @include margin-block;