Как основать формулу изменения размера текста на значении rem? - PullRequest
Новая
       32

Как основать формулу изменения размера текста на значении rem?

0 голосов
/ 21 октября 2019

Я изучал размер шрифта и нашел много примеров в Интернете. В основном это выглядит так, как будто все они сводятся к формуле линейной интерполяции: https://en.wikipedia.org/wiki/Linear_interpolation.

T = T₁ + ((V - V₁) / (V₂ - V₁)) * (T₂ - T₁)

Где:
T = размер шрифта выходного текста
T₁ = минимальный размер шрифта текста
T₂ = максимальный размер шрифта текста
V = 100vw (текущая ширина области просмотра)
V₁ = минимальная ширина области просмотра
V₂ = максимальная ширина области просмотра

Это прекрасно работает для пикселей, и я реализовал это с помощью calc (): 

calc(${t_1}px + ((100vw - ${v_1}px) / (${v_2} - ${v_1})) * (${t_2} - ${t_1}));

Примечание: значения заполняются динамически, а вывод CSS генерируется в PHP, но я не думаю, что это как-то повлияет на этот вопрос.

Теперь я надеюсь использовать эту же формулу, но на ее основев текущем размере корневого шрифта браузера. 

calc(${t_1}rem + ((100vw - ${v_1}px) / (${v_2} - ${v_1})) * ((${t_2} - ${t_1}) * 1rem));

Использование того же CSS calc (), что и в первом примере, и замена в rem на значения px будут работать, за исключением того, что я сталкиваюсь с проблемами, когда пытаюсь умножитьpx * rem, что невозможно. Если бы я мог убрать единицы из значения rem здесь ... ((${t_2} - ${t_1}) * 1rem)), это бы решило мою проблему, но это не представляется возможным в CSS? Независимо от того, как я переставляю формулу, я представляю одну единицу со значением 100vw, а другую - со значением rem.

Мой текущий уродливый обходной путь - использовать javascript для получения текущего размера и места шрифта rootэто значение в переменную CSS после удаления ее единицы. 

var rootFontSize = window.getComputedStyle(document.documentElement, null).getPropertyValue('font-size');
var rootFontVal = parseFloat(rootFontSize);
document.documentElement.style.setProperty('--rem-val', rootFontVal);

Затем используйте эту переменную CSS в моей формуле, например: 

calc(${t_1}rem + ((100vw - ${v_1}px) / (${v_2} - ${v_1})) * ((${t_2} - ${t_1}) * var(--rem-val)));

Это работает, как и ожидалось, и размер жидкого текстатеперь в зависимости от размера корневого шрифта браузера. Но .. Я бы очень хотел избавиться от JavaScript. Есть ли какой-либо другой способ вырезать единицы или получить необработанное значение 1rem в CSS? Или способ изменить формулу, чтобы исключить необходимость умножения единиц?

...