Setting fonts with `@font-face` rules

[audreytoskin]

Making sure everyone reads using the correct font helps ease the problem of assuring consistent display of the page design for all users and devices. Issue #148 "Ligatures Mangled" dealt specifically with the PDF version of the CLL, I think, and there are certainly ways to embed a font file in PDFs...

My issue is focused on the web version of the CLL, because the web format is what I know, but it may or may not help with the print version too... And there's a way to make sure web users read with the correct fonts too -- using @font-face rules in the CSS. This way, users don't have to have the font installed on their system to correctly render page design. FontSquirrel has a large collection of permissively licensed fonts, and generates the @font-face CSS rules for you. Or, you can upload your own TTF or OTF font files and it will generate the web font kit for free. The Google Fonts repository also has a large collection of permissively licensed fonts.

Since I think this is mainly a CSS issue, I could make the necessary code changes for you, once we pick the exact fonts we want to use, and for which parts of the CLL text. For example, right now, almost all the text is set to use a serif font, while lojban examples are put in sans-serif.

[lagleki]

Feel free to pick fonts yourself. Hard to tell anything before "noobs" see the final product with fonts have already selected.

[audreytoskin]

Okay. Before I pick the fonts, are there any special characters are ligatures that I need to accommodate? I could try glancing through the CLL, but you're more familiar with the book than I am.

[lagleki]

these pages list some special IPA characters. https://lojban.github.io/cll/3/3/ https://lojban.github.io/cll/3/10/ Also definitely Chinese sinograms will be added in future editions like on this page https://lojban.github.io/cll/19/4/

And in general I should say that this CLL is likely to be available in Japanese since it has been translated into it but manually and out of this Prince project.

2016-02-05 2:31 GMT+03:00 Andrew Toskin notifications@github.com:

Okay. Before I pick the fonts, are there any special characters are ligatures that I need to accommodate? I could try glancing through the CLL, but you're more familiar with the book than I am.

— Reply to this email directly or view it on GitHub https://github.com/lojban/cll/issues/244#issuecomment-180102186.

[audreytoskin]

Okay, the IPA characters should be fine. As far as I know, there aren't a lot of font families that cover both Latin and Chinese characters, so any bits of Chinese or Japanese, either in the English CLL or any of its translations, should probably be marked with a lang and/or xml:lang attribute, and styled to use a different font.

[audreytoskin]

I notice that Linux Libertine is currently the first preferred font named in the master.css file. Linux Libertine and Linux Biolinum are both pretty nice-looking fonts, the two pair well together, and both have pretty broad support for all of the (European) scripts. I think this would make them good choices for the fonts for the CLL -- except for two small problems:

In Linux Libertine, at smaller sizes, the letter pair "rn" looks very much like the single letter "m". And in Linux Biolinum, the capital "I" and lower-case "l" look virtually the same... a common problem in sans-serif fonts, including the fonts used here on GitHub. (I'm using the versions of Linux Libertine and Linux Biolinum available in the Fedora package repositories; I tested them by pasting a page from the CLL into LibreOffice and reassigning the fonts.)

Especially in a book like the CLL, which will feature many words unfamiliar to first-time readers, illegibility of "I" vs "l" and "rn" vs "m" seems like a serious problem to me.

When I considered the breadth of characters needed to support the IPA, my first thought was of the Noto Sans and Noto Serif font families, because they were developed by Google with the express purpose of covering as much of (European, and some other) scripts as possible. After considering Libertine and Biolinum, I think I would probably still recommend the Noto Sans / Serif font families.

Does @rlpowell have any strong opinions about this?

[lagleki]

Any prs?

[audreytoskin]

Oh, sure. I hadn't gotten any confirmation to go ahead with my proposal to use Noto Sans/Serif, and then forgot about it, I guess. But I'll take another look at this over the next few days.

[audreytoskin]

Adding the CSS is fairly straightforward, but I'm not too familiar with the build process here, so it occurs to me I'm not sure where to put the actual font files.

From skimming the existing file tree, I'd thought to put them in the media/ folder, but I don't know what URL that will turn into when building the website. media/chapter-2-diagram.png seems to get moved to https://lojban.github.io/cll/2/1/diagram.png but I'm not sure what algorithm you use to determine where source media files are moved or how they're renamed.

[lagleki]

Can you play with the compiled html files instead and present the result?

http://lojban.org/publications/cll/

On Sat, Jul 13, 2019, 22:17 Andrew Toskin notifications@github.com wrote:

Adding the CSS is fairly straightforward, but I'm not too familiar with the build process here, so it occurs to me I'm not sure where to put the actual font files.

From skimming the existing file tree, I'd thought to put them in the media/ folder, but I don't know what URL that will turn into when building the website. media/chapter-2-diagram.png seems to get moved to https://lojban.github.io/cll/2/1/diagram.png but I'm not sure what algorithm you use to determine where source media files are moved or how they're renamed.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/lojban/cll/issues/244?email_source=notifications&email_token=AASNCEJ3RLEOZAJXJDL2EB3P7IS4HA5CNFSM4B2MQQVKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODZ3XYYA#issuecomment-511147104, or mute the thread https://github.com/notifications/unsubscribe-auth/AASNCEI2RK2EBTD6GLBJ7DDP7IS4HANCNFSM4B2MQQVA .

[audreytoskin]

Okay, well, in the live website, I would expect to put the font files in a directory like:

• http://lojban.org/publications/cll/cll_v1.1_xhtml-chapter-chunks/media/ (as well as under the "section-chunks" version),
• or else maybe just http://lojban.org/publications/cll/media/ so the different formats can share the same media files.

I just don't know where to put the font files in the source repository for that to happen.

But I can do a quick demo here using the Firefox developer tools to temporarily change the fonts on my own computer...

So, currently, when I view the CLL title page in Firefox on GNU/Linux, Windows, or Android, I see it in three different fonts.

Here's what the title looks like when set to use Noto Serif.

Here is the first heading and paragraph, also in Noto Serif.

Here is a table with interlinear gloss, using Noto Sans, because these sections are currently sans-serif on the published site.

Once we figure out where to put the font files, the text appearance will be more consistent across OSes and Web browsers.

[lagleki]

Em ter, 16 de jul de 2019 às 01:41, Andrew Toskin notifications@github.com escreveu:

Okay, well, in the live website, I would expect to put the font files in a directory like:

- http://lojban.org/publications/cll/cll_v1.1_xhtml-chapter-chunks/media/ (as well as under the "section-chunks" version),

• or else maybe just http://lojban.org/publications/cll/media/ so the different formats can share the same media files.

I just don't know where to put the font files in the source repository for that to happen.

Please, don't bother yourself. Others can do. Just take the html webpage, link font files in it and show us the result.

But I can do a quick demo here using the Firefox developer tools to

temporarily change the fonts on my own computer...

So, currently, when I view the CLL title page in Firefox on GNU/Linux https://user-images.githubusercontent.com/3881885/61241596-add49080-a6f8-11e9-993e-f88e788f58be.png, Windows https://user-images.githubusercontent.com/3881885/61241486-71089980-a6f8-11e9-87d0-686315aec9e5.png, or Android https://user-images.githubusercontent.com/3881885/61241485-71089980-a6f8-11e9-8c2f-7f905f6d9f6c.png, I see it in three different fonts.

Here's what the title looks like when set to use Noto Serif. [image: Screenshot from 2019-07-15 10-07-53] https://user-images.githubusercontent.com/3881885/61241776-0efc6400-a6f9-11e9-8491-bbe8bd3038c4.png

Here is the first heading and paragraph, also in Noto Serif. [image: Screenshot from 2019-07-15 10-09-57] https://user-images.githubusercontent.com/3881885/61241660-d492c700-a6f8-11e9-8473-3129c957ba68.png

Here is a table with interlinear gloss, using Noto Sans, because these sections are currently sans-serif on the published site. [image: Screenshot from 2019-07-15 10-16-56] https://user-images.githubusercontent.com/3881885/61241661-d492c700-a6f8-11e9-8279-fb2faa18a3cf.png

Once we figure out where to put the font files, the text appearance will be more consistent across OSes and Web browsers.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/lojban/cll/issues/244?email_source=notifications&email_token=AASNCEOIJRXDRI7X63LXVCTP7T4ILA5CNFSM4B2MQQVKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODZ7FPCY#issuecomment-511596427, or mute the thread https://github.com/notifications/unsubscribe-auth/AASNCEM5KYDUHVPHPYN3Q2TP7T4ILANCNFSM4B2MQQVA .

[audreytoskin]

Uh, okay? Here's a zip file containing Chapter 2.

cll-chapter-2-quick-tour-of-lojban-grammar--web-fonts-demo.zip

...However, Web browsers might not load the specified font files if it's an offline copy, because the browser doesn't know how to make sure it's on the same domain. (Seems like a bug in Firefox, at least.) So I also uploaded Chapter 2 to a temporary directory on my blog, so you can see a live demo there too. It has all the same exact files as in that zip archive.

All I did here was edit the CSS and add font files to a fonts/ directory. However, since I noticed the HTML page has inline CSS, I also "prettified" the code format to make it easier to look for fonts declared in there too.

I've mentioned using the Noto font family before. In the inline CSS, I noticed the page uses some monospace fonts in conjunction with MathJAX --- Chapter 2 doesn't actually use those effects anywhere, as far as I could tell, so I just arbitrarily picked Source Code Pro as the monospace font. It doesn't have any italic faces, and probably more weights than we need, but I think it's pleasant to look at and I think probably has sufficient UTF-8 coverage for use for use with the relative few math symbols we would use in the CLL... But you might want to double check that. I wasn't sure where MathJAX functions would even come up, if not in the chapter with "diagrams" in its title.