Классический форум-трекер
canvas not supported
Нас вместе: 4 232 451

CODE vs PRE


 
 
RSS
Начать новую тему   Ответить на тему    Торрент-трекер NNM-Club -> Форум Видео -> ВидеоFAQ
Автор Сообщение
Kalex ®
Администратор
Стаж: 16 лет 7 мес.
Сообщений: 44390
Ratio: 128.272
Поблагодарили: 15162
100%
nnm-club.gif
Когда-то здесь был опрос.
Для оформления отчетов и логов в релизах НУЖНО использовать тег PRE В этих примерах выше мы видим что принципиальной разницы для таких отчетов нет, кроме визуальных различий верстки, фон, шрифт, размер "рамки". В случае с тегом PRE "экономим" несколько сантиметров таблицы по горизонтали, шрифт чуть иначе выглядит и фон светлее, некоторым с тегом PRE легче прочитать что внутри, если зрение ослаблено.
Главное чтобы при использовании тега PRE для оформления отчета внутри не встречались теги, используемые на форуме, т.к. тег CODE предназначен для показа именно кода как он есть.

Раньше было больше различий, длинные строки внутри тега PRE не переносились и растягивали страницу по горизонтали (пользователи "пугались", не могли найти кнопки на форуме, и ссылку чтобы свернуть спойлер, если страницу очень сильно растягивало из-за этого по горизонтали), но выше мы видим что сейчас тег PRE немного допили и он работает чуть иначе, по аналогии как сейчас рабоает тег CODE - длинная строка параметров не растягивает страницу по вертикали.

А ниже неправильно выбраны внешние теги, PRE вместо CODE.
Форум нашел первый встречный закрывающий тег spoiler и закрыл открытый спойлер, т.к. использовался тег PRE, а не CODE.

И вот что получилось на форуме:

Закрывающий тег PRE, который Вы можете увидеть строкой выше, и уменьшение размера шрифта в этой строке, это плачевный результат и последствия комбинации и неправильной вложенности этих двух тегов в примере.
ErikPshat
Стаж: 14 лет 8 мес.
Сообщений: 557
Ratio: 136.173
Поблагодарили: 6251
100%
Откуда: Москва
russia.gif
Kalex
Эмм, судя по вашему описанию и объяснениям, я так понимаю, что у вас с HTML и CSS не совсем дружественные отношения :)
На самом деле эти элементы CODE и PRE практически одинаковые и при равных условиях должны отображать текст одинаково. А у вас я вижу совершенно разное отображение.

Код PRE отличается от CODE только лишь тем, что PRE отображает все пробелы и переносы на новую строку. В то время, тег CODE не учитывает пробелы и хоть сотню пробелов показывает как один, а так же, не учитывает переносов строк. Вы хоть сотню раз переносите предложение на новую строку, у вас всё равно всегда всё будет отображаться в одну строку.

Но у вас ни того ни сего не происходит, а это значит, что у вас в шаблонах просто выставлены на эти теги стили CSS, в которых кто-то когда-то прописал для них стили отображения.

Пойдём дальше, вообще тег CODE используется для отображения программного или HTML или другого кода в таком виде, в каком он есть на самом деле в текстовом документе. Это придумано для того, чтобы показать пользователям свой код без вмешательства браузера в его отображение на странице. Например браузер подменяет ссылки на другие сайты как кликабельные и подчёркнутые и другого цвета или при использования тегов HTML браузер вместо текста может обрабатывать такие теги и делать текст жирным, если в тексте имеется тег [B], то есть браузер мешает разработчикам показать свой код по-настоящему. Вот для этого и были придуманы эти теги.

Тег PRE удобно использовать совместно с тегом CODE, когда вы хотите добиться определённого более тонкого отображения. Например, в последнее время довольно популярно использовать такое сочетание для подсветки синтаксиса в теге CODE. Для этого на тег PRE навешивается функция закрепления Java-скрипта, в котором описан синтаксис отображения всевозможных программных тегов различными цветами, а тег CODE просто не даёт браузеру отображать по-своему теги в программном коде.

Короче, то что вы нам показываете и описываете - отображается по разному не из-за тегов PRE или CODE, а из-за стилей CSS, которые применены к этим тегам.

Добавлено спустя 28 минут 28 секунд:

А у вас я вижу вот что у вас понавешано на этот тег CODE в виде класса, не считая внешних зависимостей от таблицы и body:
Код: выделить все
.code {
    font-family: 'Courier New',Courier,sans-serif;
    font-size: 9pt;
    color: #45688b;
    background-color: #e8eff7;
    border: #45688b;
    border-style: solid;
    border-width: 1px;
    display: block;
    margin-top: 4px;
    padding: 8px;
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
}

В общем посмотрите на ваш шаблон, что там в стилях CSS прописано здесь:

Вот эта строчка:
Код: выделить все
.code{font-family:'Courier New',Courier,sans-serif;font-size:9pt;color:#45688b;background-color:#e8eff7;border:#45688b;border-style:solid;border-width:1px;display:block;margin-top:4px;padding:8px;word-break:break-all;word-wrap:break-word;white-space:pre-wrap;white-space: -moz-pre-wrap}

Там вы можете изменять по своему усмотрению отступы слева, справа, изнутри, снаружи, отовсюду, потом цвет, размер жирность шрифта, бэкграунда и т.п., в общем всё по вашему хотению.

А вот на тег RPE у вас ничего не навешано, поэтому он так выглядит во всю ширину, не окрашенный и не в таблице, а вот код CODE ещё и помещён в таблицу с отступами и ограничением по ширине 90%.
Хотя не, стиль есть на PRE, но только на сохранение пробелов и разрешены переносы по словам:
Код: выделить все
pre {white-space:pre-wrap;word-break:break-all;word-wrap:break-word;white-space: -moz-pre-wrap}
Показать сообщения:   
Начать новую тему   Ответить на тему    Торрент-трекер NNM-Club -> Форум Видео -> ВидеоFAQ Часовой пояс: GMT + 3
Страница 1 из 1