Typografia. Dobór fontów w Haiku i kroje pisma w internecie.

Zamiast DejaVu mamy Noto.

Uważam, że domyślnie dobrane fonty w Haiku i ich rozmiary są niefortunne, dlatego je zmieniłem. Szczególnie, że zacząłem niedowidzieć dwa lata temu, ale nie kupiłem jeszcze okularów (widzę gorzej w słabszym świetle, mam wadę minus). Kiedy w 2016 roku zmieniono domyślne fonty z rodziny DejaVu na Noto, to na #haiku-pl, na Freenode, toczyła się ożywiona dyskusja na ten temat. Niestety Echelog jest już nieczynny, więc nie jestem w stanie przywołać argumentów, jakie wtedy padły.

Echelog Tango Down!

Pamiętam, że pośród Polaków tylko mnie podobało się Noto. Po latach jednak zmieniłem zdanie, ówcześnie fonty z tej rodziny wydawały się wyglądać nowocześniej. Tym razem jednak zdecydowałem się na krój pisma z rodziy Liberation, z wyjątkiem dla Terminala i Kodera, gdzie ustawiłem DejaVu Sans Mono. Najważniejsze jest jednak to, że wraz ze zwiększeniem rozmiaru fontów, subiektywnie poprawiła się estetyka GUI. Dlatego że GUI w Haiku skaluje się wraz z rozmiarem fontów.

Porównanie fontów i ich rozmiarów.

Eksperymentowałem także z fontami szeryfowymi, zwłaszcza z ich pogrubionymi wersjami. Wygląda to nadwyraz interesująco, jednakże nie umiem się zdecydować. Która opcja przyjemniej prezentuje się dla oka? Na razie korzystam z pierwszej.

Instalowanie fontów w systemie operacyjnym Haiku.

Należy nadmienić, że fonty Liberation i DejaVu znajdują się w HaikuDepot, toteż nie trzeba ich pobierać z zewnętrznych stron. Posiada to tę zaletę, iż nie musimy ręcznie sprawdzać czy pojawiły się ich aktualizacje, jakie np. poprawiają rysowanie poszczególnych glifów.

Jeżeli chcemy posłużyć się konkretnym fontem, w czasie redagowania dokumentu, a nie znajduje się on w repozytorium, to możemy udać się na stronę domową konkretnego projektu Open Source i zwyczajnie pobrać archiwum zip lub tar.gz, a następnie je wypakować do odpowiedniego katalogu. Aktualnie nie ma znaczenia gdzie je zainstalujemy bowiem Haiku posiada tylko jednego użytkownika (i nie wiadomo czy będzie w ogóle multi user, być może ktoś wymyśli coś lepszego od konceptu z UNIXa). Niemniej należy być tego świadomym, na przyszłość:

graph TD
A(Instalowanie fontów w Haiku) --> B[Globalnie w  systemie  czy dla konkretnego użytkownika?]
B -->|Systemowo| C["/boot/system/non-packaged/data/fonts/"]
B -->|Użytkownika| D["/boot/home/config/non-packaged/data/fonts/"]

Jednym z moich ulubionych narzędzi na Haiku jest FontBoy, o jakim wspominałem w swoich impresjach z Haiku R1/beta2.

FontBoy to niewielki program, jednakże sprawia przyjemne dla oka wrażenie, kiedy chcemy przejrzeć kroje pisma!

Następnie należy załadować na nowo Trackera i Deskbara. Najprościej jest zabić ich procesy, automatycznie wystartują!

Zmiana fontów na τέχνη.

Wgrałem na τέχνη własne fonty. Różnice pomiędzy nimi łatwo zauważyć po powiększeniu poszczególnych obrazków. Wydaje mi się, że na tablecie z Androidem wykorzystywany jest font Roboto. Niepewność bierze się z racji niewielkich możliwości konfiguracji systemu mobilnego, na jakie zdecydował się producent, toteż nigdzie nie jest to zaznaczone. Dla tytułu strony i nagłówków wybrałem font szeryfowy Liberation, a dla tekstu bezszeryfowy z tej samej rodziny bowiem wyczytałem, że fonty bezszeryfowe (sans) mniej męczą wzrok, skoro nie posiadają ozdobników. Przynajmniej na ekranach o niskiej rozdzielczości. Używam niestety 1366x768.

Uważam, że fonty szeryfowe w nagłówkach, a bezszeryfowe w całym tekście, uatrakcyjniają wizualnie tekst. Za sprawą kontrastu pomiędzy nimi. Następnie szeryfowe logo wygląda intrygująco, ponadto czudysłowy są teraz lepiej wydrukowane na ekranie, w moim odczuciu. Wygodniej także się czyta, korzystniej z pewnością wygląda litera D. Jakby litery były teraz istotnie, w tejże odrobinie, szersze, nie aż tak wydłużone.

Jako że nie umiem rysować to uznałem, że kreatywnym wyjściem z sytuacji będzie zdecydowanie się na odpowiedni font i grecki alfabet. Był to dobry pomysł, z tego co widzę.

Konfigurowanie tematu Next, z układem Gemini, na silniku Hexo.

Aby mieć pewność, że τέχνη wyświetla się tak samo na każdym systemie, urządzeniu czy w jakiejkolwiek przeglądarce WWW, to musiałem dodać ręcznie swoje fonty do plików konfiguracyjnych wybranego przeze mnie tematu. Oznacza to, że fonty są każdorazowo pobierane z serwera, gdy ktoś mnie odwiedza, na jakim znajduje się moja strona, co zwiększa obciążenie dostępnego mi transferu. Jednakże warto! Dużo osób korzysta z Google Fonts, ale nie odnalazłem tam fontów Liberation i pomyślałem, że jak ich usługa padnie, to użytkownik strony będzie „wycofany” (fallback) do krojów pisma jakie ma zainstalowane u siebie, co niekorzystnie wpłynie na odbiór.

Nie wszystko było dla mnie jasne, trochę czasu spędziłem na Google i przeglądałem dokumentację. Wspomnę, że Hexo jest popularne, ale bardziej w Chinach, przez co na GitHubach ludzi, w ich ReadMe!, często widnieją same krzaki. Finalnie ustawiłem fonty metodą prób i błędów. Poniżej parę „instrukcji”, jakie mogą pomóc osobom chcącym uzyskać podobne efekty, przy użyciu analogicznych narzędzi.

Korzystam z alternatywnej metody konfiguracji. To znaczy, że nie edytuję plików w katalogu z tematem, lecz w odpowiednich ścieżkach, przez co domyślne ustawienia są nadpisywane w czasie generowania strony. Ma to tę zaletę, że nie muszę poprawiać plików tematu po każdym git pull! W każdym razie, zależnie od silnika i tematu, występują różnice, jakie należy zaadresować we własnym zakresie (tj. uwzględnić różnice w ścieżkach).

W pierwszej kolejnośc w /source utworzyłem dwa katalogi - fonts i _data. Do pierwszego wypakowałem fonty, w drugim utworzyłem dwa pliki - styles.styl i variables.styl. Następnie włączyłem je w pliku konfiguracyjnym tematu - _config.next.yml:

_config.next.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
#head: source/_data/head.njk
#header: source/_data/header.njk
#sidebar: source/_data/sidebar.njk
#postMeta: source/_data/post-meta.njk
#postBodyEnd: source/_data/post-body-end.njk
#footer: source/_data/footer.njk
#bodyEnd: source/_data/body-end.njk
variable: source/_data/variables.styl
#mixin: source/_data/mixins.styl
style: source/_data/styles.styl

W tym samym pliku ustawiłem też fonty (w tym momencie będę one działały tylko na naszym komputrze, strona jeszcze nie wie gdzie są fonty):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
font:
enable: false

# Uri of fonts host, e.g. https://fonts.googleapis.com (Default).
host:

# Font options:
# `external: true` will load this font family from `host` above.
# `family: Times New Roman`. Without any quotes.
# `size: x.x`. Use `em` as unit. Default: 1 (16px)

# Global font settings used for all elements inside <body>.
global:
external: true
family: Liberation Sans #Lato
size:

# Font settings for site title (.site-title).
title:
external: true
family: Liberation Serif
size:

# Font settings for headlines (<h1> to <h6>).
headings:
external: true
family: Liberation Serif
size:

# Font settings for posts (.post-body).
posts:
external: true
family: Liberation Sans

# Font settings for <code> and code blocks.
codes:
external: true
family: DejaVu Sans Mono

variables.styl był mi potrzebny tylko po to, aby zwiększyć rozmiar nazwy strony:

1
2
$font-size-title                = (hexo-config('font.enable') and hexo-config('font.title.size') is a 'unit') ? unit(hexo-config('font.title.size'), em) : 4em;

@font-face

W pliku styles.styl wpisałem następujące (teraz strona już wie gdzie są fonty):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
@font-face {
font-family: 'Liberation Sans';
src: url('../fonts/LiberationSans-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Liberation Sans';
src: url('../fonts/LiberationSans-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: 'Liberation Sans';
src: url('../fonts/LiberationSans-BoldItalic.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}

@font-face {
font-family: 'Liberation Sans';
src: url('../fonts/LiberationSans-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}

@font-face {
font-family: 'Liberation Serif';
src: url('../fonts/LiberationSerif-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Liberation Serif';
src: url('../fonts/LiberationSerif-Bold.ttf') format('truetype');
font-weight: bold;;
font-style: normal;
}

@font-face {
font-family: 'Liberation Serif';
src: url('../fonts/LiberationSerif-BoldItalic.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}

@font-face {
font-family: 'Liberation Serif';
src: url('../fonts/LiberationSerif-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}

@font-face {
font-family: 'DejaVu Sans Mono';
src: url('../fonts/DejaVuSansMono.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'DejaVu Sans Mono';
src: url('../fonts/DejaVuSansMono-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: 'DejaVu Sans Mono';
src: url('../fonts/DejaVuSansMono-BoldOblique.ttf') format('truetype');
font-weight: bold;
font-style: oblique;
}

@font-face {
font-family: 'DejaVu Sans Mono';
src: url('../fonts/DejaVuSansMono-Oblique.ttf') format('truetype');
font-weight: normal;
font-style: oblique;
}

Unexpected EOS!

W czasie parsowania CSS może wystąpić błąd - Unexpected EOS. Objawia się on na ogół, gdy przemieszamy spacje z tabulacjami lub zapomnimy o nawiasie. Poniżej widać błąd tego typu. Pierwotnie byłem przekonany, że to jakiś błąd związany z rysowaniem na Haiku i rozpocząłem googlefest… trzy godziny później zauważyłem, że jednak brakuje nawiasu. Wydruki w Terminalu nie były zbyt pomocne. Zwracały, że problem występuje w ostatniej linii!!!

Brakujący nawias }.