Текст с несколькими подчеркиваниями

Мое приложение заключается в том, что это некий онлайн-документ, к которому пользователь может комментировать и подчеркивать текст для справки. Теперь это могут сделать несколько пользователей, поэтому для каждого подчеркивания нужны разные цвета.

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

Трудный способ, который я знаю, заключается в том, что я могу добавить div/span со строкой и расположить его под текстом, но может быть немного сложно обрабатывать позиции в случае отзывчивого окна.

Есть ли способ сделать это, используя только текстовые свойства? Я искал это и нашел эту ссылку

http://fsymbols.com/generators/lines/

Они используют fsymbols для создания подчеркиваний. Но я не понимаю, как я могу добавить это в свое приложение. Также не похоже, что он может иметь разные цвета.

Любой более простой способ или мне нужно делать только сложный путь?


javascript css underline
person pravid    schedule 29.11.2016    source источник
comment
Под множественными вы имеете в виду два, три? Потому что на изображении, которое вы показали, их всего два.   -  person Ionut    schedule 29.11.2016
comment
Можете привести пример конечного результата?   -  person ppovoski    schedule 29.11.2016
comment
Вы всегда можете объединить border-bottom и text-decoration:underline, если вам нужно только два.   -  person display-name-is-missing    schedule 29.11.2016
comment
@lonut: да, несколько строк, так как может быть любое количество или пользователей.   -  person pravid    schedule 29.11.2016

Ответы (5)


arrow_upward
21
arrow_downward

Аннотирование текста текстом не кажется правильным способом сделать это. Я думаю, что аннотацию следует делать с помощью разметки. Чтобы реализовать множественное подчеркивание (я понимаю, что пользователей может быть больше двух), вы можете использовать нижние границы во вложенных промежутках. Их необходимо настроить для отображения в виде встроенных блоков, чтобы вы могли влиять на их высоту, чтобы вы могли вкладывать больше диапазонов, не перезаписывая границу. Также необходимо учитывать, что могут происходить перекрытия, в том числе неиерархические.

Обратите внимание, что я сохранил сам подчеркивающий диапазон из списка пользователей и связанных с ними цветов.

span.user { border-bottom:1px solid; display:inline-block; padding-bottom:1px; }

span[data-uid='001'] { border-bottom-color:blue; }
span[data-uid='002'] { border-bottom-color:red; }
span[data-uid='003'] { border-bottom-color:orange; }
<p>
Lorem ipsum dolor sit <span class="user" data-uid="003">amet, <span class="user" data-uid="001"><span class="user" data-uid="002">consectetuer</span> adipiscing elit</span>. Aenean</span> commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. <span class="user" data-uid="001">Donec <span class="user" data-uid="003">quam</span> felis,</span> ultricies nec, pellentesque eu, pretium quis, sem. <span class="user" data-uid="003">Nulla</span> consequat massa quis enim. Nullam dictum <span class="user" data-uid="001">felis eu pede mollis pretium. </span><span class="user" data-uid="002"><span class="user" data-uid="001">Integer</span> tincidunt.</span> Cras dapibus. 
</p>

ИЗМЕНИТЬ:

Я нашел лучшее решение, которое покрывает проблему разрыва строки, вызванную использованием «display: inline-block»:

p { width:150px; line-height:2em; }

span.annotation { border-bottom:1px solid; }

span.annotation span.annotation { padding-bottom:2px; }

span.annotation span.annotation span.annotation { padding-bottom:4px; }

span.annotation span.annotation span.annotation span.annotation { padding-bottom:6px; }

span[data-uid="001"] { border-color:orange; }
span[data-uid="002"] { border-color:blue; }
span[data-uid="003"] { border-color:red; }
span[data-uid="004"] { border-color:green; }
<p>
Lorem <span class="annotation" data-uid="004">ipsum dolor <span class="annotation" data-uid="001">sit amet, <span class="annotation" data-uid="002">consectetuer adipiscing</span> elit.</span> Aenean commodo ligula eget dolor. Aenean massa. <span class="annotation" data-uid="002">Cum sociis <span class="annotation" data-uid="001">natoque penatibus et <span class="annotation" data-uid="003">magnis</span> dis parturient montes, nascetur</span> ridiculus mus.</span> Donec quam felis, ultricies nec, <span class="annotation" data-uid="002">pellentesque eu, </span><span class="annotation" data-uid="001"><span class="annotation" data-uid="002">pretium</span> quis, sem.</span> Donec pede justo, fringilla vel, aliquet nec,</span> vulputate eget, arcu.
</p>

Единственное, что мне здесь не нравится, так это то, что вам нужен оператор CSS для каждого слоя вложенности (может быть проще с LESS). Однако в приложении вы ограничите отображение слоев аннотаций (скажем) пятью и найдете другой способ отображения более пяти слоев аннотаций.

person friedemann_bach    schedule 29.11.2016
comment
Имо лучшее решение на данный момент. Я пробовал что-то подобное, но не нашел решения, поддерживающего многострочные аннотации/отзывчивость, что, по-видимому, и здесь является проблемой. - person Marvin; 29.11.2016
comment
Да, высота строк может быть разной, и разбиение строк можно было бы улучшить. - person friedemann_bach; 29.11.2016
comment
Например, если есть диапазон, который начинается в строке 1 и заканчивается в строке 2, граница не будет подчеркивать текст в строке 2. Вам нужно изменить размер окна браузера, чтобы увидеть его в своем примере, или просто предположить, что пользователь комментирует весь текст от Лорема до дапибуса. /edit: да, я искал слово "разрыв строки" ;) - person Marvin; 29.11.2016
comment
Обновлено. Я думаю, что это устраняет проблему разрыва строки. - person friedemann_bach; 29.11.2016

arrow_upward
5
arrow_downward

вы могли бы сделать что-то вроде этого

p {
  text-decoration: underline overline line-through;
  border-top: 3px solid red;
  border-bottom: 3px solid green;
  display: inline-block;
  padding: 2px 0 0 0;
  font-size: 50px;
  margin: 0;
}
<p>Test</p>

person Rahul    schedule 29.11.2016
comment
Хорошая демонстрация всех возможностей оформления текста линиями. Но это не решает исходный вопрос. - person friedemann_bach; 29.11.2016

arrow_upward
3
arrow_downward

Кажется, они просто используют ̅c̅o̅m̅b̅i̅̅̅̅ni̅̅̅ng overline и ̲u̲n̲d̲e̲r̲l̲in̲̲̲̲̲e̲

http://www.fileformat.info/info/unicode/char/0332/browsertest.htm

http://www.fileformat.info/info/unicode/char/0305/browsertest.htm

Я не уверен, что вы можете сделать так, чтобы комбинирование подчеркивало другой цвет, чем текст, но вы можете в некоторых браузерах изменить цвет оформления текста Изменение цвета подчеркивания

Это не работает для меня в Chrome

.example {
  text-decoration: underline;
  -webkit-text-decoration-color: red;
  -moz-text-decoration-color: red;
  /* vendor prefix not required as of V36 */
  text-decoration-color: red;
  /* color: green; */

}
<b class="example">text-decoration</b>  <br/>

  
<b style="color:red">u̲n̲d̲e̲r̲l̲in̲̲̲̲̲e̲<b><br/>

person mplungjan    schedule 29.11.2016

arrow_upward
2
arrow_downward

Все ответы пока не полны.

Ваше основное требование:

Применение заключается в том, что это некий онлайн-документ, к которому пользователь может комментировать и подчеркивать текст для справки. Теперь это могут сделать несколько пользователей, поэтому для каждого подчеркивания нужны разные цвета.

Согласно приведенной выше цитате, необходимо, чтобы все слова, пробелы или даже буквы сохранялись как отдельные встроенные элементы, например <span>.

Почему?

  • Каждый пользователь может аннотировать текст (таким образом, каждый знак может быть выбран)
  • Обратите внимание, что если аннотация длинная и переходит на другую строку, подчеркивание (граница) также должно сохранять вертикальное положение.

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

Давайте посмотрим на пример:

  • Обратите внимание, что пользователи могут выбирать любой знак
  • Позиция подчеркивания сохраняется (здесь нужен был javascript)
  • Может поддерживаться несколько уровней аннотаций (здесь использовался javascript)
  • Он полностью отзывчив (попробуйте сжать, развернуть панель предварительного просмотра скрипки)

Скрипт: https://jsfiddle.net/00w5f0c9/1/

person luke    schedule 30.11.2016
comment
Это также кажется хорошим решением. Еще одна проблема, связанная с обоими решениями, заключается в том, что если мы говорим об огромном документе и многие пользователи комментируют текст, повлияет ли это на производительность? - person pravid; 30.11.2016
comment
Это зависит от того, что вы подразумеваете под огромным. Я сделал простой тест времени выполнения javascript, для 25 тыс. элементов span требуется около 5 с. Очевидно, код javascript можно оптимизировать, или вы можете ограничить количество элементов span при рендеринге документа. Скрипт: jsfiddle.net/00w5f0c9/2 - person luke; 30.11.2016

arrow_upward
1
arrow_downward 

p {
  font-family:tahoma;
   font-size:16px;
}

span {

  border-bottom:1px solid blue;
  position:relative;
  display:inline-block;
 
}
span:before {
  content:'';
  position:absolute;
  left:0;
  bottom:-3px;
  border-bottom:1px solid red;
  display:block;
  width:100%;
  
}
span:after {
  content:'';
  position:absolute;
  left:0;
 bottom:-5px;
  border-bottom:1px solid green;
  display:block;
  width:100%;
  
}
<p>
non-decorated text <span>decorated text</span> non-decorated <span>decorated text</span>
not decorated
</p>

Вы также можете попробовать поиграть с псевдоэлементами after и before. Не уверен, сколько строк вам нужно, но вы также можете добавить еще несколько, таким образом...

person sinisake    schedule 29.11.2016