Use boring font for consistent non-latin script appearance based on page heuristics

src/lang/ar.js

@@ -5,6 +5,7 @@ if (!constants.language_dev) Object.assign(data, require("./en.js"))
 
 ;(() => {
 	data.meta_direction = "rtl"
+	data.meta_use_boring_font = true
 
 	data.go_to_profile = "اذهب إلى الملف الشخصي"
 	data.go_to_post = "اذهب إلى المنشور"

src/lang/bg.js

@@ -5,6 +5,7 @@ if (!constants.language_dev) Object.assign(data, require("./en.js"))
 
 ;(() => {
 	data.meta_direction = "ltr"
+	data.meta_use_boring_font = true
 
 	data.go_to_profile = "Виж профил"
 	data.go_to_post = "Виж публикация"

src/lang/fa.js

@@ -5,6 +5,7 @@ if (!constants.language_dev) Object.assign(data, require("./en.js"))
 
 ;(() => {
 	data.meta_direction = "rtl"
+	data.meta_use_boring_font = true
 
 	data.go_to_profile = "برو به نمایه"
 	data.go_to_post = "برو به پست"

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)

src/lang/ru.js

@@ -5,6 +5,7 @@ if (!constants.language_dev) Object.assign(data, require("./en.js"))
 
 ;(() => {
 	data.meta_direction = "ltr"
+	data.meta_use_boring_font = true
 
 	data.go_to_profile = "Перейти в профиль"
 	data.go_to_post = "Перейти в публикацию"

src/lang/uk.js

@@ -0,0 +1,114 @@
+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.meta_use_boring_font = true
+
+	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

src/lib/structures/BaseUser.js

@@ -1,6 +1,7 @@
 const constants = require("../constants")
 const {proxyProfilePic} = require("../utils/proxyurl")
 const {structure} = require("../utils/structuretext")
+const {isLatin} = require("../utils/islatin")
 
 const rewriters = {
 	rewrite_youtube: ["youtube.com", "www.youtube.com", "m.youtube.com", "youtu.be"],
@@ -52,6 +53,11 @@ class BaseUser {
 		return structure(this.data.biography)
 	}
 
+	bioIsLatin() {
+		if (typeof this.data.biography !== "string") return true
+		return isLatin(this.data.biography)
+	}
+
 	getTtl(scale = 1) {
 		const expiresAt = this.cachedAt + constants.caching.resource_cache_time
 		const ttl = expiresAt - Date.now()

src/lib/structures/TimelineEntry.js

@@ -5,6 +5,7 @@ const collectors = require("../collectors")
 const {structure, removeTrailingHashtags} = require("../utils/structuretext")
 const TimelineBaseMethods = require("./TimelineBaseMethods")
 const TimelineChild = require("./TimelineChild")
+const {isLatin} = require("../utils/islatin")
 require("../testimports")(collectors, TimelineChild, TimelineBaseMethods)
 
 const rssDescriptionTemplate = compile(`
@@ -138,6 +139,13 @@ class TimelineEntry extends TimelineBaseMethods {
 		else return caption.split("\n")[0].split(". ")[0]
 	}
 
+	captionIsLatin() {
+		// the caption introduction is likely to be more meaningful for analysis than the full caption.
+		const introduction = this.getCaptionIntroduction()
+		if (typeof introduction !== "string") return true
+		return isLatin(introduction)
+	}
+
 	/**
 	 * Alt text is not available for N2, the caption or a placeholder string will be returned instead.
 	 * @override

src/lib/utils/islatin.js

@@ -0,0 +1,16 @@
+function isLatin(text) {
+	// remove characters from the text that can be used in any script, such as numbers, basic punctuation, and emojis.
+	// the emoji regular expression is from https://stackoverflow.com/a/45138005
+	const textWithoutMultilingual = text.replace(/[ .,?!¿¡#@$&%\/0-9\u{1f300}-\u{1f5ff}\u{1f900}-\u{1f9ff}\u{1f600}-\u{1f64f}\u{1f680}-\u{1f6ff}\u{2600}-\u{26ff}\u{2700}-\u{27bf}\u{1f1e6}-\u{1f1ff}\u{1f191}-\u{1f251}\u{1f004}\u{1f0cf}\u{1f170}-\u{1f171}\u{1f17e}-\u{1f17f}\u{1f18e}\u{3030}\u{2b50}\u{2b55}\u{2934}-\u{2935}\u{2b05}-\u{2b07}\u{2b1b}-\u{2b1c}\u{3297}\u{3299}\u{303d}\u{00a9}\u{00ae}\u{2122}\u{23f3}\u{24c2}\u{23e9}-\u{23ef}\u{25b6}\u{23f8}-\u{23fa}-]/ug, "")
+
+	// avoid dividing by zero
+	if (textWithoutMultilingual.length == 0) return true
+
+	// regular expression from https://stackoverflow.com/a/26900132 - it's close enough for these heuristics.
+	const latinText = textWithoutMultilingual.replace(/[^A-Za-zÀ-ÿ]/g, "")
+
+	// if it's at least 60% latin characters, consider it to be latin.
+	return latinText.length > textWithoutMultilingual.length * 0.6
+}
+
+module.exports.isLatin = isLatin

src/site/pug/home.pug

@@ -3,11 +3,11 @@
 - const ll = lang.get(settings.language)
 
 doctype html
-html
+html(lang=settings.language)
 	head
 		title Bibliogram
 		include includes/head
-	body.homepage
+	body.homepage(class={"use-boring-font": ll.meta_use_boring_font})
 		header
 			h1.banner
 				img.banner-image(src="/static/img/banner-min.svg" alt="Bibliogram")

src/site/pug/post.pug

@@ -46,6 +46,6 @@ html
 			meta(property="og:image:alt" content=firstEntry.getAlt())
 		meta(property="og:site_name" content="Bibliogram")
 
-	body.post-page
+	body.post-page(class={"use-boring-font": !post.captionIsLatin()})
 		main
 			+post(post, false)

src/site/pug/settings.pug

@@ -31,12 +31,12 @@ 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
 		script(src=getStaticURL("html", "/static/js/settings_message.js") type="module")
-	body.settings-page
+	body.settings-page(class={"use-boring-font": ll.meta_use_boring_font})
 		if status && message
 			.status-notice(class=status)= message
 		main.settings
@@ -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, [

src/site/pug/user.pug

@@ -37,7 +37,7 @@ html
 		meta(property="og:image:type" content="image/jpeg")
 		meta(property="og:site_name" content="Bibliogram")
 
-	body
+	body(class={"use-boring-font": !user.bioIsLatin()})
 		nav(class=(settings.display_top_nav ? "always-displayed" : "")).top-nav
 			//- Alt text guidelines from https://axesslab.com/alt-texts/
 			a(href="/").nav-icon-link
@@ -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

src/site/sass/includes/_main.sass

@@ -8,9 +8,17 @@ $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
 
+body.use-boring-font
+	// this is useful so that cyrillic and other scripts don't look conspicuous compared to nearby latin letters.
+	// the use-boring-font class is activated based on the page and heuristics of its contents
+	font-family: sans-serif
+
+input, button, textarea
+	font-family: inherit
+
 summary
 	text-decoration: underline