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..7fa98e670d8
--- /dev/null
+++ b/ietf/static/css/document_html_html.scss
@@ -0,0 +1,778 @@
+// Based on https://github.com/martinthomson/rfc-css/blob/main/rfc.css
+
+:root {
+ color-scheme: light dark;
+ --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-secondary-bg);
+ --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', var(--bs-font-monospace), monospace;
+ --font-title: "Sofia Sans Semi Condensed", var(--bs-font-sans-serif), sans-serif;
+}
+
+.rfchtml {
+// body {
+ max-width: 600px;
+ margin: 75px auto;
+ padding: 0 5px;
+ color: var(--text-color);
+ background-color: var(--background-color);
+ font: 16px/22px "Lora", var(--bs-body-font-family), 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: 3ch;
+ /* --indent: attr(indent ch, 3ch); -- Thanks Firefox */
+ &.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;
+ font-weight: inherit; /* override */
+ }
+ & 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: var(--bs-secondary-text-emphasis);
+ 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: var(--line-color);
+ 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: var(--bs-warning-bg-subtle);
+ 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..4f9ac4d9a9a 100644
--- a/ietf/templates/doc/document_html.html
+++ b/ietf/templates/doc/document_html.html
@@ -28,7 +28,8 @@
{% else %}
+ {% else %}
+
+ {% endif %}
@@ -190,14 +195,14 @@
{% document_type_badge doc snapshot submission resurrected_by %}
You are viewing the legacy
rfc2html
rendering of this document. Change the
preferences for a modern
xml2rfc -based
HTMLization.
Maximum font size