Граница вокруг произвольных соседних div, даже если границы пересекаются - PullRequest
Новая
       26

Граница вокруг произвольных соседних div, даже если границы пересекаются

0 голосов
/ 04 мая 2019

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

Рассмотрим следующий пример, первое предложение из романа «Чтобы жить» Юй Хуа: 我 比

Во второй трети есть три символа "获得 了", которые могут образовывать слова "获得" или "得了».Чтобы обозначить это, я хочу, чтобы вокруг «获得» была граница, а вокруг «得了» - граница.

К сожалению, я не могу опубликовать изображение, потому что у меня нет 10 репутации.

проблема в том, что я думаю, что нормальных div здесь недостаточно, потому что div будет пересекаться, что невозможно.Таблица быстро становится слишком сложной.Я также не хочу динамически назначать прямоугольники, используя JavaScript, потому что я хочу показать все слова одновременно.Возможно ли решение HTML5 canvas?

Вот структура div (только три примера): 

<div class="hanzi_with_pinyin"><div class="hanzi color4">获</div><div class="pinyins_div"><div class="pinyin_div color4">huo4</div></div></div>
<div class="hanzi_with_pinyin"><div class="hanzi">得</div><div class="pinyins_div"><div class="pinyin_div color2">de2</div><div class="pinyin_div color5">de5</div><div class="pinyin_div color3">dei3</div></div></div>
<div class="hanzi_with_pinyin"><div class="hanzi">了</div><div class="pinyins_div"><div class="pinyin_div color5">le5</div><div class="pinyin_div color3">liao3</div><div class="pinyin_div color4">liao4</div></div></div>

Есть ли простой способ, который позволит мне создатьпрямоугольники вокруг соседних элементов, даже если прямоугольники пересекаются?

1 Ответ

0 голосов
/ 04 мая 2019

Используйте границы таблицы вместе с тегами <tr> и <th> следующим образом.

https://www.html.am/html-codes/tables/table-border.cfm

Пример: 

<table border="1">
<tr>
<th><div class="hanzi_with_pinyin"><div class="hanzi color4">获</div><div class="pinyins_div"><div class="pinyin_div color4">huo4</div></div></div></th>
</tr>
<tr>
<td><div class="hanzi_with_pinyin"><div class="hanzi">得</div><div class="pinyins_div"><div class="pinyin_div color2">de2</div><div class="pinyin_div color5">de5</div><div class="pinyin_div color3">dei3</div></div></div></td>
</tr>
<tr>
<td>
<div class="hanzi_with_pinyin"><div class="hanzi">了</div><div class="pinyins_div"><div class="pinyin_div color5">le5</div><div class="pinyin_div color3">liao3</div><div class="pinyin_div color4">liao4</div></div></div></td></tr>
</table>

Вы можете дополнительно настроить его, используя границы CSS.

https://www.w3schools.com/css/css_border.asp

...