Суспільне Надбання: 1 Translate to Ukrainian 14 files changed, 135 insertions(+), 15 deletions(-)
(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.
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?
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.
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.
Thank you. However, this change did not work as expected. The version you merged into the repository covers too few characters, unlike the version present in the Debian repository or the GNOME website.
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.
In my experience, embedding web fonts into repositories is not very nice to international users, because it tends to lock them into a version with a limited character set and no updates. When I absolutely have to embed a font in the page, for example I did this in a logo generator for Fridays For Future Ukraine chats, I configure my scripts to schedule mirroring the font from a trusted project, such as: https://static.gnome.org/fonts/Cantarell-Regular.otf https://static.gnome.org/fonts/Cantarell-Bold.otf 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.
I have now set Cantarell as the font.
Works fine on my laptop now! Thanks again for your efforts.
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 -3Learn more about email & git
--- 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?