[bug#69432] [PATCH 0/3] Change fonts of the on-line manual

[bug#69432] [PATCH 0/3] Change fonts of the on-line manual

[Ludovic Courtès]

Hello!

This is an attempt to improve the rendering of the on-line manual.

Unfortunately it's quite hard to test locally because the manual is
built separately (I tested using the CSS editor in IceCat and it
worked because it could find the fonts locally, not relying on the
@font-face directives).

Thoughts?

Ludo'.

Ludovic Courtès (3):
  website: Adjust style of web site builder.
  website: Use Fira Sans for section headings only.
  website: Use Linux Libertine for the body of the manual.

 website/.guix.scm                  | 24 +++++++++++++-----
 website/static/base/css/code.css   |  1 -
 website/static/base/css/manual.css | 40 ++++++++++++++++++++++++++++++
 3 files changed, 58 insertions(+), 7 deletions(-)


base-commit: b7ccc5cb1b4ec936c00dbd98376c5d2677e60a63
-- 
2.41.0

[bug#69432] [PATCH 0/3] Change fonts of the on-line manual

[pelzflorian (Florian Pelz)]

Hi Ludo.  Thank you for improving the fonts.  Not having received the
patches yet, I can at least say that I tested the previous font issue
<https://issues.guix.gnu.org/69123> by copying the results of

cd ~/src/guix-artwork/website
guix build -f .guix.scm
cd ~/src/guix
guix build -f doc/build.scm

both to my /srv/http directory served by

         (service httpd-service-type
                  (httpd-configuration
                   (config
                    (httpd-config-file
                     (server-name "localhost")
                     (document-root "/srv/http/")
                     (extra-config (list "\
Options +Indexes"))))))

Regards,
Florian

[bug#69432] [PATCH 1/3] website: Adjust style of web site builder.

[Ludovic Courtès]

* website/.guix.scm (lingua-web-site)[build]: Use ‘for-each’ and
‘install-file’ when copying font files.
---
 website/.guix.scm | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/website/.guix.scm b/website/.guix.scm
index 3d8fdb6..438d337 100644
--- a/website/.guix.scm
+++ b/website/.guix.scm
@@ -207,12 +207,13 @@
             ;; Include the Fira fonts used in
             ;; website/static/base/css/manual.css.
             (mkdir-p (string-append #$output "/static/base/fonts"))
-            (map (lambda (file)
-                   (copy-file (string-append #+font-fira-sans
-                                             "/share/fonts/truetype/" file)
-                              (string-append #$output
-                                             "/static/base/fonts/" file)))
-                 '("FiraSans-Bold.ttf" "FiraSans-Regular.ttf"))))))
+            (for-each (lambda (file)
+                        (install-file (string-append #+font-fira-sans
+                                                     "/share/fonts/truetype/"
+                                                     file)
+                                      (string-append #$output
+                                                     "/static/base/fonts")))
+                      '("FiraSans-Bold.ttf" "FiraSans-Regular.ttf"))))))
 
   (computed-file (string-append "guix-web-site-" lingua)
                  build
-- 
2.41.0

[bug#69432] [PATCH 2/3] website: Use Fira Sans for section headings only.

[Ludovic Courtès]

With commit b7ccc5cb1b4ec936c00dbd98376c5d2677e60a63, Fira Sans was used
for the body of sections, not just section headings.  This is what
<https://www.gnu.org/software/gnulib/manual.css> prescribes but it’s not
what was intended.

* website/static/base/css/manual.css: Add rule.
---
 website/static/base/css/manual.css | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/website/static/base/css/manual.css b/website/static/base/css/manual.css
index 8ecd872..8970457 100644
--- a/website/static/base/css/manual.css
+++ b/website/static/base/css/manual.css
@@ -323,6 +323,13 @@ h1.settitle, h1.top, h2.chapter, h3.section, h4.subsection, h4.subsubsection {
     font-weight: bold;
 }
 
+/* Use a serif font for section bodies (this overrides /gnulib/manual.css,
+   which currently applies to entire section classes, as opposed to section
+   classes for headings only).  */
+div.settitle, div.top, div.chapter, div.section, div.subsection, div.subsubsection {
+    font-family: serif;
+}
+
 /* Texinfo footnotes are in a "footnote" <div> but each of them is
    wrapped in <h5> (go figure).  Have them use a regular font instead
    of bold.  */
-- 
2.41.0

[bug#69432] [PATCH 3/3] website: Use Linux Libertine for the body of the manual.

[Ludovic Courtès]

* website/static/base/css/manual.css: New @fontface entries for Linux
Libertine.  Use it for section bodies.  Add rule for ‘samp’, etc.
* website/static/base/css/code.css (.symbol-definition-prototype):
Remove ‘font-size’.
* website/.guix.scm (lingua-web-site)[build]: Install Linux Libertine
fonts.
---
 website/.guix.scm                  | 13 ++++++++++-
 website/static/base/css/code.css   |  1 -
 website/static/base/css/manual.css | 35 +++++++++++++++++++++++++++++-
 3 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/website/.guix.scm b/website/.guix.scm
index 438d337..4c74391 100644
--- a/website/.guix.scm
+++ b/website/.guix.scm
@@ -213,7 +213,18 @@
                                                      file)
                                       (string-append #$output
                                                      "/static/base/fonts")))
-                      '("FiraSans-Bold.ttf" "FiraSans-Regular.ttf"))))))
+                      '("FiraSans-Bold.ttf" "FiraSans-Regular.ttf"))
+
+            (for-each (lambda (file)
+                        (install-file (string-append #+font-linuxlibertine
+                                                     "/share/fonts/truetype/"
+                                                     file)
+                                      (string-append #$output
+                                                     "/static/base/fonts")))
+                      '("LinLibertine_R.ttf"
+                        "LinLibertine_RI.ttf"
+                        "LinLibertine_RB.ttf"
+                        "LinLibertine_RBI.ttf"))))))
 
   (computed-file (string-append "guix-web-site-" lingua)
                  build
diff --git a/website/static/base/css/code.css b/website/static/base/css/code.css
index e7c53ac..efdb70a 100644
--- a/website/static/base/css/code.css
+++ b/website/static/base/css/code.css
@@ -72,7 +72,6 @@ a[href].syntax-symbol:hover {
 
 .symbol-definition-prototype { /* remaining arguments to @deffn etc. */
     font-family: monospace;
-    font-size: 110%;
 }
 
 .symbol-definition + dd {
diff --git a/website/static/base/css/manual.css b/website/static/base/css/manual.css
index 8970457..0e5b9df 100644
--- a/website/static/base/css/manual.css
+++ b/website/static/base/css/manual.css
@@ -316,6 +316,31 @@ label[for=all-dropdowns-hidden] {
     font-style: normal;
 }
 
+@font-face {
+    font-family: 'Linux Libertine O';
+    src: url('../fonts/Linux Libertine O_R.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'Linux Libertine O';
+    src: url('../fonts/Linux Libertine O_RI.ttf') format('truetype');
+    font-weight: normal;
+    font-style: italic;
+}
+@font-face {
+    font-family: 'Linux Libertine O';
+    src: url('../fonts/Linux Libertine O_RB.ttf') format('truetype');
+    font-weight: bold;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'Linux Libertine O';
+    src: url('../fonts/Linux Libertine O_RBI.ttf') format('truetype');
+    font-weight: bold;
+    font-style: italic;
+}
+
 /* In title and node titles, use Fira Sans as it is more pleasant and
    more compact than Helvetica.  */
 h1.settitle, h1.top, h2.chapter, h3.section, h4.subsection, h4.subsubsection {
@@ -327,7 +352,15 @@ h1.settitle, h1.top, h2.chapter, h3.section, h4.subsection, h4.subsubsection {
    which currently applies to entire section classes, as opposed to section
    classes for headings only).  */
 div.settitle, div.top, div.chapter, div.section, div.subsection, div.subsubsection {
-    font-family: serif;
+    font-family: Linux Libertine O, serif;
+    font-size: 18px;
+}
+
+/* Arrange so fixed-width samples don't look too big compared to Linux
+   Libertine text.  */
+samp, code, .example {
+    font-family: monospace;
+    font-size: 85%;
 }
 
 /* Texinfo footnotes are in a "footnote" <div> but each of them is
-- 
2.41.0

[bug#69432] [PATCH 3/3] website: Use Linux Libertine for the body of the manual.

[pelzflorian (Florian Pelz)]

Hi Ludo.  Serif fonts are fine, although they might not be more readable
as is often claimed.

Ludovic Courtès <ludo@gnu.org> writes:
> * website/static/base/css/manual.css: New @fontface entries for Linux

Nitpick; below you have written @font-face with a hyphen.  I have not
checked if hyphens are required, but MDN also writes @font-face with a
hyphen.

More importantly:

> +@font-face {
> +    font-family: 'Linux Libertine O';
> +    src: url('../fonts/Linux Libertine O_R.ttf') format('truetype');
> +    font-weight: normal;
> +    font-style: normal;
> +}

The files are at

src: url('../fonts/LinLibertine_R.ttf') format('truetype');

without a space, otherwise I get HTTP error 404.


Also, don’t forget your copyright headers for .guix.scm.

Regards,
Florian

[bug#69432] [PATCH 1/3] website: Adjust style of web site builder.

[pelzflorian (Florian Pelz)]

Ludovic Courtès <ludo@gnu.org> writes:
> * website/.guix.scm (lingua-web-site)[build]: Use ‘for-each’ and
> ‘install-file’ when copying font files.

I did not remember there’s install-file.  But with it the

>              (mkdir-p (string-append #$output "/static/base/fonts"))

became unnecessary.  Could you remove it?

Regards,
Florian

[bug#69432] [PATCH 3/3] website: Use Linux Libertine for the body of the manual.

[Ludovic Courtès]

Hi!

"pelzflorian (Florian Pelz)" <pelzflorian@pelzflorian.de> skribis:

> Hi Ludo.  Serif fonts are fine, although they might not be more readable
> as is often claimed.

One of the sites that I find pleasant is that of Racket:

  https://docs.racket-lang.org/turnstile/

The serif font it uses seems to be slightly more legible than Linux
Libertine though.  Dunno, maybe we’ll change our mind eventually, but I
thought we could do better than Helvetica.

> The files are at
>
> src: url('../fonts/LinLibertine_R.ttf') format('truetype');
>
> without a space, otherwise I get HTTP error 404.

Oops, I must have messed up with search and replace.

> Also, don’t forget your copyright headers for .guix.scm.

Already up-to-date.

I’m sending v2 with your suggestions.

Thanks!

Ludo’.

[bug#69432] [PATCH guix-artwork v2 1/3] website: Adjust style of web site builder.

[Ludovic Courtès]

* website/.guix.scm (lingua-web-site)[build]: Use ‘for-each’ and
‘install-file’ when copying font files.
---
 website/.guix.scm | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/website/.guix.scm b/website/.guix.scm
index 3d8fdb6..1d8c3e6 100644
--- a/website/.guix.scm
+++ b/website/.guix.scm
@@ -206,13 +206,13 @@
 
             ;; Include the Fira fonts used in
             ;; website/static/base/css/manual.css.
-            (mkdir-p (string-append #$output "/static/base/fonts"))
-            (map (lambda (file)
-                   (copy-file (string-append #+font-fira-sans
-                                             "/share/fonts/truetype/" file)
-                              (string-append #$output
-                                             "/static/base/fonts/" file)))
-                 '("FiraSans-Bold.ttf" "FiraSans-Regular.ttf"))))))
+            (for-each (lambda (file)
+                        (install-file (string-append #+font-fira-sans
+                                                     "/share/fonts/truetype/"
+                                                     file)
+                                      (string-append #$output
+                                                     "/static/base/fonts")))
+                      '("FiraSans-Bold.ttf" "FiraSans-Regular.ttf"))))))
 
   (computed-file (string-append "guix-web-site-" lingua)
                  build

base-commit: b7ccc5cb1b4ec936c00dbd98376c5d2677e60a63
-- 
2.41.0

[bug#69432] [PATCH guix-artwork v2 2/3] website: Use Fira Sans for section headings only.

[Ludovic Courtès]

With commit b7ccc5cb1b4ec936c00dbd98376c5d2677e60a63, Fira Sans was used
for the body of sections, not just section headings.  This is what
<https://www.gnu.org/software/gnulib/manual.css> prescribes but it’s not
what was intended.

* website/static/base/css/manual.css: Add rule.
---
 website/static/base/css/manual.css | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/website/static/base/css/manual.css b/website/static/base/css/manual.css
index 8ecd872..8970457 100644
--- a/website/static/base/css/manual.css
+++ b/website/static/base/css/manual.css
@@ -323,6 +323,13 @@ h1.settitle, h1.top, h2.chapter, h3.section, h4.subsection, h4.subsubsection {
     font-weight: bold;
 }
 
+/* Use a serif font for section bodies (this overrides /gnulib/manual.css,
+   which currently applies to entire section classes, as opposed to section
+   classes for headings only).  */
+div.settitle, div.top, div.chapter, div.section, div.subsection, div.subsubsection {
+    font-family: serif;
+}
+
 /* Texinfo footnotes are in a "footnote" <div> but each of them is
    wrapped in <h5> (go figure).  Have them use a regular font instead
    of bold.  */
-- 
2.41.0

[bug#69432] [PATCH guix-artwork v2 3/3] website: Use Linux Libertine for the body of the manual.

[Ludovic Courtès]

* website/static/base/css/manual.css: New @font-face entries for Linux
Libertine.  Use it for section bodies.  Add rule for ‘samp’, etc.
* website/static/base/css/code.css (.symbol-definition-prototype):
Remove ‘font-size’.
* website/.guix.scm (lingua-web-site)[build]: Install Linux Libertine
fonts.
---
 website/.guix.scm                  | 13 ++++++++++-
 website/static/base/css/code.css   |  1 -
 website/static/base/css/manual.css | 37 ++++++++++++++++++++++++++++--
 3 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/website/.guix.scm b/website/.guix.scm
index 1d8c3e6..e74f01f 100644
--- a/website/.guix.scm
+++ b/website/.guix.scm
@@ -212,7 +212,18 @@
                                                      file)
                                       (string-append #$output
                                                      "/static/base/fonts")))
-                      '("FiraSans-Bold.ttf" "FiraSans-Regular.ttf"))))))
+                      '("FiraSans-Bold.ttf" "FiraSans-Regular.ttf"))
+
+            (for-each (lambda (file)
+                        (install-file (string-append #+font-linuxlibertine
+                                                     "/share/fonts/truetype/"
+                                                     file)
+                                      (string-append #$output
+                                                     "/static/base/fonts")))
+                      '("LinLibertine_R.ttf"
+                        "LinLibertine_RI.ttf"
+                        "LinLibertine_RB.ttf"
+                        "LinLibertine_RBI.ttf"))))))
 
   (computed-file (string-append "guix-web-site-" lingua)
                  build
diff --git a/website/static/base/css/code.css b/website/static/base/css/code.css
index e7c53ac..efdb70a 100644
--- a/website/static/base/css/code.css
+++ b/website/static/base/css/code.css
@@ -72,7 +72,6 @@ a[href].syntax-symbol:hover {
 
 .symbol-definition-prototype { /* remaining arguments to @deffn etc. */
     font-family: monospace;
-    font-size: 110%;
 }
 
 .symbol-definition + dd {
diff --git a/website/static/base/css/manual.css b/website/static/base/css/manual.css
index 8970457..333f545 100644
--- a/website/static/base/css/manual.css
+++ b/website/static/base/css/manual.css
@@ -1,7 +1,7 @@
 /* Additional CSS for the on-line manual.  It complements GNU's
    default CSS at <https://www.gnu.org/software/gnulib/manual.css>.
 
-   Public domain 2017, 2022. All rights waived.  */
+   Public domain 2017, 2022, 2024.  All rights waived.  */
 
 /* Navigation bar for the language menu, copied from navbar.css with
    minor changes.  */
@@ -316,6 +316,31 @@ label[for=all-dropdowns-hidden] {
     font-style: normal;
 }
 
+@font-face {
+    font-family: 'Linux Libertine O';
+    src: url('../fonts/LinLibertine_R.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'Linux Libertine O';
+    src: url('../fonts/LinLibertine_RI.ttf') format('truetype');
+    font-weight: normal;
+    font-style: italic;
+}
+@font-face {
+    font-family: 'Linux Libertine O';
+    src: url('../fonts/LinLibertine_RB.ttf') format('truetype');
+    font-weight: bold;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'Linux Libertine O';
+    src: url('../fonts/LinLibertine_RBI.ttf') format('truetype');
+    font-weight: bold;
+    font-style: italic;
+}
+
 /* In title and node titles, use Fira Sans as it is more pleasant and
    more compact than Helvetica.  */
 h1.settitle, h1.top, h2.chapter, h3.section, h4.subsection, h4.subsubsection {
@@ -327,7 +352,15 @@ h1.settitle, h1.top, h2.chapter, h3.section, h4.subsection, h4.subsubsection {
    which currently applies to entire section classes, as opposed to section
    classes for headings only).  */
 div.settitle, div.top, div.chapter, div.section, div.subsection, div.subsubsection {
-    font-family: serif;
+    font-family: Linux Libertine O, serif;
+    font-size: 18px;
+}
+
+/* Arrange so fixed-width samples don't look too big compared to Linux
+   Libertine text.  */
+samp, code, .example {
+    font-family: monospace;
+    font-size: 85%;
 }
 
 /* Texinfo footnotes are in a "footnote" <div> but each of them is
-- 
2.41.0

[bug#69432] [PATCH guix-artwork v2 3/3] website: Use Linux Libertine for the body of the manual.

[pelzflorian (Florian Pelz)]

Ludovic Courtès <ludo@gnu.org> writes:
> * website/static/base/css/manual.css: New @font-face entries for Linux
> Libertine.  Use it for section bodies.

Okay.  I cannot decide with regard to which font to use, but with this
one, the result looks good.

> Add rule for ‘samp’, etc.

Appropriate.

All patches LGTM. :)

Regards,
Florian

bug#69432: [PATCH guix-artwork v2 3/3] website: Use Linux Libertine for the body of the manual.

[Ludovic Courtès]

Hello,

"pelzflorian (Florian Pelz)" <pelzflorian@pelzflorian.de> skribis:

> Ludovic Courtès <ludo@gnu.org> writes:
>> * website/static/base/css/manual.css: New @font-face entries for Linux
>> Libertine.  Use it for section bodies.
>
> Okay.  I cannot decide with regard to which font to use, but with this
> one, the result looks good.
>
>> Add rule for ‘samp’, etc.
>
> Appropriate.
>
> All patches LGTM. :)

Pushed as b9a55b9091ec739f10802c5057faf85b0c5695f3, thanks!

Ludo’.