Почему переносится текст?
От: Евгений Музыченко Франция https://software.muzychenko.net/ru
Дата: 14.02.19 20:40
Оценка:
Chrome и Safari почему-то упорно переносят текст, который в любом случае поместился бы в одну строку (пример). Переносят даже в том случае, если его заменить на "Header text here", что требует еще меньше пространства по ширине. Наблюдается на десктопных и мобильных версиях.

Методом тыка обнаружил, что причина в процентном указании отступа:

#SiteTitle p {
  margin: 0 5%;
}

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

Это глюк движка WebKit, или какая-то неявная особенность flex?
chrome safari webkit margin перенос текст
Re: Почему переносится текст?
От: kov_serg Россия  
Дата: 15.02.19 07:32
Оценка:
Здравствуйте, Евгений Музыченко, Вы писали:

ЕМ>Chrome и Safari почему-то упорно переносят текст, который в любом случае поместился бы в одну строку (пример). Переносят даже в том случае, если его заменить на "Header text here", что требует еще меньше пространства по ширине. Наблюдается на десктопных и мобильных версиях.


ЕМ>Методом тыка обнаружил, что причина в процентном указании отступа:


ЕМ>
ЕМ>#SiteTitle p {
ЕМ>  margin: 0 5%;
ЕМ>}
ЕМ>

ЕМ>Если заменить отступы на абсолютные — переноса не происходит. Но вся фишка в том, что и процентные отступы вычисляются правильно (видно в инспекторах), и в любом случае получаются узкими.
А если добавить
#SiteTitle { border: solid red 1px; }

Что показывает?
Re[2]: Почему переносится текст?
От: Евгений Музыченко Франция https://software.muzychenko.net/ru
Дата: 15.02.19 20:15
Оценка:
Здравствуйте, kov_serg, Вы писали:

_>А если добавить

_>
_>#SiteTitle { border: solid red 1px; }
_>

_>Что показывает?

То же самое, но в рамке.

Re[3]: Почему переносится текст?
От: kov_serg Россия  
Дата: 15.02.19 20:55
Оценка:
Здравствуйте, Евгений Музыченко, Вы писали:

ЕМ>То же самое, но в рамке.


ЕМ>Image: header1.png

Это габариты дива в котором ваша надпись лежит.
Теперь добавте такое:
#SiteTitle p {
  margin: 0 -5% 0 5%;
}
Re[4]: Почему переносится текст?
От: Евгений Музыченко Франция https://software.muzychenko.net/ru
Дата: 15.02.19 21:15
Оценка:
Здравствуйте, kov_serg, Вы писали:

_>Это габариты дива в котором ваша надпись лежит.


Ну да, это и в инспекторе видно.

Вопрос в том, почему у div'а именно такие габариты. Строка короткая, справа до черта свободного места — из каких соображений WebKit решает, что ее нужно перенести? Это вытекает из какой-то спецификации, или просто волюнтаризм движка, или баг в его коде? Абсолютное-то значение margin к переносу не приводит.

_>Теперь добавте такое:

_>
_>#SiteTitle p {
_>  margin: 0 -5% 0 5%;
_>}
_>


С таким вариантом margin выглядит так:

Re[5]: Почему переносится текст?
От: kov_serg Россия  
Дата: 15.02.19 21:47
Оценка:
Здравствуйте, Евгений Музыченко, Вы писали:

ЕМ>Ну да, это и в инспекторе видно.


ЕМ>Вопрос в том, почему у div'а именно такие габариты. Строка короткая, справа до черта свободного места — из каких соображений WebKit решает, что ее нужно перенести? Это вытекает из какой-то спецификации, или просто волюнтаризм движка, или баг в его коде? Абсолютное-то значение margin к переносу не приводит.

В спецификации примерно такое:
'margin-top', 'margin-bottom', 'margin-right', 'margin-left'
    Percentages:      refer to width of containing block
...
9.1.2 Containing blocks

In CSS 2.1, many box positions and sizes are calculated with respect to
the edges of a rectangular box called a containing block. In general, 
generated boxes act as containing blocks for descendant boxes; we say 
that a box "establishes" the containing block for its descendants. 
The phrase "a box's containing block" means "the containing block in 
which the box lives," not the one it generates.

А просто margin-left: 2em не устроит?
или
 margin: 0;
 text-indent: 2em;
Отредактировано 15.02.2019 21:49 kov_serg . Предыдущая версия .
Re[6]: Почему переносится текст?
От: Евгений Музыченко Франция https://software.muzychenko.net/ru
Дата: 16.02.19 09:54
Оценка:
Здравствуйте, kov_serg, Вы писали:

_>А просто margin-left: 2em не устроит?

_>или
_>
_> margin: 0;
_> text-indent: 2em;
_>


Да можно и так, но это ведь тоже относительная величина, влияющая на итоговый размер и самого элемента, и его контейнера. Спецификации как-то определяют точный порядок вычисления размера элемента? Поскольку это чаще всего итеративный процесс — определяются ли порядок и количество итераций? Или, на худой конец, существуют ли более-менее официальные тестовые примеры, на которых можно определить, кто вычисляет правильно, а кто лажается — Gecko или WebKit?
Re: Почему переносится текст?
От: rFLY  
Дата: 21.02.19 09:01
Оценка:
Здравствуйте, Евгений Музыченко, Вы писали:
указании отступа:

ЕМ>
ЕМ>#SiteTitle p {
ЕМ>  margin: 0 5%;
ЕМ>}
ЕМ>

ЕМ>Если заменить отступы на абсолютные — переноса не происходит. Но вся фишка в том, что и процентные отступы вычисляются правильно (видно в инспекторах), и в любом случае получаются узкими.

ЕМ>Это глюк движка WebKit, или какая-то неявная особенность flex?

Нет, в Edge также. Но вот подумай сам — процент от какой величины ты пытаешься задать?
Но, если в твоем случае допустимо, то можно заменить margin на padding и тогда перенос пропадет
Отредактировано 21.02.2019 10:39 rFLY . Предыдущая версия .
Re[2]: Почему переносится текст?
От: Евгений Музыченко Франция https://software.muzychenko.net/ru
Дата: 21.02.19 10:14
Оценка:
Здравствуйте, rFLY, Вы писали:

FLY>подумай сам — процент от какой величины ты пытаешься задать?


От ширины контейнера, вестимо. Понятное дело, что такой отступ сам по себе влияет на ширину контейнера, поэтому требует дополнительной итерации для вычисления. Gecko эту итерацию делает, а WebKit — нет.

Существует ли способ однозначно понять, как должна обрабатываться подобная конструкция? Или в CSS до сих пор, как и двадцать лет назад, преобладает интуитивный подход?
Re[3]: Почему переносится текст?
От: Слава  
Дата: 21.02.19 10:17
Оценка:
Здравствуйте, Евгений Музыченко, Вы писали:

ЕМ>Существует ли способ однозначно понять, как должна обрабатываться подобная конструкция? Или в CSS до сих пор, как и двадцать лет назад, преобладает интуитивный подход?


Предлагаю сразу перенести тему в "Политику". И озаглавить её: "Что хуже, C++ или CSS?"
Re[3]: Почему переносится текст?
От: rFLY  
Дата: 21.02.19 11:00
Оценка:
Здравствуйте, Евгений Музыченко, Вы писали:

ЕМ>От ширины контейнера, вестимо.

Но она же у тебя не задана

ЕМ>Понятное дело, что такой отступ сам по себе влияет на ширину контейнера

На ширину контейнера, если мы говорим про его границы, он как раз не влияет, а вот padding влияет. Замени margin на padding и тогда размер контейнера высчитается с учетом отступов от границы. А за ним высчитается и размер родителя.

ЕМ>Существует ли способ однозначно понять, как должна обрабатываться подобная конструкция? Или в CSS до сих пор, как и двадцать лет назад, преобладает интуитивный подход?

В спеках, наверное, должно быть описано от чего и в каком порядке бровсер должен высчитывать размеры элемента.
Re[4]: Почему переносится текст?
От: Евгений Музыченко Франция https://software.muzychenko.net/ru
Дата: 21.02.19 11:55
Оценка:
Здравствуйте, Слава, Вы писали:

С>Предлагаю сразу перенести тему в "Политику". И озаглавить её: "Что хуже, C++ или CSS?"


Для C++ хотя бы есть тесты. Которые, если работают, то компилятор/CRT признаются годными, а если не работают, то негодными. Для HTML/CSS что-то подобное есть? Я пока не нашел. Гуглеж выдает только тесты поддержки тех или иных фич браузером, но как оценивать правильной той поддержки — ХЗ.

Я, собственно, так удивляюсь потому, что с HTML начинал возиться еще в конце 90-х, когда оно все было весьма убого, а потом долгое время использовал только самые базовые возможности, не залезая в более новые. Недавно приспичило разобраться и в новом, и обнаружилось, что особо ничего не поменялось, все тот же зоопарк. В том же C++, в плане стандартизации, за то же время прогресс огромный.
Re[4]: Почему переносится текст?
От: Евгений Музыченко Франция https://software.muzychenko.net/ru
Дата: 21.02.19 12:02
Оценка:
Здравствуйте, rFLY, Вы писали:

ЕМ>>От ширины контейнера, вестимо.


FLY>Но она же у тебя не задана


Она не задана прямо, но косвенно-то задана. Или какие-то положения спецификации требуют в таких случаях задавать именно прямо?

FLY>На ширину контейнера, если мы говорим про его границы, он как раз не влияет


Почему? Вложенные элементы, вместе с их margins, являются частью объемлющего контейнера.

FLY>а вот padding влияет. Замени margin на padding и тогда размер контейнера высчитается с учетом отступов от границы. А за ним высчитается и размер родителя.


Хм, эта особенность описана где-то в спецификации? Я там видел только правила вычисления в зависимости от box-sizing, но это касается только исходных/производных величин, а сами-то контейнеры, как были вложенными, так и остались.

FLY>В спеках, наверное, должно быть описано от чего и в каком порядке бровсер должен высчитывать размеры элемента.


Так вот не нашел. Там вообще все как-то очень неконкретно, что и удивляет своей несерьезностью.
Re[5]: Почему переносится текст?
От: rFLY  
Дата: 22.02.19 11:39
Оценка:
Здравствуйте, Евгений Музыченко, Вы писали:

ЕМ>Почему? Вложенные элементы, вместе с их margins, являются частью объемлющего контейнера.

Я говорил об <p>. С маргинами вообще все непросто, как думаешь какое расстояние между двумя смежными дивами должно быть в следующем примере:
<html>
<body>
<div style="border:solid 1px red;">
<div style="margin: 40px; border:solid 1px blue;">
div1
</div>
<div style="margin: 40px; border:solid 1px green;">
div2
</div></div>
</body>
</html>


ЕМ>Хм, эта особенность описана где-то в спецификации? Я там видел только правила вычисления в зависимости от box-sizing, но это касается только исходных/производных величин, а сами-то контейнеры, как были вложенными, так и остались.

ЕМ>Так вот не нашел. Там вообще все как-то очень неконкретно, что и удивляет своей несерьезностью.

Раз все бровсеры дают одинаковую картинку, то думаю что это где-то в спеках есть.
В твоем случае (если решил использовать flex)можно добавить следующее правило:
#SiteTitle {
  flex-grow: 1;
}
или
#SiteTitle {
  flex-basis: 100%;/*тут по размеру смотри сам*/
}
Re[6]: Почему переносится текст?
От: Евгений Музыченко Франция https://software.muzychenko.net/ru
Дата: 22.02.19 18:47
Оценка:
Здравствуйте, rFLY, Вы писали:

FLY>как думаешь какое расстояние между двумя смежными дивами должно быть в следующем примере:


Про margin collapsing в спецификации как раз есть.

FLY>Раз все бровсеры дают одинаковую картинку, то думаю что это где-то в спеках есть.


В том и дело, что они дают разные картинки. Иначе б я не удивлялся.

FLY>В твоем случае (если решил использовать flex)можно добавить следующее правило:


Да там проще заменить процент на em, все равно отступ приблизительный, только чтоб не слипалось.
Re[5]: Почему переносится текст?
От: c-smile Канада http://terrainformatica.com
Дата: 04.03.19 02:58
Оценка: 12 (1)
Здравствуйте, Евгений Музыченко, Вы писали:

FLY>>Но она же у тебя не задана


ЕМ>Она не задана прямо, но косвенно-то задана. Или какие-то положения спецификации требуют в таких случаях задавать именно прямо?


Да, это требование спецификации.

percent в width/height/margin/padding/border-width вычисляются только в том случае если parent имеет заданные (length units, percentage units) значения width.
Во всех остальных случаях margin-left:5% трактуется как undefined.


<percentage>
The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.


Т.е. спецификация не допускает циклов.

Иначе это вот:

container { width:max-content; }
container > child { width:120%; }


привело бы к container width => positive infinity.
Re[6]: Почему переносится текст?
От: Евгений Музыченко Франция https://software.muzychenko.net/ru
Дата: 04.03.19 09:39
Оценка:
Здравствуйте, c-smile, Вы писали:

CS><percentage>

CS>The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.

Спасибо, не углядел этого сам.

CS>Т.е. спецификация не допускает циклов.


В таких неявных запутанных системах правил, как HTML/CSS, совсем запрещать циклы не следовало. Правильнее было бы ограничить количество итераций — хотя бы тремя-пятью.
Re[7]: Почему переносится текст?
От: c-smile Канада http://terrainformatica.com
Дата: 06.03.19 00:16
Оценка:
Здравствуйте, Евгений Музыченко, Вы писали:

CS>>Т.е. спецификация не допускает циклов.


ЕМ>В таких неявных запутанных системах правил, как HTML/CSS, совсем запрещать циклы не следовало. Правильнее было бы ограничить количество итераций — хотя бы тремя-пятью.


В CSS нет понятия ни времени ни итераций. Т.е. высказывания типа "сначала ..., а потом ..." вообще не применимы — нет там ни до ни после.

CSS это набор инвариантов: если элемент удовлетворяет этому условию (selector) то значение свойств (CSS properties) вот такое.

Набор CSS правил задает систему линейных уравнений и неравенств таким образом что эта система всегда имеет уникальное решение (система имеет глобальный минимум на области определения).

Эта вот система условий
container { width:max-content; }
container > child { width:120%; }

не имеет решения.
Re[8]: Почему переносится текст?
От: Евгений Музыченко Франция https://software.muzychenko.net/ru
Дата: 06.03.19 16:02
Оценка:
Здравствуйте, c-smile, Вы писали:

CS>В CSS нет понятия ни времени ни итераций. Т.е. высказывания типа "сначала ..., а потом ..." вообще не применимы — нет там ни до ни после.


Я, как бы, в курсе. Речь о том, что в ряде случаев проблематично отобразить HTML/CSS без повторного просмотра разметки/стилей и корректировки построенной структуры.

CS>Эта вот система условий

CS>
CS>container { width:max-content; }
CS>container > child { width:120%; }
CS>

CS>не имеет решения.

Однако, Firefox/Gecko таки решает систему, описывающую мой пример с текстом, который Chrome/WebKit переносит.
Re[9]: Почему переносится текст?
От: c-smile Канада http://terrainformatica.com
Дата: 06.03.19 19:42
Оценка:
Здравствуйте, Евгений Музыченко, Вы писали:

ЕМ>Здравствуйте, c-smile, Вы писали:


CS>>В CSS нет понятия ни времени ни итераций. Т.е. высказывания типа "сначала ..., а потом ..." вообще не применимы — нет там ни до ни после.


ЕМ>Я, как бы, в курсе. Речь о том, что в ряде случаев проблематично отобразить HTML/CSS без повторного просмотра разметки/стилей и корректировки построенной структуры.


Я же тебе привел случай когда система уравнений нестабильна. Что такое повторно тогда ? И сколько тех повторно надо делать вообще?

ЕМ>Однако, Firefox/Gecko таки решает систему, описывающую мой пример с текстом, который Chrome/WebKit переносит.


Ну как бы если сказано что undefined behavior то чудеса не должны удивлять.

А вообще CSS 2.1. исповедует O(N) layout cost. N — количество DOM элементов.

Но flexbox и grid уже дороже. Там layout выливается в классическую задачу линейного программирования — нахождение решения итеративное, симплекс методы и их вариации типа cassowary constraint solver.
Firefox может использовать механизмы линейного программирования и для общих случаев — вне flexbox и grid. Что скорости мозиле не прибавляет. Да и не требуется по спецификации.
Подождите ...
Wait...
Пока на собственное сообщение не было ответов, его можно удалить.