From ce61d41754b9967a2f3fbb013953b44e80c9b485 Mon Sep 17 00:00:00 2001 From: byrsapty Date: Thu, 27 Aug 2026 23:02:35 +0300 Subject: [PATCH] =?UTF-8?q?=D0=A2=D0=B5=D0=BA=D1=81=D1=82=20=D0=BA=D0=BE?= =?UTF-8?q?=D0=BD=D1=84=D1=96=D0=B3=D1=83:=20=D0=B1=D1=96=D0=BB=D1=8C?= =?UTF-8?q?=D1=88=D0=B5=20=D0=BF=D0=BE=D0=B2=D1=96=D1=82=D1=80=D1=8F=20?= =?UTF-8?q?=D0=BC=D1=96=D0=B6=20=D1=80=D1=8F=D0=B4=D0=BA=D0=B0=D0=BC=D0=B8?= =?UTF-8?q?=20=D0=B9=20=D1=81=D0=B8=D0=BC=D0=B2=D0=BE=D0=BB=D0=B0=D0=BC?= =?UTF-8?q?=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Скарга: «жирний, зливається, текст не видно — просто лінії». На конфігах із довгими схожими рядками (ZTE на 33 тисячі) це перетворювалось на сіру масу. Причина не в кольорі й не в товщині шрифту як такій: світлий текст на майже чорному тлі Windows малює помітно товщим, ніж він є. Типове лікування — -webkit-font-smoothing: antialiased — на Windows у Chrome не працює взагалі, воно лише для macOS. Тому зроблено те, що там справді діє: рядок 22 px замість 20 і невеликий міжлітерний просвіт. Розмір лишився 12 px навмисно: на 33 тисячах рядків кожен зайвий піксель висоти — це ще один екран прокрутки. ROW_H оновлено разом із класом: воно мусить збігатися з розміткою, бо за ним рахується віртуальна прокрутка й позиція рамки на мінікарті. --- web/src/components/ConfigViewer.tsx | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/web/src/components/ConfigViewer.tsx b/web/src/components/ConfigViewer.tsx index 31df0fe..0b3717d 100644 --- a/web/src/components/ConfigViewer.tsx +++ b/web/src/components/ConfigViewer.tsx @@ -21,12 +21,24 @@ import { Minimap, buildShape } from './Minimap' * панель версій, і шапку. */ -/** Висота рядка коду. Мусить збігатися з leading-5 у розмітці. */ -export const ROW_H = 20 +/** Висота рядка коду. Мусить збігатися з leading-[22px] у розмітці. */ +export const ROW_H = 22 /** Шрифт коду. Один рядок на всі три місця, де він потрібен, — щоб - * вимірювання ширини символа не розійшлося з тим, що намальовано. */ -export const CODE_FONT = 'font-mono text-[12px] leading-5' + * вимірювання ширини символа не розійшлося з тим, що намальовано. + * + * Було `text-[12px] leading-5` (20 px на рядок) — і на конфігах, де + * рядки довгі та схожі один на одного, це зливалось у сіру масу. + * Причина не в кольорі: світлий текст на майже чорному тлі Windows + * малює помітно товщим, ніж є, а типове лікування + * (-webkit-font-smoothing) там не працює взагалі — воно лише для macOS. + * + * Тому додано те, що на Windows справді діє: більше повітря. Рядок + * 22 px замість 20, і невеликий міжлітерний просвіт — символи + * перестають чіплятись один за одного. Розмір лишився 12 px: на + * 33 тисячах рядків ZTE кожен зайвий піксель висоти — це ще один + * екран прокрутки. */ +export const CODE_FONT = 'font-mono text-[12px] leading-[22px] tracking-[0.02em]' /** Останній рядок, що починається не нижче за y. */ export function rowAt(offsets: Int32Array, y: number): number {