Разработка другого вида облака тегов

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

Возьмите этот пример:

example
(источник: stevethomas.com.au)

Похож на любое нормальное облако тегов. Однако посмотрите на все это дополнительное пространство вокруг тега 'roughdiamond', который мог быть заполнен в другими тегами как 'камень' вниз около нижней части, которая могла эффективно устранить всю дополнительную строку из облака.

Как я пошел бы о том, чтобы заставлять слова заполнить безотносительно пространства, возможного выше их прежде, чем запустить новую строку? Я не говорю о реорганизации их для нахождения абсолютного минимального количества строк требуемым. Если бы я проходил список в изображении, 'кулоне', 'говлите', и 'igrice' пошел бы для выравнивания 1 заполнения, то это, 'roughdiamond' пошло бы для выравнивания 2, потому что линия 1 является сплошной, 'турмалин' пошел бы для выравнивания 3, потому что это не может соответствовать на строках 1 или 2, то же с 'emberald', но 'жемчугом' пошло бы для выравнивания 2, потому что это может соответствовать там, так как существует дополнительное пространство. Я полагаю, что, вероятно, был бы некоторый способ сделать это в CSS, который просто заставит ссылки выходить из строя в любое заполняемое пространство, в которое он может вписаться.

10
задан Glorfindel 25 July 2019 в 07:11
поделиться

3 ответа

Я сомневаюсь, что это возможно в CSS, поскольку это требует определенных вычислений для оптимальной перестановки слов.

Проблема, которую вы на самом деле хотите решить, - это проблема двухмерной упаковки контейнеров с контейнерами одинакового размера и предметами переменного размера.

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

6
ответ дан 4 December 2019 в 02:25
поделиться

Это не оптимальное решение, но, вероятно (в большинстве случаев) будет лучше, чем случайное, и намного быстрее, чем оптимальное: отображать каждый тег по строке длина ширина в в порядке убывания .

Это даст вам схему, которая будет на 14% хуже, чем оптимальное решение.

РЕДАКТИРОВАТЬ: Также работает, если вы сортируете теги по ширине strlen в порядке возрастания.

2
ответ дан 4 December 2019 в 02:25
поделиться

Вы можете попробовать поместить их в div, высота которого равна высоте текста, а затем разбросать их по всему тексту?

0
ответ дан 4 December 2019 в 02:25
поделиться