Стилизация перекрывающихся аннотаций в тексте с помощью тегов HTML <SPAN>и CSS - PullRequest
Новая
       41

Стилизация перекрывающихся аннотаций в тексте с помощью тегов HTML <SPAN>и CSS

5 голосов
/ 21 февраля 2012

Я хочу аннотировать текст с категориями. Каждая категория имеет определенный цвет. Также я хочу сосредоточиться на визуализации перекрывающихся аннотаций.

Аннотации и атомы

Часть текста (выбор пользователя), которая аннотирована, я называю атомами.

Для меня есть 4 типа атомов, которые могут перекрываться, описанные следующим образом:

  1. Лорем {[ipsum]} Долор Сит Амет, мастер по садоводству. (Идентичность)
  2. {Lorem [ipsum] dolor} сит амет, мастер по садоводству элитр. (Включение)
  3. Lorem {ipsum dolor [sit amet,} contetetur] садипсинг элитр. (Перекрытие)
  4. Lorem ipsum dolor sit amet, [enstetur] {sadipscing} elitr. (Сосед)

Мы предполагаем, что есть только 2 категории A с [] и B с {}. (но это работает и для большего)

Все инструменты, на которые я смотрел, перекрываются цветом фона или разными типами стилей (например, подчеркивание A и цвет фона для B). При использовании цветов фона перекрывающиеся части обычно имеют более темный или смешанный цвет.

CSS и SPANs

Мой подход к границе атомов. Таким образом, каждый атом заключен в тег span. У меня есть некоторые проблемы с перекрытием (3.). Конечно, я разбил его до 4 span с: начало, конец и два для перекрывающейся части. 

<span class="A outer start">iam nonumy</span>

<span class="A outer end overlap">
    <span class="B start">
    eirmod
    </span>
</span>

<span class="B end">tempor</span>`
  1. Высота линии должна увеличиваться по мере того, как больше атомов аннотируются и перекрываются.

  2. Как мне объединить пролеты с одинаковыми классами A и B? (Я пробовал заполнение, но оно не работает. Также я пытался уменьшить word-spacing, но оно работает для перекрытий, но нарушает нормальный текст.)

  3. Как мне двигаться span с использованием z-index, я знаю, что они должны быть inline-block или block элементами. Если они равны block, span распространяется на более чем одну строку.

Пример

В примере показаны все 4 типа. Также вы можете увидеть проблему с перекрытием и моей попыткой использовать word-spacing, также в последнем примере фиолетовый атом должен быть вверху.

http://jsfiddle.net/Bb62u/289/

Вот еще один пример с word-spacing, я должен установить его на -10, чтобы соединить части.

http://jsfiddle.net/Bb62u/297/

1 Ответ

1 голос
/ 30 августа 2012
  • Используйте единицы процента / длины или изображения с vertical-align, чтобы получить line-height жидкость

  • Использовать относительное / абсолютное позиционирование для Bookend Пролет 

    position: relative; text-align:right; /* for the container, */
position: absolute; left: 0; /* for the left aligned element, */
display: inline; /* or */
display: inline-block /* for the right element. */

  • Используйте white-space:nowrap, чтобы избежать переноса текста в inline-block или block элементов

Например: 

#container{ position: relative; text-align:right; }
#lefty { position: absolute; left: 0; }
#lefty, #righty { display: inline-block }
<div id="container">
  <span id="lefty"><blockquote>left</blockquote></span>
  <span id="righty"><blockquote>right</blockquote></span>
</div>
...