Особенности HTML-рендера в классическом плеере

Aleks Versus Moderator • 07.04.2014 16:02 • 3 comments • 7449 views

Вернее сказать сходства и различия в рендеринге для “классического плеера” и “навигатора”, но сравнений с конкретно “навигатором” будет немного.

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>"

между строками с текстом будет выведена ещё одна строка. Решение здесь такое. Вместо символов табуляции использовать группу неразрывных пробелов:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;строка 1
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;строка 2

Решение не самое удачное, но по-крайней мере одинаково выглядит и там и там.

Edited at 08.04.2014 07:06 (12 years ago)

Nex Moderator 07.04.2014 19:30 (12 years ago)

Aleks Versus,

Самое оптимальное… - это сначала набирать текст, а после заключать его в теги.

Выход для того и другого плеера … записывать все теги, формирующие таблицу, одной строкой.

Мудришь.

Для вывода тегов, спасает одно простое правило: выводить текст с тегами всегда оператором *P.

И не нужно морочить себе голову с таблицами, табуляциями и расположением тегов относительно друг друга. Никаких “неожиданных” переводов строки при таком подходе не появится.

Также есть ещё экзотический вариант:

! Сложение строк.
'эни, ' + _
'бени, ' + _
'раба'

В “классическом плеере” эти атрибуты позиционируют не таблицу, а текст внутри неё. Это стандарт вроде как ещё html 3.

Это неправда. Нет такого стандарта, и не было. Если в классическом плеере так происходит, то это очередной косяк рендера классического плеера.

если использовать в “навигаторе” тег <pre></pre>, можно увидеть, что помимо непосредственно символов перевода строк (выводимых по правилам чтения тега <pre></pre>), сам “навигатор” … создаёт дополнительный перевод строки.

Баг в Навигаторе, неправильная замена перевода строки. В случае последовательности “\r\n”, символ “\n” заменялся на ”
“, а “\r” оставался в строке. Отсюда лишний перевод строки в “<pre>”. Будет исправлено в следующей версии.

Рекомендую, любые эксперименты проверять в браузере. Сравнивай то, что показывается в плеере, с тем, что показывается в браузере.

Навигатор всегда должен соответствовать браузеру.

Если классический плеер не делает как браузер - это косяк рендера классического плеера.

Если Навигатор не делает как браузер - это баг Навигатора (не рендера, а именно мной написанного кода).

Aleks Versus Moderator 08.04.2014 07:03 (12 years ago)

Nex Moderator 08.04.2014 07:28 (12 years ago)