~cadence/bibliogram-devel

Translate to Ukrainian v1 APPLIED

Суспільне Надбання <k0tyk@autistici.org>
Суспільне Надбання: 1
 Translate to Ukrainian

 14 files changed, 135 insertions(+), 15 deletions(-)
Суспільне Надбання <k0tyk@autistici.org>
(Resending a plaintext copy manually because K9 defaults to HTML, which the list rejects. Sorry for the duplication.)

Currently, any Cyrillic text that includes any Latin character is displayed using a mix of the designer font and the system font. Fragments with links, usernames, organization names, numbers or punctuation marks become distracting for people with health differences sensitive to such things, such as myself. The designer font stands out a lot from the sans-serif default on every major operating system. Cantarell is a part of GNOME and has similar shapes with a good coverage of my language, so I find it a good fit. In other environments without Cantarell, my patch will have the entire page fall back to the sans-serif chosen in the browser settings, which I personally find preferable to a mix of fonts.
> ...become distracting for people with health differences sensitive to
> such things, such as myself. The designer font stands out a lot
Thanks for the explanation, and sorry that I'm only just getting back
to this now. I don't wish to add the `lang` attribute to the `html`
element because that attribute is supposed to describe the entire
document. But in fact, a person with the interface language set to
Ukrainian may be viewing profile pages of people from any country,
writing in any language.

Since the font issue is relevant to the Cyrillic script as a whole
(which can be used for the Bulgarian, Russian, and Ukrainian
languages), I think it would make sense to alter the font used based on
whether the page has a significant proportion of Cyrillic characters.

I can make this change myself, so you don't need to send an updated
patch. I'm just checking with you whether you think it would be a good
idea to do it this way. Do you think this would be good?
Суспільне Надбання <k0tyk@autistici.org>
I think setting the site font according to
the language configured by the user
(ideally derived from HTTP headers, but
I have a vague guess that it might reduce
privacy) with an attribute such as
data-ui-lang rather than lang, and
hardcoding the list of the languages
supported by the designer font at the UI
translation and testing time, would be
reliable enough.

However, I am interested in testing your
idea and reading your code solution.
Please count all the non-Latin characters,
not only Cyrillic, in both the posts and the
user interface. If the page has a
significant amount (also interested in the
heuristics guessing what amount is
significant) of neither, try sans-serif only.
Okay, I did it. Here's my changes: 
https://git.sr.ht/~cadence/bibliogram/commit/7461f25ca97bcb894e3fa5f54a010905ebb44f26

Test pages used:

- https://bibliogram.art homepage and settings page should base it on 
language settings
- https://bibliogram.art/u/suspilne.news/ user account with cyrillic 
script bio should use default font for everybody viewing
- https://bibliogram.art/p/CdDis9_o3Qf post starting with cyrillic 
script sentence should use default font for everybody viewing
- https://bibliogram.art/p/CMu36uph4qH post starting with latin script 
should use stylish font for everybody viewing

Hope you like it.
Суспільне Надбання <k0tyk@autistici.org>
Thank you. I set up a local server and
confirmed that your changes work.

I really wish you kept the Cantarell
suggestion, because the words are often
too wide with defaults; I chose the font
because it fits well, not just to choose
something. Notice how three different
words in /u/solidaritykitchenkyiv get split
between lines: Солідарнос/ті in the title,
solidaritykitchenky/iv in the link and
допомог/ти in the description. If you
find my font suggestion unacceptable,
please change the column width from
235px to 320px (300px at least).
Okay, let's use Cantarell! Hopefully I can make this change today.
From what I'm reading online, Cantarell is not preinstalled on most 
computers, right? In that case, its files should include it in Bibliogram 
just like how the stylish font is included.
I have now set Cantarell as the font.
> I understand that while the GNOME build covers my language, it might
> similarly exclude people from other countries. To avoid misdirecting
> more of your time, I have to ask you to revert the latest change for
> now and try customizing the grid width instead.
Hmmmph, how annoying.

In my latest change I have included the Gnome font files. I can always
undo this later.

Judging by the font glyph viewer at
https://torinak.com/font/lsfont.html?#https://static.gnome.org/fonts/Cantarell-Regular.otf
it seems like the Gnome font file only includes Latin and Cyrillic
scripts.

Still, I figure that this should be preferred over the browser's
default font for the majority of situations. If I receive another
complaint from somebody who uses another script and thinks the font
choice is poor, I can try to find a solution that works for more
scripts.

But I hope this is good enough for now, even if it's not fantastic.

(Oh, and I did increase the left column width slightly a couple of
commits ago. This width was chosen because 6 photos can safely fit
across the screen on a 1920 pixel wide display. I could play with the
sizes again in the future, if necessary.)
Суспільне Надбання <k0tyk@autistici.org>
Works fine on my laptop now!
Thanks again for your efforts.
Export patchset (mbox)
How do I use this?

Copy & paste the following snippet into your terminal to import this patchset into git:

curl -s https://lists.sr.ht/~cadence/bibliogram-devel/patches/30756/mbox | git am -3
Learn more about email & git

[PATCH] Translate to Ukrainian Export this patch

Суспільне Надбання <k0tyk@autistici.org>
---
 src/lang/index.js                 |   2 +-
 src/lang/uk.js                    | 113 ++++++++++++++++++++++++++++++
 src/site/pug/404.pug              |   2 +-
 src/site/pug/age_gated.pug        |   2 +-
 src/site/pug/blocked.pug          |   2 +-
 src/site/pug/blocked_december.pug |   2 +-
 src/site/pug/blocked_graphql.pug  |   2 +-
 src/site/pug/friendlyerror.pug    |   2 +-
 src/site/pug/home.pug             |   2 +-
 src/site/pug/post.pug             |   2 +-
 src/site/pug/quota_reached.pug    |   2 +-
 src/site/pug/settings.pug         |   5 +-
 src/site/pug/user.pug             |   4 +-
 src/site/sass/includes/_main.sass |   8 ++-
 14 files changed, 135 insertions(+), 15 deletions(-)
 create mode 100644 src/lang/uk.js

diff --git a/src/lang/index.js b/src/lang/index.js
index f644c63..ee98d90 100644
--- a/src/lang/index.js
+++ b/src/lang/index.js
@@ -7,7 +7,7 @@ class Lang {

		this.backing.set("base", require("./base"))

		for (const code of ["ar", "bg", "de", "en", "en-us", "es", "fa", "fr", "gl", "id", "it", "ms", "pl", "ru", "tr"]) {
		for (const code of ["ar", "bg", "de", "en", "en-us", "es", "fa", "fr", "gl", "id", "it", "ms", "pl", "ru", "tr", "uk"]) {
			// Assign lang
			const data = require(`./${code}`)
			this.backing.set(code, data)
diff --git a/src/lang/uk.js b/src/lang/uk.js
new file mode 100644
index 0000000..f7ba0f8
--- /dev/null
+++ b/src/lang/uk.js
@@ -0,0 +1,113 @@
const data = {...require("./base")}
const {pug} = require("./utils/functions")
const constants = require("../lib/constants")
if (!constants.language_dev) Object.assign(data, require("./en.js"))

;(() => {
	data.meta_direction = "ltr"

	data.go_to_profile = "Перейти до профілю"
	data.go_to_post = "Перейти до допису"
	data.go_username_or_url = "Псевдонім чи URL"
	data.go_shortcode_or_url = "Ідентифікатор чи URL"
	data.go_button = "Перейти"
	data.about_bibliogram_header = "Про Bibliogram"
	data.pug_about_bibliogram_content = pug(`
		p.
			Bibliogram — це вебсайт, який показує дані загальнодоступних профілів Instagram на
			більш дружній сторінці, котра завантажується швидше, дає змогу зберегти зображення, вилучає
			рекламу, генерує RSS-стрічки й не вимагає зареєструватися. #[a(href=(link_to_featured_profiles ? "#featured-profiles" : "/u/instagram")).example-link Перегляньте зразок.]
		p.
			Bibliogram #[em не] дає змоги анонімно дописувати, оцінювати, коментувати чи відстежувати;
			не показує приватних профілів і не зберігає видалених дописів.
	`)
	data.experiencing_problems_header = "Виникли труднощі з Bibliogram?"
	data.t_read_more_here = "Прочитайте допис."
	data.about_this_instance_header = "Про цей сервер"
	data.onion_site_available = "Доступний onion-сайт"
	data.t_settings = "Параметри"
	data.t_privacy_policy = "Політика приватності"
	data.has_not_written_privacy_policy = "Ще нема політики приватності"
	data.instance_not_blocked = "Сервер не заблоковано"
	data.instance_partially_blocked = "Сервер частково заблоковано"
	data.instance_blocked = "Сервер заблоковано"
	data.rss_disabled = "RSS-стрічки вимкнено"
	data.rss_enabled = "RSS-стрічки ввімкнено"
	data.external_links_header = "Зовнішні посилання"
	data.source_link = "Вільний код на sourcehut"
	data.matrix_link = "Matrix-кімната обговорень"
	data.instances_link = "Інші сервери Bibliogram"
	data.contact_link = "Написати розробниці"
	data.featured_profiles_header = "Цікаві профілі"
	data.featured_profiles_whats_this = "Що це?"
	data.html_featured_profiles_disclaimer = pug(`
		p Команда супроводу цього вебсайту особисто вважає ці профілі вартими уваги.
		p Ці заохочення не стосуються проєкту Bibliogram.
	`)()
	data.verified_badge_title = "Звірено"
	data.verified_badge_alt = "Звірено."
	data.fn_post_counter_label = n =>
		n % 10 === 1 && n % 100 !== 11 ? "допис"
		: n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20) ? "дописи"
		: "дописів"
	data.outgoing_follows_counter_label = "Відстежує:"
	data.incoming_follows_counter_label = "Підписок:"
	data.quota_left = "Залишок квоти:"
	data.t_home = "Домівка"
	data.tab_timeline = "Стрічка"
	data.tab_igtv = "IGTV"
	data.next_page_button = "Наступна сторінка"
	data.next_page_button_loading = "Завантаження..."
	data.profile_is_private_notice = "Профіль приватний."
	data.no_posts_notice = "Дописів нема."
	data.no_more_posts_notice = "Всі дописи переглянуто."
	data.fn_page_divider = number => `Сторінка ${number}`
	data.pug_post_timestamp = pug(`
		| Розміщено #[time(datetime=post.date.toISOString() data-local-date)= post.getDisplayDate()].
	`)
	// settings
	data.t_features = "Функціонал"
	data.t_language = "Мова"
	data.save_data = "Зберігати дані"
	data.t_automatic = "Автоматично"
	data.t_off = "Вимкнено"
	data.lazy_load = "Ліниво"
	data.t_full = "Повністю"
	data.rewrite_youtube = "Домен YouTube"
	data.rewrite_twitter = "Домен Twitter"
	data.remove_trailing_hashtags = "Кінцеві риски"
	data.t_hide = "Ховати"
	data.link_hashtags = "Хештеги"
	data.t_clickable = "Посилання"
	data.show_comments = "Коментарі"
	data.t_display = "Показувати"
	data.fast_navigation = "Навігація"
	data.t_enabled = "Прискорена"
	data.infinite_scroll = "Безмежне прокручування"
	data.t_normal = "Усталено"
	data.t_eager = "Охоче"
	data.t_manual = "Вручну"
	data.t_appearance = "Оформлення"
	data.t_theme = "Тема"
	data.display_top_nav = "Верхня панель"
	data.t_always = "Завжди"
	data.timeline_columns = "Колонки стрічки"
	data.t_dynamic = "Динамічно"
	data.three_columns = "3 колонки"
	data.four_columns = "4 колонки"
	data.six_columns = "6 колонок"
	data.caption_side = "Текст"
	data.left_caption = "Ліворуч (Bibliogram)"
	data.right_caption = "Праворуч (Instagram)"
	data.display_alt_text = "Альтернативний текст"
	data.t_return = "Назад"
	data.t_save = "Зберегти"
	data.save_and_return = "Зберегти й назад"
	data.pug_restore_sync_settings = pug(`
		| Щоб згодом відновити чи синхронізувати параметри, #[a(href="/applysettings/"+token)#restore-link зробіть закладкою це посилання.]
	`)
	data.settings_saved = "Збережено."

})()

module.exports = data
diff --git a/src/site/pug/404.pug b/src/site/pug/404.pug
index ff38cd4..4963f24 100644
--- a/src/site/pug/404.pug
+++ b/src/site/pug/404.pug
@@ -3,7 +3,7 @@
include includes/error

doctype html
html
html(lang=settings.language)
	head
		title Not found | Bibliogram
		include includes/head
diff --git a/src/site/pug/age_gated.pug b/src/site/pug/age_gated.pug
index b9e10e1..7295240 100644
--- a/src/site/pug/age_gated.pug
+++ b/src/site/pug/age_gated.pug
@@ -1,7 +1,7 @@
include includes/error.pug

doctype html
html
html(lang=settings.language)
	head
		title= `Restricted profile | Bibliogram`
		include includes/head
diff --git a/src/site/pug/blocked.pug b/src/site/pug/blocked.pug
index d02892d..93bfd43 100644
--- a/src/site/pug/blocked.pug
+++ b/src/site/pug/blocked.pug
@@ -3,7 +3,7 @@
include includes/error.pug

doctype html
html#bibliogram-identifier-blocked
html(lang=settings.language)#bibliogram-identifier-blocked
	head
		title= `Blocked | Bibliogram`
		include includes/head
diff --git a/src/site/pug/blocked_december.pug b/src/site/pug/blocked_december.pug
index aaee973..bba9075 100644
--- a/src/site/pug/blocked_december.pug
+++ b/src/site/pug/blocked_december.pug
@@ -1,7 +1,7 @@
include includes/error.pug

doctype html
html
html(lang=settings.language)
	head
		title= `Blocked | Bibliogram`
		include includes/head
diff --git a/src/site/pug/blocked_graphql.pug b/src/site/pug/blocked_graphql.pug
index b3fb112..a4bc87b 100644
--- a/src/site/pug/blocked_graphql.pug
+++ b/src/site/pug/blocked_graphql.pug
@@ -1,7 +1,7 @@
include includes/error.pug

doctype html
html
html(lang=settings.language)
	head
		title= `Blocked | Bibliogram`
		include includes/head
diff --git a/src/site/pug/friendlyerror.pug b/src/site/pug/friendlyerror.pug
index f03b5bb..a2924eb 100644
--- a/src/site/pug/friendlyerror.pug
+++ b/src/site/pug/friendlyerror.pug
@@ -3,7 +3,7 @@
include includes/error.pug

doctype html
html
html(lang=settings.language)
	head
		title= `${title} | Bibliogram`
		include includes/head
diff --git a/src/site/pug/home.pug b/src/site/pug/home.pug
index b0b9cf9..e226bac 100644
--- a/src/site/pug/home.pug
+++ b/src/site/pug/home.pug
@@ -3,7 +3,7 @@
- const ll = lang.get(settings.language)

doctype html
html
html(lang=settings.language)
	head
		title Bibliogram
		include includes/head
diff --git a/src/site/pug/post.pug b/src/site/pug/post.pug
index 95e648d..d724442 100644
--- a/src/site/pug/post.pug
+++ b/src/site/pug/post.pug
@@ -5,7 +5,7 @@
include includes/post

doctype html
html
html(lang=settings.language)
	head
		title= title
		include includes/head
diff --git a/src/site/pug/quota_reached.pug b/src/site/pug/quota_reached.pug
index 85b1e49..05f6c67 100644
--- a/src/site/pug/quota_reached.pug
+++ b/src/site/pug/quota_reached.pug
@@ -3,7 +3,7 @@
include includes/error.pug

doctype html
html
html(lang=settings.language)
	head
		title= `Quota reached | Bibliogram`
		include includes/head
diff --git a/src/site/pug/settings.pug b/src/site/pug/settings.pug
index 0f5f513..ffac7b5 100644
--- a/src/site/pug/settings.pug
+++ b/src/site/pug/settings.pug
@@ -31,7 +31,7 @@ mixin select(id, description, disabled, options)
				option(value=option.value selected=(option.value === settings[id]))= option.text

doctype html
html(dir=ll.meta_direction)
html(dir=ll.meta_direction, lang=settings.language)
	head
		title= `${ll.t_settings} | Bibliogram`
		include includes/head
@@ -61,7 +61,8 @@ html(dir=ll.meta_direction)
						{value: "ms", text: "Bahasa Melayu"},
						{value: "pl", text: "Polski"},
						{value: "ru", text: "Русский"},
						{value: "tr", text: "Türkçe"}
						{value: "tr", text: "Türkçe"},
						{value: "uk", text: "Українська"}
					])

					+select("save_data", ll.save_data, true, [
diff --git a/src/site/pug/user.pug b/src/site/pug/user.pug
index 796e9af..2a90b9e 100644
--- a/src/site/pug/user.pug
+++ b/src/site/pug/user.pug
@@ -15,7 +15,7 @@ mixin verified-badge(classes)
	img.verified-badge(class=classes src=getStaticURL("html", "/static/img/verified.svg") width=19 height=19 alt=ll.verified_badge_alt title=ll.verified_badge_title)

doctype html
html
html(lang=settings.language)
	head
		if user.data.full_name
			title= `${user.data.full_name} (@${user.data.username}) | Bibliogram`
@@ -74,7 +74,7 @@ html
						if selectedTimeline.entryCount != undefined
							div.profile-counter
								| #[span(data-numberformat=selectedTimeline.entryCount).count #{numberFormat(selectedTimeline.entryCount)} ]
								= ll.post_counter_label
								= ll.fn_post_counter_label ? ll.fn_post_counter_label(selectedTimeline.entryCount) : ll.post_counter_label
						if followerCountsAvailable
							if user.following != undefined
								div.profile-counter
diff --git a/src/site/sass/includes/_main.sass b/src/site/sass/includes/_main.sass
index cb73507..4e87e01 100644
--- a/src/site/sass/includes/_main.sass
+++ b/src/site/sass/includes/_main.sass
@@ -8,9 +8,15 @@ $theme: () !default
	font-display: swap
	src: url(/static/fonts/bariol.woff2) format("woff2"), url(/static/fonts/bariol.ttf) format("truetype")

body, input, button, textarea
body
	font-family: "Bariol", sans-serif

[lang="uk"] body // consistent cyrillic
	font-family: "Cantarell", sans-serif

input, button, textarea
	font-family: inherit

summary
	text-decoration: underline

-- 
2.35.1
Thanks for the translation! Could you tell me more about the Cantarell 
font, please, and why it is necessary? What does the page look like 
without it? What is the problem?