Особенности HTML-рендера в классическом плеере
Вернее сказать сходства и различия в рендеринге для “классического плеера” и “навигатора”, но сравнений с конкретно “навигатором” будет немного.
Nex:
Навигатор использует движок браузера для отрисовки HTML и работы с CSS, JS. Поэтому всё должно работать так же, как в обычном браузере.
“Классический” плеер, хотя и поддерживает основные html-теги, использует для отрисовки собственный рендерер. В этой теме постараюсь собрать большинство отличий (не считая отсутствующих тегов) отрисовки между браузером/классикой, а так же поделиться способами этих отличий избежать. Не стесняйтесь делиться и своими знаниями.
В первую очередь, следует отметить особенность рендеринга в том и другом плеере, которой с нами поделился Nex:
Nex:
символы перевода строки плеером переводятся в
и отдаются HTML-рендеру.
Эту особенность нужно учитывать, например, когда тегами выделяются блоки текста:
"<center>Строка 1</center><center>Строка 2</center>"
Браузер автоматически разместит текст в две строки. И такой вариант одинаково сработает и в “классике” и в “навигаторе”. Однако, если написать
"<center>Строка 1</center><br><center>Строка 2</center>"
В “классическом плеере” тег
будет проигнорирован. Т.е. на экране мы увидим те же две строки. В свою очередь браузер не только поставит текст внутри тегов в отдельные строки, но и прочитает
, и фактически на экран будет выведено три строки.
То же самое относится и к другим тегам, выделяющим текст в блоки/абзацы. <div>, <dd> и прочие.
Самое оптимальное, что тут можно сделать, - это сначала набирать текст, а после заключать его в теги. Т.е.:
"<center>Строка 1<br>Строка 2</center>"
и в “классике” и в “навигаторе” сработает одинаково.
При написании таблиц так же нужно учитывать особенности каждого из плееров. Так простая таблица
"<table align=center border=1 width=75%>
<tr>
<td>
ячейка 1
</td>
<td>
ячейка2
</td>
</tr>
</table>"
Даёт разные артефакты в том и в другом плеере. “Классика” игнорирует переводы строк, но хорошо считает символы табуляции, поэтому и в ячейках таблицы и после неё появятся эти самые символы табуляции. “Навигатор” же проигнорирует символы табуляции, зато посчитает все переводы строк и сдвинет таблицу на все посчитанные
. Выход для того и другого плеера вообще-то уже давно найден, решено ещё в классике: записывать все теги, формирующие таблицу, одной строкой.
Так же заметным отличием при рисовании таблиц являются разные стандарты чтения атрибута ALIGN. В “классическом плеере” этот атрибут позиционирует не таблицу, а текст внутри неё. В навигаторе атрибуты ALIGN выравнивают таблицу по горизонтали.
По стандартам html “навигатор” игнорирует символы табуляции и пробелы перед текстом. В то же время “классический плеер” невозбранно выводит их на экран. При этом, если использовать в “навигаторе” тег <pre></pre>, можно увидеть, что помимо непосредственно символов перевода строк (выводимых по правилам чтения тега <pre></pre>), сам “навигатор”, руководствуясь положением
Nex:
символы перевода строки плеером переводятся в
и отдаются HTML-рендеру.
создаёт дополнительный перевод строки. То есть в случае
"<pre> строка 1
строка 2</pre>"
между строками с текстом будет выведена ещё одна строка. Решение здесь такое. Вместо символов табуляции использовать группу неразрывных пробелов:
строка 1
строка 2
Решение не самое удачное, но по-крайней мере одинаково выглядит и там и там.
Aleks Versus,
Самое оптимальное… - это сначала набирать текст, а после заключать его в теги.
Выход для того и другого плеера … записывать все теги, формирующие таблицу, одной строкой.
Мудришь.
Для вывода тегов, спасает одно простое правило: выводить текст с тегами всегда оператором *P.
И не нужно морочить себе голову с таблицами, табуляциями и расположением тегов относительно друг друга. Никаких “неожиданных” переводов строки при таком подходе не появится.
Также есть ещё экзотический вариант:
! Сложение строк.
'эни, ' + _
'бени, ' + _
'раба'
В “классическом плеере” эти атрибуты позиционируют не таблицу, а текст внутри неё. Это стандарт вроде как ещё html 3.
Это неправда. Нет такого стандарта, и не было. Если в классическом плеере так происходит, то это очередной косяк рендера классического плеера.
если использовать в “навигаторе” тег <pre></pre>, можно увидеть, что помимо непосредственно символов перевода строк (выводимых по правилам чтения тега <pre></pre>), сам “навигатор” … создаёт дополнительный перевод строки.
Баг в Навигаторе, неправильная замена перевода строки. В случае последовательности “\r\n”, символ “\n” заменялся на ”
“, а “\r” оставался в строке. Отсюда лишний перевод строки в “<pre>”. Будет исправлено в следующей версии.
Рекомендую, любые эксперименты проверять в браузере. Сравнивай то, что показывается в плеере, с тем, что показывается в браузере.
Навигатор всегда должен соответствовать браузеру.
Если классический плеер не делает как браузер - это косяк рендера классического плеера.
Если Навигатор не делает как браузер - это баг Навигатора (не рендера, а именно мной написанного кода).
Nex:
Это неправда. Нет такого стандарта, и не было.
Ты прав.
Блин, а я до последнего был убеждён, что это из старой спецификации. Даже в справочнике старом нашёл. Оказалось ошибка перевода. Зачеркну.
Nex:
Баг в Навигаторе, неправильная замена перевода строки.
Не мытьём так катаньем.)
Логика моя, как всегда, вывернута наизнанку. Надо запомнить последовательность: сначала “навигатор” символы перевода строки меняет на
, а потом всё получившееся обрабатывает html-рендерер. Так?
Aleks Versus,
да, именно так. Только это касается любого плеера. В классическом то же самое.