Как стать автором
Обновить

Копируем исходный код без нумерации строк

Время на прочтение 6 мин
Количество просмотров 22K

Бывает при выводе информации требуется ее декорировать для лучшего восприятия, нередко оформление сопровождается в том числе и текстом. При выделении и копировании этой информации, оформление копировать не нужно, т.к. нужна только сама информация, и желательно в исходном виде. То есть при копировании часть выделенного текста не должна попадать в буфер обмена.
В моем случае это исходный код, который сопровождается нумерацией строк, так нагляднее и есть возможность сослаться на строку кода. Однако, если мы хотим скопировать часть кода, то он должен копироваться без номера строки.
Многие highlighter'ы этим грешат, при копировании кода копируют в том числе и номера строк. Выходят из ситуации по разному: либо используют хитрую верстку, при которой возможно несовпадении нумерации со строками (можно заметить на github например), или используют специальную кнопку, которая показывает в отдельном окне код без форматирования. Мне показались эти подходы неудовлетворительными, потому решил найти другое решение.
В данной заметке я опишу решение, к которому в итоге пришел. Решение, конечно, частное, но может кому то оказаться полезным в решении собственных задач.

Начнем с того, что кратко пройдемся по возможным вариантам решения.

Способ первый, очевидный.


Самый простой и очевидный способ, это сделать нумерованный список, где каждый элемент списка это отдельная строка. Основной плюс у этого подхода: все просто и не нужно задумываться даже о нумерации. Но при этом нельзя управлять форматом нумерации, нельзя позиционировать маркер (номер строки) и вообще как-то его декорировать. К тому же Internet Explorer и Firefox копируют текст вместе с маркером.
Собственно проблема с копированием перечеркивает возможность использования этого подхода.

Второй способ, менее очевидный.


Второе что приходит на ум — использовать генерируемый контент. Можно даже смирится с тем, что в старых IE это не будет работать (на этот случай можно, конечно, сделать fallback). Но беда в том, что Internet Explorer и Opera копируют весь видимый текст, в том числе и генерируемый контент.
Сложно сказать правы ли разработчики Internet Explorer/Opera или же правы разработчики webkit и Firefox относительно копирования генерируемого контента. Одно можно сказать с уверенностью, что метод не подходит.

Небольшая ремарка


В webkit и Firefox поддерживаются такое свойство CSS как user-select (со своими префиксами -webkit-user-select и -moz-user-select), с помощью которых можно запретить выделять текст. В Internet Explorer'е есть html атрибут unselectable. Однако все это лишь предотвращает начало процесса выделения, то есть если текст все же попал в область выделения, то он будет скопирован.
Более того, все блоки попавшие в область выделения, даже невидимые (display: none; или visibility: hidden;) так же в итоге попадают в буфер обмена.
Все это весьма печально, так как нет нормального способа определить — какой текст нужно копировать, а какой нет.

Способ третий, ненормальный.


Блуждая по интернетам в поисках решения, что-то навело на мысль использовать <input> для вывода декоративного текста. Да-да, поле ввода для вывода текста. Необходимый текст прописываем в значение value, убираем padding, margin, border, background, задаем остальные стили — и никто не скажет что это input. Выделяем наш текст, копируем, вставляем в блокнот — все браузеры ведут себя одинаково, теги <input> с содержимым не вставляются.
Остается побороть неприятный момент, поле ввода может получать фокус, и нельзя начать выделение текста с нумерации — выделяется текст поля. Но это уже, на самом деле, мелочи.
Чтобы нельзя было передать полю фокус мышкой в webkit и Firefox есть приятность — это CSS свойство pointer-events, которому можно задать значение none. Для Internet Explorer'а можно добавить для поля атрибут unselectable=«on». С Opera пока никак.
Чтобы нельзя было передать фокус с клавиатуры (и другими способами) добавляем для <input> атрибуты readonly и tabindex="-1".
В Firefox и webkit все отлично, но в Internet Explorer нельзя начать выделение начиная с области нумерации, а в Opera по прежнему выделяется текст поля, а не исходный код. Чтобы решить проблему добавим для каждого <input> дополнительный блок, который будет перекрывать <input>. Этот блок должен иметь те же размеры, что и <input>, а так же быть прозрачным. К сожалению (или к счастью), если если блок не имеет фона, то он «простреливается», то есть ведет себя как будто его нет, потому ему нужно добавить background. Можно добавить либо прозрачный gif файл, либо просто путь к несуществующему файлу, например background: url(#); (можно было бы использовать rgba(), но в IE это поддерживается только начиная с 9й версии).

Вот, в принципе, и все.

В итоге имеем следующий html для блока с исходным кодом (переводы строк для наглядности, целевой html должен быть без них, иначе можем получить ненужные переводы строк при копировании):
  <div class="code">
    <div class="line">
      <span class="lineContent">
        <input class="lineNumber" value="01" unselectable="on" readonly tabindex="-1" />
        <span class="over"></span>
        .. текст ..
      </span>
    </div>
    <div class="line">
      ...
    </div>
    ...
  </div>

И CSS для этого «безобразия»:
	   .code
  {
    border: 1px solid #E0E0E0;
    padding: 1px;
    margin: 0 1ex;
    overflow: hidden;

    font-family: Consolas, monospace;
    font-size: 100%;
    color: black;
    line-height: 1.4em;
    white-space: pre;   /* важно чтобы сохранялись переносы */
  }

  .line
  {
    position: relative; /* для webkit, иначе при начале выделения с нумерации будет
                           выделяться текст с самого начала блока */
    zoom: 1;            /* для IE6/7 */
    white-space: pre;   /* важно чтобы сохранялись переносы в IE7 */
  }

  .even
  {
    background: #F8F8F8;
  }
  .odd
  {
    background: #F0F0F0;
  }

  .lineNumber
  {
    display: block;
    position: absolute;
    left: 0;

    padding: 0 .5ex;
    margin: 0;
    width: 6ex;
    line-height: 1.4em;
    height: 1.4em;

    background: none;
    border: none;
    font-family: Consolas, monospace;
    font-size: 100%;
    text-align: right;
    color: #666;

      -moz-user-select: none;    /* задаем user-select для Firefox & webkit, чтобы
                                    блок не попадал в область выделения*/
      -webkit-user-select: none;
    user-select: none;
    pointer-events: none;        /* фактически это свойство делает ненужным блок .over, 
                                    но пока оно поддерживается только в Firefox & webkit */
  }
  .over
  {
    display: block;
    position: absolute;
    left: 0;
    width: 7ex;
    height: 1.4em;
    z-index: 1;
    background: url(.);          /* для IE и Opera, иначе блок будет "простреливаться"
                                    (пропускать события мыши нижележащим блокам) */
  }

  .lineContent
  {
    margin-left: 7ex;
    padding-left: 2ex;
    border-left: 2px solid #33BB66;
    display: block;
    white-space: pre-wrap;      /* сохраняем форматирование, но оставляем возможность переносить по словам */
  }

  .token-string
  {
    color: blue;
  }
  .token-comment 
  {
    color: #008200;
  }
  .token-keyword
  {
    color: #006699;
    font-weight: bold;
  }


Демо


Демо на примере исходного кода atomjs (надеюсь TheShock не против ;)
Html-кода много, но он генерируется javascript'ом (свой highlighter).
Тестировалось под Chrome/Safari, Firefox 3.6, Opera 11, IE7-9 (переключением режимов в IE9 RC).

На что стоит обратить внимание


  • Решение использует только возможности HTML и CSS, без спец хаков для браузеров.
  • webkit впереди планеты всей, лучше всего работает в браузерах на его движке, можно сказать идеальный сценарий.
  • Для Firefox пробелы в начале строк нужно заменять на &nbsp; иначе при копировании они будут вырезаться.
  • В Opera текст начинает выделятся только если курсор мыши находится непосредственно над текстом. Начать выделение можно и с нумерации, но фактически текст начнет выделяться только когда курсор окажется над текстом.
  • Важна вложенность свойства white-space. В данном случае ключевыми блоками является .code -> .line -> .lineContent, поэтому рабочим будет цепочка pre -> pre -> pre-wrap и, возможно, другие варианты (нужно проверять). От заданых значений зависит как браузер будет трактовать блоки при преобразовании в текст; при определенных значениях браузер может любой блочный элемент (display: block) выделять в отдельную строку текста, при этом могут получиться пустые строки между строками текста или же игнорировать переносы (например, IE7 может копировать весь текст одной строкой).
  • При вставке в редактор, который понимает text/html (например, MS Word), так же вставятся <input> поля. Момент неприятный, но чаще редакторы не понимают text/html, так что переживать не стоит.

Буду рад замечаниям и советам по улучшению.

UPDATE
Найден workaroud чтобы при вставке в Word/Excel не вставлялись поля ввода. Чтобы этого добиться для <input> нужно задать несуществующее значение атрибута type. В таком случае браузеры игнорируют атрибут и поле имеет тип по умолчанию, то есть type=«text», а при копировании (или вставке) не описаны сценарии как поступать с полями неизвестного типа — в итоге поле игнорируется. Так что код можно спокойно вставлять, например, в Word. При этом если код копируется из Chrome/Safari или из IE, то он будет вставлен с раскраской (webkit так же копирует и фон, а IE копирует без фона), что может в ряде случаев может оказаться полезным.
Теги:
Хабы:
+78
Комментарии 66
Комментарии Комментарии 66

Публикации

Истории

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн