Существует ли перекрестный браузер способ уплотнить текст на странице?
Вы хотя бы проверили документацию по загрузке Twitter? Вы должны прочитать эту страницу, прежде чем начинать с Bootstrap: https://getbootstrap.com/docs/4.0/layout/grid/
.row {
background: #f8f9fa;
margin-top: 10px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
INSERT FORM OR DIV FROM GAME HERE
INSERT FORM OR DIV FROM GAME HERE
INSERT FORM OR DIV FROM GAME HERE
8 ответов
Короткий ответ: Я не думаю, что существует рабочий пример перекрестного браузера, который отвечает Вашим требованиям.
Спецификация CSS3 включает a font-stretch свойство, но печально достаточно, CSS3 едва (если вообще), поддерживал в это время.
Некоторые возможные пути, которые могли эмулировать это поведение, о котором я могу думать:
- Используйте основанный на флэш-памяти подход как sIFR
- Используйте JavaScript / основанный на холсте подход как Typeface.js. Существует пример фрагмента шрифта, включенный на странице в качестве примера
- Используйте сжатые шрифты (неприглядный подход, так как это означает доверие шрифту, являющемуся доступным клиенту) как Узкий Arial.
- Используйте сценарий серверной стороны, который генерирует изображение от текстовых параметров
Короче говоря, нет никакого простого и изящного решения этой проблемы, потому что текст и обработка изображения обычно - что-то, что Вы сделали бы в графическом редакторе.
Если бы это не возможно, я определенно рекомендовал бы изучить Гарнитуру и sIFR.
Я думаю, что этот вид вещи должен, вероятно, быть сделан в графическом редакторе и произведен к легкому изображению (png или подобный). Я думаю, что это - единственный простой и надежный способ управлять визуальным выводом текста до этой степени.
Удостоверьтесь, что Вы повторяете текст в атрибуте высокого звука на теге img для доступности.
Этот подход имеет проблемы с локализацией - в этом Вам нужна версия для каждой локали - но это все еще выполнимо.
Там также будут проблемами, если Вы хотели контролировать этот текст с некоторым другим текстом - например, посреди абзаца. Но если это - то, что делается, это походит, "хлюпал, текстом" не может действительно быть хороший UI.
Я должен был бы подвергнуть сомнению мудрость ровной попытки сделать это во-первых. Просто замените проклятую диаграмму чем-то читаемым; или что-то можно копировать с текстом.
То, что Вы хотите сделать, изменить шрифт текста. Я думаю, что Ваш лучший выбор просматривает набор различных шрифтов, которые прибывают предварительно установленные для Вашей базы пользователей и пробующий за лучшую font+size комбинацию.
Так, Вы хотите хлюпать он, не хлюпая он?
Попытайтесь корректировать размер шрифта затем. Или некоторая комбинация межсимвольного интервала, межсловного интервала и размера шрифта. (Все из которых работают просто великолепно в IE6).
.nav {font-size: 80%;
letter-spacing: -.05em;
word-spacing: .05em; }
Вы уверены, что указываете свой doctypes правильно? Возможно, Ваши браузеры интерпретируют Ваш CSS в режиме причуд, приводя к непредсказуемому поведению.
Я не думаю, что jQuery поможет Вам если letter-spacing не работает правильно. Вы не можете изменить положения отдельных букв, если каждая буква не в ее собственном элементе, таком как a span, который просто кажется грязным.
Править: Если бы Вы хотите уменьшить горизонтальную ширину самих символов, которые теоретически были бы, покончили font-stretch: narrower, например. Но кажется, что главный браузер не поддерживает его правильно или вообще. По-видимому, это было в CSS2, но затем заглядывало CSS2.1 и теперь планируется CSS3.
Это походит на кошмар.
Можно уклониться от всего этого путем помещения каждого слова если пущенный в ход DIV и играющий с шириной каждый DIV.