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

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

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

Nex написал(а):

Навигатор использует движок браузера для отрисовки HTML и работы с CSS, JS. Поэтому всё должно работать так же, как в обычном браузере.

"Классический" плеер, хотя и поддерживает основные html-теги, использует для отрисовки собственный рендерер. В этой теме постараюсь собрать большинство отличий (не считая отсутствующих тегов) отрисовки между браузером/классикой, а так же поделиться способами этих отличий избежать. Не стесняйтесь делиться и своими знаниями.

В первую очередь, следует отметить особенность рендеринга в том и другом плеере, которой с нами поделился Nex:

Nex написал(а):

символы перевода строки плеером переводятся в <br> и отдаются HTML-рендеру.

Эту особенность нужно учитывать, например, когда тегами выделяются блоки текста:

Код:

"<center>Строка 1</center><center>Строка 2</center>"

Браузер автоматически разместит текст в две строки. И такой вариант одинаково сработает и в "классике" и в "навигаторе". Однако, если написать

Код:

"<center>Строка 1</center><br><center>Строка 2</center>"

В "классическом плеере" тег <br> будет проигнорирован. Т.е. на экране мы увидим те же две строки. В свою очередь браузер не только поставит текст внутри тегов в отдельные строки, но и прочитает <br>, и фактически на экран будет выведено три строки.
То же самое относится и к другим тегам, выделяющим текст в блоки/абзацы. <div>, <dd> и прочие.
Самое оптимальное, что тут можно сделать, - это сначала набирать текст, а после заключать его в теги. Т.е.:

Код:

"<center>Строка 1<br>Строка 2</center>"

и в "классике" и в "навигаторе" сработает одинаково.

При написании таблиц так же нужно учитывать особенности каждого из плееров. Так простая таблица

Код:

"<table align=center border=1 width=75%>

    <tr>
        <td>
            ячейка 1
        </td>
        <td>
            ячейка2
        </td>
    </tr>
</table>"

Даёт разные артефакты в том и в другом плеере. "Классика" игнорирует переводы строк, но хорошо считает символы табуляции, поэтому и в ячейках таблицы и после неё появятся эти самые символы табуляции. "Навигатор" же проигнорирует символы табуляции, зато посчитает все переводы строк и сдвинет таблицу на все посчитанные <br>. Выход для того и другого плеера вообще-то уже давно найден, решено ещё в классике: записывать все теги, формирующие таблицу, одной строкой.

Так же заметным отличием при рисовании таблиц являются разные стандарты чтения атрибута ALIGN. В "классическом плеере" этот атрибут позиционирует не таблицу, а текст внутри неё. В навигаторе атрибуты ALIGN выравнивают таблицу по горизонтали.

По стандартам html "навигатор" игнорирует символы табуляции и пробелы перед текстом. В то же время "классический плеер" невозбранно выводит их на экран. При этом, если использовать в "навигаторе" тег <pre></pre>, можно увидеть, что помимо непосредственно символов перевода строк (выводимых по правилам чтения тега <pre></pre>), сам "навигатор", руководствуясь положением

Nex написал(а):

символы перевода строки плеером переводятся в <br> и отдаются HTML-рендеру.

создаёт дополнительный перевод строки. То есть в случае

Код:

"<pre>    строка 1

    строка 2</pre>"

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

Код:

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

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

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

Изменено: aleksversus
08.Апр.14 11:06:53
Aleks Versus
воздвигатель башни
useravatar
Offline
1512 Сообщений
Информация о пользователе в сообщениях
Администратор отключил публичную отправку сообщений

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

Aleks Versus,

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

Мудришь.

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

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

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

Код:

! Сложение строк.

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

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

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

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

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

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

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

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

Nex
useravatar
Offline
4277 Сообщений
Информация о пользователе в сообщениях
Администратор отключил публичную отправку сообщений

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

Nex написал(а):

Это неправда. Нет такого стандарта, и не было.

Ты прав.
Блин, а я до последнего был убеждён, что это из старой спецификации. Даже в справочнике старом нашёл. Оказалось ошибка перевода. Зачеркну.

Nex написал(а):

Баг в Навигаторе, неправильная замена перевода строки.

Не мытьём так катаньем.)
Логика моя, как всегда, вывернута наизнанку. Надо запомнить последовательность: сначала "навигатор" символы перевода строки меняет на <br>, а потом всё получившееся обрабатывает html-рендерер. Так?

Aleks Versus
воздвигатель башни
useravatar
Offline
1512 Сообщений
Информация о пользователе в сообщениях
Администратор отключил публичную отправку сообщений

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

Aleks Versus,
да, именно так. Только это касается любого плеера. В классическом то же самое.

Nex
useravatar
Offline
4277 Сообщений
Информация о пользователе в сообщениях
Администратор отключил публичную отправку сообщений

Информация

Статистика форума:
 
Всего тем:
978
Всего опросов:
14
Всего сообщений:
16790682
Всего сообщений сегодня:
5
Пользователи форума:
 
Всего пользователей:
2399
Последним зарегистрировался:
Топор