Пробелы в HTML сломаны
Дуглас Паркер решил разобраться, как работают пробелы в HTML. Да, вам не показалось. Он исследовал поведение одного символа в документах. Если быть честнее, то двух, ещё неразрывный
Если вы не знали, то в HTML действительно есть механизм схлопывания пробельных символов, в котором много разных нюансов. Например, пробелы бывают значимыми и незначимыми. Если пробел незначимый, то есть высокий шанс, что в отрендеренном варианте его не станет. Например, если вы вставите пробел в самое начало содержимого тега, то он исчезнет. А вот пробел в конце тега, когда после тега есть ещё какой-нибудь текст, уже значение имеет, поэтому можно часто встретить в интернете ссылки с подчёркиванием пробела в конце.
А ещё при помощи CSS можно сделать так, чтобы пробелы начали либо учитываться все сразу, либо только переносы строк, либо ещё как-то.
Чтобы банально не пересказывать статью, просто советую её прочитать, там хорошие примеры на разобраться.
Дуглас подсветил интересную проблему. По сути у нас сейчас нет способа задать неубираемый пробел явно спецсимволом. Мы можем задать между словами обычный пробел — но его судьба очень шаткая, сильно зависит от того, блочный или инлайновый контекст, что написано в CSS, есть ли вокруг флекс-контейнер и так далее. У нас есть неразрывный пробел
Ещё одна интересная мысль: prettier и прочие форматтеры могут ломать вёрстку. Просто потому, что наличие или отсутствие пробела — это не прихоть для форматирования кода, а вполне себе необходимость для корректной вёрстки. У prettier есть настройка для уважительного отношения к пробелам от автора, но по умолчанию она включена в нестрогий режим, а силу дефолта не стоит недооценивать. Теперь хоть буду понимать, почему иногда ломается вёрстка, а не просто убирать пробел и радоваться, что каким-то чудом заработало.
В конце автор предлагает совсем уж безумную идею: переписать формат HTML, чтобы как в языках программирования появилась сущность «строка», то есть использовать тройные кавычки или ещё какие-то отделители от другой разметки, которые бы давали парсеру понять, что эту строку надо обрабатывать по-особенному. Но тут я немножко выпал в осадок, идея кажется слишком безумной, чтобы когда-нибудь такое появилось в реальности. Но кто знает. У нас же не просто так существует doctype у документов, теоретически такой режим возможен.
https://blog.dwac.dev/posts/html-whitespace/
Дуглас Паркер решил разобраться, как работают пробелы в HTML. Да, вам не показалось. Он исследовал поведение одного символа в документах. Если быть честнее, то двух, ещё неразрывный
исследовал.Если вы не знали, то в HTML действительно есть механизм схлопывания пробельных символов, в котором много разных нюансов. Например, пробелы бывают значимыми и незначимыми. Если пробел незначимый, то есть высокий шанс, что в отрендеренном варианте его не станет. Например, если вы вставите пробел в самое начало содержимого тега, то он исчезнет. А вот пробел в конце тега, когда после тега есть ещё какой-нибудь текст, уже значение имеет, поэтому можно часто встретить в интернете ссылки с подчёркиванием пробела в конце.
А ещё при помощи CSS можно сделать так, чтобы пробелы начали либо учитываться все сразу, либо только переносы строк, либо ещё как-то.
Чтобы банально не пересказывать статью, просто советую её прочитать, там хорошие примеры на разобраться.
Дуглас подсветил интересную проблему. По сути у нас сейчас нет способа задать неубираемый пробел явно спецсимволом. Мы можем задать между словами обычный пробел — но его судьба очень шаткая, сильно зависит от того, блочный или инлайновый контекст, что написано в CSS, есть ли вокруг флекс-контейнер и так далее. У нас есть неразрывный пробел
 , который одновременно не даёт пробел убрать (потому что это особенный пробел), но при этом ещё и не даёт разделить слова между собой. Но если мы хотим дать возможность переносить слова, но не давать их слепить браузеру, когда перенос не нужен — такого символа нет. При этом в статье есть примеры вроде CMS и прочих мест, где такие пробелы вставить иногда нужно.Ещё одна интересная мысль: prettier и прочие форматтеры могут ломать вёрстку. Просто потому, что наличие или отсутствие пробела — это не прихоть для форматирования кода, а вполне себе необходимость для корректной вёрстки. У prettier есть настройка для уважительного отношения к пробелам от автора, но по умолчанию она включена в нестрогий режим, а силу дефолта не стоит недооценивать. Теперь хоть буду понимать, почему иногда ломается вёрстка, а не просто убирать пробел и радоваться, что каким-то чудом заработало.
В конце автор предлагает совсем уж безумную идею: переписать формат HTML, чтобы как в языках программирования появилась сущность «строка», то есть использовать тройные кавычки или ещё какие-то отделители от другой разметки, которые бы давали парсеру понять, что эту строку надо обрабатывать по-особенному. Но тут я немножко выпал в осадок, идея кажется слишком безумной, чтобы когда-нибудь такое появилось в реальности. Но кто знает. У нас же не просто так существует doctype у документов, теоретически такой режим возможен.
https://blog.dwac.dev/posts/html-whitespace/