Рамка вокруг каждой буквы в тексте?

Question

[Евгений]

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

Answer 1

[aen]

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

Answer 2

[Кирилл Грачёв]

Как-то так jsfiddle.net/smb9gk0a

Answer 3

[Alexander Sydorenko]

Комбайн с использованием js и css - jsfiddle.net/empdxa5x по мотивам @aen

Ну а теперь как плагин. Что то у меня сильно хорошее настроение..

Comments

[aen]

Будете молодчиной, если плагином оформите все :)

[Alexander Sydorenko]

@aen: обновил. Теперь я молодчина? :)

[aen]

Теперь да!

Answer 4

[Илья Попов]

либо каждый символ заворачивать во что-то типа < span > и ему назначать стили с рамками, либо выбрать моноширинный шрифт и подложить под него рисунок соответствующих габаритов с "рамками".

Answer 5

[ssclock]

Средствами CSS: наложить текст оверлеем на слой с рамками (по диву на символ или моноширинным текстом), рамки можно поискать среди графических символов в UTF-8 и, т.о., сделать код минимальным.