Форматирование генерированного HTML

Опубликовано tulvit - чт, 08/01/2015 - 09:20

Тезис: генерированный (и не только) HTML код надо форматировать, а не пускать в одну строку, т. е. вставлять те же символы разрыва строки.

С одной стороны и смотреться по Ctrl+U будет приятней (что важно), с другой - оградит от проблем с версткой в будущем. Последнее имеет смысл рассмотреть на конкретном примере.

Скажем, у нас есть следующий HTML код:

 

 
 
 

 

И следующие стили:

#wrapper {
width: 500px;
padding: 10px;
background: #FFC17B;
}

.sub {
width: 200px;
height: 100px;
margin: 5px;
background: #CE8965;
}

Как это выглядит:

 
 
 

Теперь назначим нашим внутренним дивам свойство display: inline-block , а для враппера установим text-align: justify :

#wrapper {
width: 500px;
padding: 10px;
background: #FFC17B;
text-align: justify;
}

.sub {
width: 200px;
height: 100px;
margin: 5px;
background: #CE8965;
display: inline-block;
}

 
 
 

Все как и должно быть, внутренние дивы стали выравниваться по ширине.

А теперь сделаем все то же самое, но вот для такой верстки, которую обычно получают генерированием HTML без надлежащего форматирования:

 

 
 
 

 

При обычном выводе блоков все точно также:

 
 
 

Снова применим стили display: inline-block и text-align: justify , как и в примере выше:

 
 
 

Так, а куда выравнивание-то подевалось?

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

И вот такие вот мелочи могут сильно отъесть время и попортить нервы. Когда вроде как все должно работать, а не работает. Смотришь исходный код по привычке через DevTools, все нормально. А то, что там уже распарсенный код, забываешь.

Кстати, стоит отдать должное большинству WYSIWYG'ов и прочих пост-обработчиков HTML'ля (та же самая фильтрация вводимого текста в Drupal, опция "Исправлять неправильный и обрезанный HTML"). В них это все предусмотрено. А вот когда добираешься до самописа на базе порочного опыта т. н. "программирования мышкой", начинаешь наступать на грабли, из раза в раз. Причем на самые что ни на есть детские. Банальная верстка же.

Добавить комментарий

You must have Javascript enabled to use this form.