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

  • Done
  • quality assurance status badge
Details
2 participants
  • Ludovic Courtès
  • pelzflorian (Florian Pelz)
Owner
unassigned
Submitted by
Ludovic Courtès
Severity
normal
L
L
Ludovic Courtès wrote on 27 Feb 2024 17:51
(address . guix-patches@gnu.org)
20240227165114.19942-1-ludo@gnu.org
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
P
P
pelzflorian (Florian Pelz) wrote on 27 Feb 2024 22:38
(name . Ludovic Courtès)(address . ludo@gnu.org)(address . 69432@debbugs.gnu.org)
87sf1d7flr.fsf@pelzflorian.de
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
L
L
Ludovic Courtès wrote on 27 Feb 2024 22:38
[PATCH 1/3] website: Adjust style of web site builder.
(address . 69432@debbugs.gnu.org)(name . Ludovic Courtès)(address . ludo@gnu.org)
20240227213835.21147-1-ludo@gnu.org
* 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(-)

Toggle diff (26 lines)
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
L
L
Ludovic Courtès wrote on 27 Feb 2024 22:38
[PATCH 2/3] website: Use Fira Sans for section headings only.
(address . 69432@debbugs.gnu.org)(name . Ludovic Courtès)(address . ludo@gnu.org)
20240227213835.21147-2-ludo@gnu.org
With commit b7ccc5cb1b4ec936c00dbd98376c5d2677e60a63, Fira Sans was used
for the body of sections, not just section headings. This is what
what was intended.

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

Toggle diff (20 lines)
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
L
L
Ludovic Courtès wrote on 27 Feb 2024 22:38
[PATCH 3/3] website: Use Linux Libertine for the body of the manual.
(address . 69432@debbugs.gnu.org)(name . Ludovic Courtès)(address . ludo@gnu.org)
20240227213835.21147-3-ludo@gnu.org
* 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(-)

Toggle diff (91 lines)
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
P
P
pelzflorian (Florian Pelz) wrote on 28 Feb 2024 08:56
(name . Ludovic Courtès)(address . ludo@gnu.org)(address . 69432@debbugs.gnu.org)
87plwh2f9r.fsf@pelzflorian.de
Hi Ludo. Serif fonts are fine, although they might not be more readable
as is often claimed.

Ludovic Courtès <ludo@gnu.org> writes:
Toggle quote (2 lines)
> * 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:

Toggle quote (7 lines)
> +@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
P
P
pelzflorian (Florian Pelz) wrote on 28 Feb 2024 09:06
Re: [bug#69432] [PATCH 1/3] website: Adjust style of web site builder.
(name . Ludovic Courtès)(address . ludo@gnu.org)(address . 69432@debbugs.gnu.org)
87le752et3.fsf@pelzflorian.de
Ludovic Courtès <ludo@gnu.org> writes:
Toggle quote (3 lines)
> * 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

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

became unnecessary. Could you remove it?

Regards,
Florian
L
L
Ludovic Courtès wrote on 29 Feb 2024 22:41
Re: [bug#69432] [PATCH 3/3] website: Use Linux Libertine for the body of the manual.
(name . pelzflorian (Florian Pelz))(address . pelzflorian@pelzflorian.de)(address . 69432@debbugs.gnu.org)
877cineyn0.fsf@gnu.org
Hi!

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

Toggle quote (3 lines)
> 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:


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.

Toggle quote (6 lines)
> 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.

Toggle quote (2 lines)
> Also, don’t forget your copyright headers for .guix.scm.

Already up-to-date.

I’m sending v2 with your suggestions.

Thanks!

Ludo’.
L
L
Ludovic Courtès wrote on 29 Feb 2024 22:47
[PATCH guix-artwork v2 1/3] website: Adjust style of web site builder.
(address . 69432@debbugs.gnu.org)
20240229214714.9431-1-ludo@gnu.org
* 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(-)

Toggle diff (29 lines)
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
L
L
Ludovic Courtès wrote on 29 Feb 2024 22:47
[PATCH guix-artwork v2 2/3] website: Use Fira Sans for section headings only.
(address . 69432@debbugs.gnu.org)
20240229214714.9431-2-ludo@gnu.org
With commit b7ccc5cb1b4ec936c00dbd98376c5d2677e60a63, Fira Sans was used
for the body of sections, not just section headings. This is what
what was intended.

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

Toggle diff (20 lines)
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
L
L
Ludovic Courtès wrote on 29 Feb 2024 22:47
[PATCH guix-artwork v2 3/3] website: Use Linux Libertine for the body of the manual.
(address . 69432@debbugs.gnu.org)
20240229214714.9431-3-ludo@gnu.org
* 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(-)

Toggle diff (100 lines)
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
P
P
pelzflorian (Florian Pelz) wrote on 1 Mar 2024 12:51
(name . Ludovic Courtès)(address . ludo@gnu.org)(address . 69432@debbugs.gnu.org)
87zfvitbke.fsf@pelzflorian.de
Ludovic Courtès <ludo@gnu.org> writes:
Toggle quote (3 lines)
> * 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.

Toggle quote (2 lines)
> Add rule for ‘samp’, etc.

Appropriate.

All patches LGTM. :)

Regards,
Florian
L
L
Ludovic Courtès wrote on 2 Mar 2024 16:01
Re: [bug#69432] [PATCH guix-artwork v2 3/3] website: Use Linux Libertine for the body of the manual.
(name . pelzflorian (Florian Pelz))(address . pelzflorian@pelzflorian.de)(address . 69432-done@debbugs.gnu.org)
87h6hoekyw.fsf@gnu.org
Hello,

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

Toggle quote (13 lines)
> 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’.
Closed
?
Your comment

This issue is archived.

To comment on this conversation send an email to 69432@debbugs.gnu.org

To respond to this issue using the mumi CLI, first switch to it
mumi current 69432
Then, you may apply the latest patchset in this issue (with sign off)
mumi am -- -s
Or, compose a reply to this issue
mumi compose
Or, send patches to this issue
mumi send-email *.patch