Создать облако тегов определенных размеров

Question

Привет,

Я хотел бы создать облако тегов HTML внутри поля, ширина и высота которого полностью определены.

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

Перенос слов не требуется; однако необходимо разбить более длинные строки на отдельные строки. Например, если много слов, было бы более эффективно иметь несколько строк одинакового размера вместо длинной одной строки (с небольшим размером шрифта).

Это сложно, потому что я не знаю пиксельных размеров строк, поскольку HTML отображает их. Кто-нибудь может мне помочь с моими расчетами? (Из HTML / CSS известны следующие значения: ширина поля x, высота поля y, размер шрифта f, высота строки шрифта l, расстояние между буквами шрифта s и семейство шрифтов m).

Я мог бы измерить буквы отдельных шрифтов, но это было бы действительно неэффективно. Есть ли более простой способ измерить высоту x и y слова на основе указанных выше переменных?

Дополнительный бонус: я хочу отобразить это облако тегов, используя всю площадь элемента body. Если возможно, я хочу, чтобы слова располагались по центру по вертикали и по горизонтали внутри тела. Я могу написать это, если смогу понять, как построить облако.

Спасибо!

Я должен добавить: я знаю, что легко исправить это использование моноширинного шрифта, такого как Courier. Но для решения проблемы (и, в конечном счете, для эстетики) я хочу использовать Грузию.

Answer 1

Нет простого способа сделать это. Однако есть несколько решений, если вы готовы добавить в него какой-нибудь сценарий.

Если вы оберните каждый тег в <span>, frex, вы можете измерить ширину <span> в javascript, выяснить отношение размера шрифта к ширине, а затем отрегулировать размер шрифта так, чтобы ширина там, где вы хотите.

Что касается центрирования на странице, то text-align: center будет горизонтально центрировать встроенные элементы (например, текст или изображения). Элементы блока могут быть центрированы, если они имеют определенную ширину (вам не нужно знать ширину, они просто должны иметь один, как display: block <img> делает), установив левую и правые поля как "авто".

Вертикальное центрирование является более сложным и может быть сделано только двумя способами:

1. Если вы знаете высоту элемента, вы можете выполнить «position: absolute; top: 50%; margin-top: - (половина высоты);», где вы подставите соответствующее число и единицу для (половины высота). Не забудьте отрицательный знак!
2. Если вы не знаете высоту, вы можете использовать способность ячеек таблицы вертикально выравнивать объекты. Либо заверните его в таблицу и установите для него вертикальное выравнивание: среднее или, что еще лучше (если вы можете игнорировать IE7 и более ранние версии), установите для контейнера значение display: table-cell, а затем используйте вертикальное выравнивание: среднее.

Answer 2

Мне нравится вопрос, у меня была похожая проблема. Мне удалось решить эту проблему с помощью

display: inline-block;
float: none;

inline-block может не поддерживаться старыми браузерами.

Answer 3

Вы искали для Flash на основе облаков тегов ?

Answer 4

Вы можете поместить ваше облако в iframe без полос прокрутки, границ, фиксированной высоты строки и фиксированной высоты :-). Например, есть место для 5 строк тегов, поэтому 6-я строка не будет видна.

Плохо то, что ваши последние последние теги могут быть скрыты. Конечно, вы можете сортировать теги от большего к более низкому, чем вы будете уверены, что самые важные теги будут всегда видны.