Сжатие HTML, CSS, JS кода
Представьте, вы открываете письмо и не можете дочитать его до конца. Вместо этого вы видите сообщение: «Письмо показано не полностью» и ссылку на полный текст. Неудобно, некрасиво, письмо отправляется в корзину.
Чтобы ваши подписчики не оказались в такой ситуации, нужно сокращать код. Всё, что не уместилось в 100–102 килобайта, почтовые сервисы уберут под кат. Это неэффективно для рассылки, поэтому я написал программу Code Compressor.
Что Code compressor убирает из кода
Мы, разработчики, не пишем код единой строкой, потому что читать его и искать ошибки проще в коротких строках с отступами.
Всё ненужное мы убираем в конце, когда протестировали письмо и исправили все баги. Но этот процесс никто не любит — сокращать код вручную долго и неудобно.
Code Compressor автоматически удаляет отступы, пробелы и комментарии. Код без комментариев сжимается в среднем на 28% за счёт пробелов и отступов.
Как пользоваться компрессором
- Скопируйте код HTML, CSS или JavaScript в поле «Код для вставки». Укажите тип кода.
- Нажмите «Сжать» и в течение пяти секунд в поле «Результат» появится сокращённый код.
- Нажмите «Копировать», и код сохранится в буфере обмена. Теперь вставьте его в тело HTML-документа или в отдельный файл скрипта. Готово! Код ужался, письмо не обрежется.
font-stretch
Устанавливает узкое, нормальное или широкое начертание шрифта, что позволяет уплотнять или расширять текст.
Синтаксис
font-stretch: inherit | ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded
Значения
Влияние разных значений font-stretch на вид букв в тексте показано на рис. 1.
Рис. 1. Вид букв при разных значениях font-stretch
HTML5 CSS3 IE 9 Cr Op Sa Fx
font-stretch p Б Б Б Б Б Б Б Б Б
Браузеры
Браузеры применяют свойство font-stretch не ко всем шрифтам, поэтому уплотнение или расширение текста может не работать с некоторыми популярными и распространёнными гарнитурами шрифтов.
letter — spacing
letter — spacing задаёт межбуквенное расстояние — интервал между символами в тексте.
Пример
Скопировать ссылку «Пример» Скопировано
Стандартное расстояние между символами:
p letter-spacing: normal;>p letter-spacing: normal; >
Расстояние, заданное вручную с помощью значений длины:
p letter-spacing: 0.3em; letter-spacing: 3px; letter-spacing: 0.3px;>p letter-spacing: 0.3em; letter-spacing: 3px; letter-spacing: 0.3px; >
Значение, относительно другого элемента:
p letter-spacing: inherit; letter-spacing: initial; letter-spacing: unset;>p letter-spacing: inherit; letter-spacing: initial; letter-spacing: unset; >
Как понять
Скопировать ссылку «Как понять» Скопировано
С помощью letter — spacing можно сжать или растянуть текст на веб-странице. При этом расстояние между буквами и другими символами уменьшается или увеличивается, а сами символы остаются прежнего размера.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Задать межбуквенное расстояние можно в пикселях px , дюймах in , пунктах pt или других единицах, которые используются в CSS.
Значение может быть отрицательным, например, -1px . В этом случае убедитесь, что текст всё ещё можно прочесть, потому что, скорее всего, буквы «склеятся».
Вот какие значения можно задать:
- normal — стандартное межбуквенное расстояние, которое задано для шрифта (значение по умолчанию).
- конкретное значение — положительное или отрицательное значение в любых единицах величины. Значение может быть дробным. Положительное значение добавляется к стандартному расстоянию между буквами, а отрицательное — вычитается из него.
Ещё примеры
Скопировать ссылку «Ещё примеры» Скопировано
Попробуем задать расстояние между символами разными способами:
Стандартное расстояние normal.
Чуть шире, относительно стандартного. Задаём 0.4em.
Ещё шире, относительно стандартного: 1em.
Немного сжимаем с помощью отрицательного значения -0.05em.Добавляем по 6px между символами.
p class="normal">Стандартное расстояние normal.p> p class="em-wide">Чуть шире, относительно стандартного. Задаём 0.4em.p> p class="em-wider">Ещё шире, относительно стандартного: 1em.p> p class="em-tight"> Немного сжимаем с помощью отрицательного значения -0.05em. p> p class="px-wide">Добавляем по 6px между символами.p>
.normal letter-spacing: normal;>.em-wide letter-spacing: 0.4em;>.em-wider letter-spacing: 1em;>.em-tight letter-spacing: -0.05em;>.px-wide letter-spacing: 6px;>.normal letter-spacing: normal; > .em-wide letter-spacing: 0.4em; > .em-wider letter-spacing: 1em; > .em-tight letter-spacing: -0.05em; > .px-wide letter-spacing: 6px; >
Это не совсем то, что нужно. Но как тогда правильно перенести межбуквенное расстояние из Фотошопа в вёрстку?
Нужно использовать следующую хитрую функцию:
x * z / 1000 = y
- z — размер шрифта ( font — size ) в пикселях.
- x — значение межбуквенного расстояния из Фотошоп.
- y — результат вычисления, нужное значение для свойства letter — spacing в пикселях.
Подставим значения с картинки выше:
20 * 18 / 1000 = 0.36px
Можно также вычислить межбуквенное расстояние в em . Для этого используй формулу:
x / 1000 = y
Где x — значение межбуквенного расстояния из Фотошоп.
Сжать Текст CSS
Доброго времени суток! проблема такая:
Нужно в заголовке сайта при верстке вставить текст сжатый!
Каким образом это можно сделать!
Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Сжать текст, заменяя повторяющиеся символы одним
Привет, наткнулась случайно на ваш форум, не знаю помогаете ли вы студентам, но попытка не пытка).
Сжать текст, оставив между словами по одному пробелу
Дан текст 30 символов. Сжать текст, оставив между словами по одному пробелу.
Сжать текст, оставив между словами по одному пробелу
Дан текст 30 символов. Сжать текст, оставив между словами по одному пробелу.
Текст в таблице (CSS)
Добрый день. У меня появилась небольшая проблема. Я создал таблицу, но текст в ней распологается.