Верстаем код с номерами строк
27 января 2014
Задачка оказалась не совсем тривиальной. Надо учесть следующее:
- Номера могут начинаться с какого угодно числа, могут разрываться, могут быть не числами (например,
...
для обозначения того, что часть кода не приводится). - Номера не должны копироваться.
- Длинные строки должны переноситься.
Решается так:
<table class="code"> <tr> <th data-line-number="1"></th> <td>public static function autoload($className)</td> </tr> <tr> <th data-line-number="2"></th> <td>{</td> </tr>
.code th:before { content: attr(data-line-number); }
Важный момент тут использование data-attributes и псевдо-селектора :before
. Первое позволяет расставить номера на стороне сервера, второе — вставить их в ячейку. При этом они не выделяются и не копируются.
Комментарии RSS по email OK
Стоит дописать, что это CSS2.1 и работает IE8+
kotchuprik, такие вещи уже можно не уточнять. IE8- давно похоронили :)
Да, css это вещь. Именно современный css, который я не знаю..
как такое решение? не тестил ни в каких браузерах работает в хроме. Сам css не самый удачный, но написан на скорую руку на коленке. :)
просто по разметке немного по читабельнее, нет нагромождений с table и не надо нумеровать строки если это специально не требуется.
http://jsfiddle.net/nGQPL/1/
Вариант с
<dl>
, который мне больше нравится: jsfiddle.net/PbnsL/Vitaly, интересно, хотя из того же PHP проще нумеровать строки, чем считать заранее.
Константин, годно.
С точки зрения разметки предложенное решение абсолютно несемантично. Для организации подобных украшений лучше использовать javascript.
Vitaly, Константин — обе версии с заданной шириной блока для номера строки, стоит заметить что в задаче нам заранее этой ширины не высчитать, так что тут без таблицы или
display:table-cell
для блока, не обойтись.Александр, возможно, было бы правильным блокировать кнопку отправки сообщения после нажатия на неё во избежание публикации повторных комментариев.
Аноним есть семантичное решение. jsfiddle.net/K3WUD/4/
slavcodev, мне показалось что это все же удобнее чем нагромождения с table, особенно учитывая что более 5 символов будет требоваться редко, то можно этим пренебречь. Взамен получаете возможность не нумеровать строки если не нужна особая нумерация, более простая и понятная разметка и возможность менять порядок на клиенте.
можно подсмотреть другие решения — например github имеет интересное решение без псевдо элементов.
Vitaly, моё решение как раз навеяно github.