Проектирование облака тегов разных типов

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

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

_{(источник: stevethomas.com.au)}

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

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

Ответ 1

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

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

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

Ответ 2

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

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

EDIT: Также работает, если сортировать теги по ширине ~~strlen~~ в порядке возрастания.

Ответ 3

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