Существует ли кросс-браузерный способ сжатия текста на странице?

Question

Я ищу способ сжатия относительно небольших областей текста на странице, чтобы имитировать графическую кнопку, которая была сделана нестандартным шрифтом. В идеале, только буквы будут сжиматься или уменьшаться, оставляя пространство между словами более или менее одинаковым. Я знаю, что есть некоторые атрибуты CSS, которые делают подобные вещи, но они больше сосредоточены на расстоянии между буквами, а не на ширине самих букв. Эти методы CSS также не очень удобны для разных браузеров. Большая часть пользователей использует IE6, что накладывает большие ограничения на методы на основе CSS из блоков.

Итак, есть ли способ управления шириной / интервалом символов, который подходит для кросс-браузерного подхода? Я знаю, что jQuery довольно хорошо работает во всех браузерах, поэтому можно ли это сделать с помощью jQuery, манипулируя расположением букв и, возможно, их шириной? Это небольшие кусочки текста, по 5 слов за раз или около того, поэтому со скоростью можно разобраться позже.

---

EDIT: Итак, свойство CSS letter-spacing, а также свойство word-spacing позволят мне контролировать пространство между буквами / словами. Тем не менее, это заставляет вещи выглядеть раздавленными. Если это действительно единственный вариант, то мне придется заставить его работать, но то, что я действительно ищу, это способ сжать буквы, чтобы сделать символы тоньше.

Answer 1

возможно

letter-spacing:-1px

поможет

Answer 2

Краткий ответ: Не думаю, что есть работающий кросс-браузерный пример, который отвечает вашим требованиям.

Спецификация CSS3 включает свойство font-stretch, но, к сожалению, в настоящее время CSS3 практически не поддерживается (если вообще поддерживается).

Некоторые возможные способы, которыми может эмулировать такое поведение, о котором я могу думать:

• Используйте подход, основанный на флэш-памяти, такой как sIFR
• Используйте подход, основанный на javascript / canvas, как Typeface.js . На странице примера
• Используйте сжатые шрифты (icky-подход, поскольку это означает, что вы полагаетесь на шрифт, доступный для клиента), например Arial Narrow.
• Использовать серверный скрипт, который генерирует изображение из текстовых параметров

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

Если это невозможно, я бы определенно рекомендовал изучить Гарнитура и SIFR .

Answer 3

Итак, вы хотите раздавить, не раздавив?

Попробуйте отрегулировать размер шрифта. Или некоторая комбинация межбуквенного, межсловного и шрифтового размера. (Все это прекрасно работает в IE6).

.nav {font-size: 80%;
letter-spacing: -.05em;
word-spacing: .05em; }

Answer 4

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

Убедитесь, что вы повторяете текст в атрибуте alt тега img для обеспечения доступности.

У этого подхода есть проблемы с локализацией - вам нужна версия для каждой локали - но это все еще выполнимо.

Также могут возникнуть проблемы, если вы хотите сохранить этот текст в соответствии с каким-либо другим текстом - например, в середине абзаца. Но если это то, что делается, это звучит так, как будто «сжатый текст» не может быть хорошим интерфейсом.

Answer 5

Приближается десять лет спустя, font-stretch по-прежнему практически не поддерживается. Но transform:scaleX(); будет делать. Здесь .

Answer 6

Вы можете отследить оригинальный шрифт с помощью WhatTheFont

Answer 7

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

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

Answer 8

Звучит как кошмар.

Вы можете выдумать все это, поместив каждое слово в плавающем DIV и изменяя ширину каждого DIV.

Answer 9

Вы уверены, что правильно указали свои типы документов? Возможно, ваши браузеры интерпретируют ваш CSS в режиме причуд, что приводит к непредсказуемому поведению.

Не думаю, что jQuery окажет вам большую помощь, если letter-spacing не будет работать должным образом. Вы не можете изменить положение отдельных букв, если каждая буква не находится внутри своего собственного элемента, такого как span, который просто кажется беспорядочным.

РЕДАКТИРОВАТЬ: Если вы хотите уменьшить горизонтальную ширину самих символов, это теоретически может быть сделано, например, с font-stretch: narrower. Но кажется, что основной браузер не поддерживает его должным образом или вообще. По-видимому, это было в CSS2, но затем пропало в CSS2.1 и теперь планируется для CSS3.