При перезагрузке страницы сбивается межстрочный интервал – ошибки css вёрстки – свойство line-height

Нынче поправлял сайт одной знаменитой блогерше (имени не называю: боюсь преследования)) – так вот, поправлял, скажем так, вёрстку блога: ей кто-то из читателей подсказал, мол, текст при перезагрузках страниц то и дело принимает различный графический вид, попросту – меняется межсточный интервал при переходе от страницы к странице на мобильнике… (говорилось о браузере Опера-Мини).

Скажу честно, сразу мелькнуло подозрение закавыки со свойством line-height, но я как-то о нём подзабыл в процессе… короче взялся за работу…

Чем такие поломки дизайна сайта сложны? а тем, что их нужно отслеживать на реальном девайсе – ни тестерах всяких, но реальном гаджете. Почему? а потому что всякие тестеры на компе естественно имеют мощность используемого компьютера/ браузера! Попросту говоря – многие из тонких дефектов не отследить…

Работа была выполнена. Заказчица довольна: и теперь не теряет многочисленных читателей, которые почитывают её посты по ночам с телефонов))

И если кому-то тема интересна, давайте разбираться: акуна-матата…

 

 

в качестве нерекламы: (хотя всегда нужно сказать пару лестных слов, коли разработчики их заслуживают))

 

 

 

 

Ну ладно – приступим к теме:

 

 

 

 

 

к оглавлению

ошибки css вёрстки – свойство line-height

 

 

 

 

Короче, в итоге около часовых исследований недр сайта на предмет лага (ошибки, бага… как угодно) оказалось виною свойство line-height, а точнее его значение !

 

Что получалось при моих тестах:

При заходе на странички сайта вроде бы всё в порядке… однако, спустя пару перезагрузок – ошибка на лице окна браузера: действительно – расстояние между строк изменилось, стало в два раза шире по вертикали. В принципе можно читать и такой образ текста на мобиле… да и к тому же в мощных браузерах (и конечно же на компах) никаких ошибок не будет видно !! однако, заказчица (да и я) сочли этот экзерсис именно ошибкой, а коли – ошибка, значит нужно решать задачу!

 

 

 

 

И всё-таки почему такие ошибки и нечитаемость браузером происходят??

 

Тут вряд ли стоит винить кого-то конкретно из разработчиков: всего интернета или же конкретного браузера, либо программистов в целом))

 

Кратко:

Опера-мини использует множества своих сторонних серверов, проходя через которые данные сайта обрабатываются и доставляются клиенту (нам с вами) – ввиду чего “браузер” добивается приличных скоростей загрузки… и как следствие приятной работы.

Как нетрудно догадаться, в случаях всяких сокращений возможны какие-то незначительные потери, коли в вёрстке просматриваемого сайта присутствуют ошибки!

 

Так же можно предположить “нечитаемость” всевозможными временными адаптациями языка CSS.

 

И это справедливо: ведь существуют правила языков программирования!! Вот об этих правилах коротенько и потолкуем:

 

 

 

 

 

Такое свойство line-height, в случае применения к блочному элементу, всегда определяет высоту каждой текстовой строки. Однако не следует путать с межстрочным расстоянием (меж графическими элементами) в большинстве же графических программ (наподобие Photoshop), которое определяет пространство между строками в абзаце.

Следует запомнить и не забывать, что, несмотря на то, что это значение сво-ства выполняет одну и ту же задачу, а именно интервал между строк текста, выполняется (обрабатывается) это по-разному.

 

 

Свойство line-height использует следующие единицы:

 

 

1. px
2. em
3. %
4. безразмерные числа, вроде 1.5

 

Вот о безразмерных числа свойства и поговорим пристальнее)

 

 

Эти безразмерные значения в основном действуют как проценты. Таким образом – 150% равно 1.5. …последнее является, как понимаете, более компактным и читаемым, а в нашем случае обусловило ошибку нечитаемого экономным вариантом браузером.

 

То есть в шаблоне заказчицы (в файле стилей) свойство  было во всех случаях обозначено в px, что и привело к нечитаемости, а следовательно и ошибке.

 

Мне пришлось полностью прогнать файл стилей и поправить несоответствия.

 

 

Но – неприятность эту, мы пережили…

 

 

 

Знаний для:

 

 

 

к оглавлению

почему важны правила line-height

 

 

 

 

Основной целью line-height является непременное определение комфортного расстояния (отступов) между строк для текста. Поскольку благоприятная удобочитаемость зависит от размера же текста, непременно рекомендуется использовать динамическое значение обусловленное размером текста.

 

Использование px – не рекомендуется, так как пиксели определяют статическое значение данных.

 

 

Однако использование пикселей в некоторых смыслах действительно пригодится – например, если вы хотите выровнять текст по вертикали в соответствии с иным каким-то элементом блога/сайта, а не в зависимости от размера шрифта!

 

Поскольку применение % или em может дать неожиданный результат, рекомендуемый метод связан с безразмерными числами:

 

для основного текста line-height рекомендуется как 1.5 от размера текста;

для заголовков line-height рекомендуется значение 1.2.

 

 

body { font-size: 16px; line-height: 1.5; }

 

 

Обработанная и вычисленная высота строки будет в нашем примере 16** 1.5 = 24px

 

 

 

к оглавлению

наследование свойства line-height

 

 

 

К сведению:

Поскольку такое свойство как line-height наследуется дочерними элементами, то оно во всех графических примерах сайта будет оставаться постоянным, независимо от величин, которые font-size впоследствии применяется.

 

 

body { font-size: 16px; line-height: 1.5; }

blockquote { font-size: 18px; }

 

 

К примеру элемент <blockquote> будет иметь высоту строки 27px – полезно знать, ибо значения blockquote некоторые админы применяют в комментариях… следует визуализировать разность от основного текста статей.

 

 

 

На этом занавес представления опускается…
…на рампы пыль печальная ложится…

 

 

...и конечно же, читайте статьи сайта и подписывайтесь:
Делюсь горьким опытом - кое-какими знаниями, для вашего сладкого благополучия))