Пролог
Данный пост написан по мотивам статьи "Копируем исходный код без нумерации строк". Так же, в данном посте нет никакой новой информации для профессионалов web-разработки и web-дизайна. И если вы считаете себя таковыми, то можете со спокойной душой не заглядывать под кат.
Заглянувший же под кат хабрачитатель найдет дилетантские потуги сделать на основе вышеуказанной статьи красивую подсветку синтаксиса языка Delphi, описание мучении и борьбы с всплывшими багами. Ну и немного субъективных впечатлении о пятерке распространенных браузерах.
Экспозиция
По роду своих занятии я
Конечно многие IT-шники скажут, что это очередной велосипед, что можно обойтись Apache, Ngnix или вовсе даже DropBox / SugarSync, и вообще есть DelphiWorld. Но в качестве оправдания могу сказать, что пишется все это в первую очередь для повышения скиллов «протокол HTTP», «устройство веб-сервера», «использование gzip», ну и конечно получение нового опыта в велосипедостроении.
Так как моя работа пока никак не связанна web-разработкой, то основным моим браузером случайно два года назад оказался Firefox. С остальными же я даже толком не был знаком. Ну разве что с IE, который в силу своей встроенности в ОС вылезает когда надо и не надо.
Завязка
Когда появилась статья "Копируем исходный код без нумерации строк", было решено использовать указанные наработки в своем проекте. Первая же попытка выявила проблему: в указанной статья неправильно работали переносы в IE7/IE8. Автор сразу отреагировал — оказалось, что в процессе рефакторинга была удалена нужная строка.
Итак, код вроде работает нормально в IE и в Firefox-е. А не тут-то было.
Развитие действия
И IE и Firefox хоть и отображали текст как хотелось, при копировании и вставке оба благополучно съедали пробелы, не смотря не то, что были указаны тэги и pre, и code. Причем ели они их по разному: первый сжимал много пробелов до одного, второй выкидывал ведущие пробелы. Конечно первая мысль — заменить пробелы на nbsp, как это сделал автор вышеприведенной статьи в своей демке. Но что-то не лежала у меня душа к этому решению.
Взяв мысленно в руки шаманский бубен я углубился в дикие пляски на три вечера. Боже, вот тогда я понял, что напрасно относился к верстальщикам с легким пренебрежением. А ведь это только два браузера.
Кульминация
В ходе «танцев» на машине появилась Opera. Что удивительно, она пробелы не съедала. Начались метания между онлайн справочниками, тремя браузерами, двумя редакторами — поправить, переключиться, обновить, выделить, скопировать, переключиться, вставить, переключиться на второй браузер, обновить, выматериться, и так далее по кругу в различных комбинациях.
То плыла верстка, то вставлялись лишние переводы строк, то пропадал фоновый цвет, и многое-многое другое. Постепенно из первоначального кода стиралось все, что попало под критерии «в принципе работает и без этого».
Развязка
Собственно вот она:
<!doctype html> <html> <head> <title>Copy source code with no line number</title> <meta http-equiv="content-type" content="text/html; charset=win-1251" /> <style type="text/css"> .over { display: block; position: absolute; left: 0; width: 7ex; height: 1.4em; z-index: 1; background: url(#); } .evn { display: block; background: #F8F8F8; } .odd { display: block; background: #F0F0F0; } .lineNumber { position: absolute; left: 0; padding: 0 .5ex; margin: 0; width: 6ex; line-height: 1.4em; background: none; border: none; font-family: monospace; font-size: 100%; text-align: right; color: #666; -moz-user-select: none; -webkit-user-select: none; user-select: none; pointer-events: none; } .lineContent { display: block; margin-left: 7ex; padding-left: 2ex; border-left: 2px solid #33BB66; white-space: pre-wrap; } .token-strings { color: #000088; } .token-comment { color: navy; font-style: italic; } .token-keyword { font-weight: bold; } .header { display: block; margin-top: 1ex; padding-top: 1ex; margin-left: 1ex; padding-left: 2ex; font-family: times; font-size: 120%; font-weight: none; white-space: pre-wrap; } </style> </head> <body> <span class="header">Исходный код программы "Hello, World!" на языке Delphi</span> <pre class="lineContent"> <span class="odd"><input class="lineNumber" tabIndex="-1" readOnly="readonly" value="1" unselectable="on"><span class="over"></span><span class="token-keyword">program</span> Hello; </span><span class="evn"><input class="lineNumber" tabIndex="-1" readOnly="readonly" value="2" unselectable="on"><span class="over"></span><span class="token-comment">{$APPTYPE CONSOLE}</span> </span><span class="odd"><input class="lineNumber" tabIndex="-1" readOnly="readonly" value="3" unselectable="on"><span class="over"></span><span class="token-keyword">begin</span> </span><span class="evn"><input class="lineNumber" tabIndex="-1" readOnly="readonly" value="4" unselectable="on"><span class="over"></span> Writeln('<span class="token-strings">Hello, World!</span>'); </span><span class="odd"><input class="lineNumber" tabIndex="-1" readOnly="readonly" value="5" unselectable="on"><span class="over"></span> Readln; </span><span class="evn"><input class="lineNumber" tabIndex="-1" readOnly="readonly" value="6" unselectable="on"><span class="over"></span><span class="token-keyword">end.</span> </span></pre> </body> </html>
Эпилог
Минусы этого решения:
— фон у нумерации не совпадает с фоном кодом;
— в Opera если начать выделять с поля нумерация и выделять вверх, то в буфер ничего не скопируется;
— в разных браузерах в конце скопированного текста добавится разное количество переводов строки.
Вроде все. Осталось установить два последних браузера и проверить «их работу». Вот здесь были свои непонятные мне как простому пользователю моменты.
Chrome:
— скачался полкилобайтный загрузчик который скачал основной инсталлер, молча его запустил на установку, который так же молча в конце запустил «установленный» Chrome. С первой попытки не получилось — появилось маленькое пустое окошко с заголовком «Добро пожаловать ...» — видать какая-то часть оказалось «битой». Вторая попытка увенчалась успехом — оказалось что маленькое окошко это выбор поисковика по умолчанию. На выбор предлагались Google, Yandex, Mail.Ru;
— это был единственный браузер который влепил таки на мой чистый рабочий стол свой ярлык;
— после установки не появились файловые ассоциации с "*.html" и т.п., впрочем так же как и Safari;
— при попытке создать такую ассоциацию, долго (минуту-полторы) искал куда же установился — стало ясно для чего ярлык на рабочем столе, но не ясно почему встал туда — установка была запущена из под админа.
Safari:
— самый большой размер инсталлятора;
— при запуске долго формировал превьюшки;
— имхо, к его превьюшкам надо привыкнуть — после квадратиш-практиш-гуд сильно не привычно;
— после установки не появились файловые ассоциации с "*.html" и т.п., в отличии от Opera и Firefox;
— единственный кто не понял автоматом, указанную в файле кодировку «charset=win-1251».
А так же для сравнения минусы других браузеров, существенные для меня (и ниже, и выше — все имхо):
Opera:
— при открытии страницы ни чем не сигнализирует о том что идет загрузка — ни индикаторами, ни предварительным рендерингом страницы — возникает чувство зависшего приложения.
Firefox:
— долго пилят — обещанная в феврале 4-я версия до сих пор не вышла — вчера вышла 3.6.15 которая исправила глюк с Java-скриптами, которые появились в версии 3.6.14.
IE:
— новых версии для WinXP больше не будет.
Общий минус почти всех браузеров: просят установить себя браузером по умолчанию только при втором запуске.
P.S.
Большая благодарность хабрапользователю lahmatiy (все плюсики ему :), а так же всем web-разработчикам, далающим наши интернеты более красивыми, удобными и человечными — терпенья вам в вашем нелегком деле.
А я пойду допиливать свой велосипед — не мое это дело «web-страницы верстать»!
