diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 1682bd9c40..0715bffa16 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -25,7 +25,7 @@
     {{- partial "stylesheet.html" . }}
     {{- partial "custom-header.html" . }}
   </head>
-  <body class="mobile-support{{ if eq (.Scratch.Get "relearnOutputFormat") "PRINT" }} print{{ end }}{{- if .Site.Params.disableInlineCopyToClipBoard }} disableInlineCopyToClipboard{{ end }}" data-url="{{ .RelPermalink }}">
+  <body class="mobile-support {{ ((.Scratch.Get "relearnOutputFormat") | lower) }}{{- if .Site.Params.disableInlineCopyToClipBoard }} disableInlineCopyToClipboard{{ end }}" data-url="{{ .RelPermalink }}">
     <div id="body" class="default-animation">
       <div id="sidebar-overlay"></div>
       <div id="toc-overlay"></div>
diff --git a/layouts/partials/output-article.html b/layouts/partials/output-article.html
index 487c8ef566..9092248741 100644
--- a/layouts/partials/output-article.html
+++ b/layouts/partials/output-article.html
@@ -1,7 +1,7 @@
 {{- $page := .page }}
 {{- $content := .content }}
-{{- $r_url := .RelPermalink }}
-{{- with  $page.OutputFormats.Get (($page.Scratch.Get "relearnOutputFormat") | lower) }}
+{{- $r_url := $page.RelPermalink }}
+{{- with  $page.OutputFormats.Get ($page.Scratch.Get "relearnOutputFormat") }}
 	{{- $s_url := .RelPermalink }}
     {{- if not (eq $s_url $r_url) }}
 		{{/* if we have a relative link in output formats with a path setting, our URLs are one level to deep; so we are making them absolute to our page by prepending the page's permalink */}}
diff --git a/layouts/partials/stylesheet.html b/layouts/partials/stylesheet.html
index 9838594872..6fe7ace0aa 100644
--- a/layouts/partials/stylesheet.html
+++ b/layouts/partials/stylesheet.html
@@ -18,7 +18,10 @@
     {{- end }}
     <link href="{{"css/ie.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
     <link href="{{"css/variant.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
-    <link href="{{"css/print.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet"{{ if ne (.Scratch.Get "relearnOutputFormat") "PRINT" }} media="print"{{ end }}>
+    <link href="{{"css/print.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" media="print">
+    {{- if (fileExists (printf "/static/css/format-%s.css" ((.Scratch.Get "relearnOutputFormat") | lower))) }}
+    <link href="{{(printf "css/format-%s.css" ((.Scratch.Get "relearnOutputFormat") | lower)) | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
+    {{- end }}
     <script src="{{"js/variant.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
     <script>
       {{ "// hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:" | safeJS }}
diff --git a/static/css/format-print.css b/static/css/format-print.css
new file mode 100644
index 0000000000..6cebb66d8a
--- /dev/null
+++ b/static/css/format-print.css
@@ -0,0 +1,181 @@
+@import "theme-relearn-light.css";
+
+#sidebar {
+    display: none;
+}
+#body {
+    margin-left: 0;
+    min-width: 100%;
+    max-width: 100%;
+    width: 100%;
+}
+#body #navigation {
+    display: none;
+}
+html,
+body #body{
+    font-size: 8.9pt;
+}
+body {
+    background-color: white;
+}
+pre code {
+    font-size: 8.3pt;
+}
+code.copy-to-clipboard-code {
+    border-bottom-right-radius: 2px;
+    border-top-right-radius: 2px;
+    border-right-width: 1px;
+}
+pre {
+    border: 1px solid #ccc;
+}
+#body #topbar{
+    background-color: #fff; /* avoid background bleeding*/
+    border-bottom: 1px solid #ddd;
+    border-radius: 0;
+    padding-left: 0; /* for print, we want to align with the footer to ease the layout */
+    color: #777;
+}
+.navigation,
+#top-print-link,
+#top-github-link {
+    /* we don't need this while printing */
+    display: none;
+}
+#body #breadcrumbs {
+    width: 100%;
+}
+#body #breadcrumbs .links {
+    overflow-x: hidden;
+    visibility: visible;
+}
+.copy-to-clipboard-button {
+    display: none;
+}
+
+#body h1, #body h2, #body h3, #body h4, #body h5, #body h6 {
+    /* better contrast for colored elements */
+    color: black;
+}
+#body th, #body td,
+#body code, #body strong, #body b,
+#body li, #body dd, #body dt,
+#body p,
+#body a {
+    /* better contrast for colored elements */
+    color: black;
+}
+#body .anchor{
+    display: none;
+}
+#body pre,
+#body code {
+    background-color: white;
+    border-color: #ddd;
+}
+
+hr{
+    border-bottom: 1px solid #ddd;
+}
+body,
+#body,
+#body-inner {
+    overflow: visible !important; /* turn off limitations for perfect scrollbar */
+}
+#body #body-inner {
+    /* reset paddings for chapters in screen */
+    padding: 0 3.25rem 4rem 3.25rem;
+}
+
+#body #body-inner h1 {
+    border-bottom: 1px solid #ddd;
+    margin-bottom: 2rem;
+    padding-bottom: .75rem;
+}
+#body-inner .chapter h3:first-of-type {
+    margin-top: 2rem;
+}
+#body-inner .chapter p {
+    font-size: 1rem;
+}
+
+.footline {
+    /* in print mode show footer line to signal reader the end of document */
+    border-top: 1px solid #ddd;
+    color: #777;
+    margin-top: 1.5rem;
+    padding-top: .75rem;
+}
+#body #body-inner .footline a {
+    text-decoration: none;
+}
+#body #body-inner a {
+    /* in print we want to distinguish links in our content from
+    normal text even if printed black/white;
+    don't use a.highlight in selector to also get links that are
+    put as HTML into markdown */
+    text-decoration-line: underline;
+}
+#toc-menu {
+    /* we don't need this while printing */
+    display: none;
+}
+#body #sidebar-toggle-span {
+    /* we don't need this while printing */
+    display: none;
+}
+#breadcrumbs .links {
+    display: inline;
+}
+#topbar{
+    /* the header is sticky which is not suitable for print; */
+    position: inherit; /* IE11 doesn't know "initial" here */
+}
+#topbar > div {
+    background-color: #ffffff; /* IE11 doesn't know "initial" here */
+}
+#body .tab-nav-button:not(.active) {
+    opacity: .5;
+}
+#head-tags {
+    display: none;
+}
+mark {
+    background: inherit;
+    color: inherit;
+}
+.mermaid > svg:hover {
+    border-color: transparent;
+}
+div.box {
+    border: 1px solid #ddd;
+}
+div.box > .box-content {
+    background-color: white;
+}
+rapi-doc{
+    /* adjust rapi-doc internals to fill out available space */
+    font-size: 4pt;
+    margin-left: -12px;
+    width: calc( 100% + 12px + 8px );
+}
+.btn,
+#body .tab-nav-button {
+    color: black !important;
+}
+#body .tab-nav-button.active {
+    background-color: white !important;
+    border-bottom-color: white !important;
+    color: black;
+}
+#body .tab-nav-button:not(.active) {
+    opacity: 1;
+}
+
+article {
+    break-before: page;
+}
+#body-inner > * > article:first-of-type {
+    break-before: avoid;
+}
diff --git a/static/css/print.css b/static/css/print.css
index 4ef812123d..9b3d92ae7d 100644
--- a/static/css/print.css
+++ b/static/css/print.css
@@ -1,183 +1 @@
-@import "theme-relearn-light.css";
-
-#sidebar {
-    display: none;
-}
-#body {
-    margin-left: 0;
-    min-width: 100%;
-    max-width: 100%;
-    width: 100%;
-}
-#body #navigation {
-    display: none;
-}
-html,
-body #body{
-    font-size: 8.9pt;
-}
-body {
-    background-color: white;
-}
-pre code {
-    font-size: 8.3pt;
-}
-code.copy-to-clipboard-code {
-    border-bottom-right-radius: 2px;
-    border-top-right-radius: 2px;
-    border-right-width: 1px;
-}
-pre {
-    border: 1px solid #ccc;
-}
-#body #topbar{
-    background-color: #fff; /* avoid background bleeding*/
-    border-bottom: 1px solid #ddd;
-    border-radius: 0;
-    padding-left: 0; /* for print, we want to align with the footer to ease the layout */
-    color: #777;
-}
-.navigation,
-#top-print-link,
-#top-github-link {
-    /* we don't need this while printing */
-    display: none;
-}
-#body #breadcrumbs {
-    width: 100%;
-}
-#body #breadcrumbs .links {
-    overflow-x: hidden;
-    visibility: visible;
-}
-.copy-to-clipboard-button {
-    display: none;
-}
-
-#body h1, #body h2, #body h3, #body .article-subheading, #body h4, #body h5, #body h6 {
-    /* better contrast for colored elements */
-    color: black;
-}
-#body th, #body td,
-#body code, #body strong, #body b,
-#body li, #body dd, #body dt,
-#body p,
-#body a {
-    /* better contrast for colored elements */
-    color: black;
-}
-#body .anchor{
-    display: none;
-}
-#body pre,
-#body code {
-    background-color: white;
-    border-color: #ddd;
-}
-
-hr{
-    border-bottom: 1px solid #ddd;
-}
-body,
-#body,
-#body-inner {
-    overflow: visible !important; /* turn off limitations for perfect scrollbar */
-}
-#body #body-inner {
-    /* reset paddings for chapters in screen */
-    padding: 0 3.25rem 4rem 3.25rem;
-}
-
-#body #body-inner h1 {
-    border-bottom: 1px solid #ddd;
-    margin-bottom: 2rem;
-    padding-bottom: .75rem;
-}
-
-#body-inner div.article-subheading,
-#body-inner .chapter.deprecated h3:first-of-type {
-    margin-top: 2rem;
-}
-#body-inner.narrow p {
-    font-size: 1rem;
-}
-
-.footline {
-    /* in print mode show footer line to signal reader the end of document */
-    border-top: 1px solid #ddd;
-    color: #777;
-    margin-top: 1.5rem;
-    padding-top: .75rem;
-}
-#body #body-inner .footline a {
-    text-decoration: none;
-}
-#body #body-inner a {
-    /* in print we want to distinguish links in our content from
-    normal text even if printed black/white;
-    don't use a.highlight in selector to also get links that are
-    put as HTML into markdown */
-    text-decoration-line: underline;
-}
-#toc-menu {
-    /* we don't need this while printing */
-    display: none;
-}
-#body #sidebar-toggle-span {
-    /* we don't need this while printing */
-    display: none;
-}
-#breadcrumbs .links {
-    display: inline;
-}
-#topbar{
-    /* the header is sticky which is not suitable for print; */
-    position: inherit; /* IE11 doesn't know "initial" here */
-}
-#topbar > div {
-    background-color: #ffffff; /* IE11 doesn't know "initial" here */
-}
-#body .tab-nav-button:not(.active) {
-    opacity: .5;
-}
-#head-tags {
-    display: none;
-}
-mark {
-    background: inherit;
-    color: inherit;
-}
-.mermaid > svg:hover {
-    border-color: transparent;
-}
-div.box {
-    border: 1px solid #ddd;
-}
-div.box > .box-content {
-    background-color: white;
-}
-rapi-doc{
-    /* adjust rapi-doc internals to fill out available space */
-    font-size: 4pt;
-    margin-left: -12px;
-    width: calc( 100% + 12px + 8px );
-}
-.btn,
-#body .tab-nav-button {
-    color: black !important;
-}
-#body .tab-nav-button.active {
-    background-color: white !important;
-    border-bottom-color: white !important;
-    color: black;
-}
-#body .tab-nav-button:not(.active) {
-    opacity: 1;
-}
-
-article {
-    break-before: page;
-}
-#body-inner > * > article:first-of-type {
-    break-before: avoid;
-}
+@import "format-print.css";
