10 лучших jQuery плагинов для работы с текстом

Jquery плагины и решения: 10 лучших jQuery плагинов для работы с текстом

В этой статье собраны , которые облегчают работу верстальщику: помогают сэкономить время и доводят верстку типографии до автоматизма. Сразу хочу сказать, что плагины из этой подборки не для создания финтифлюшек и различных красивостей, например, анимации или тому подобного, а для обеспечения корректной работы веб-страницы. Они понадобятся в том случае, когда становится бессильным перед поставленной задачей. Например, ели нужно автоматизировать обрезку текста по количеству символов или по высоте блока, если нужно быстро и правильно настроить типографию в адаптивном сайте, а также при мудреном выравнивании текста и т.д.

Мы в своей работе очень часто используем или использовали раньше эти плагины. Итак. К вашему вниманию 10 лучших jQuery плагинов для работы с текстом, которые помогут быстро и эффективно реализовать нестандартную дизайнерскую идею.

TextTailor — обрезка текста в зависимости от высоты блока

TextTailor — это очень полезный плагин, который поможет обрезать текст (поставить cut или ссылку «подробнее») так, чтобы он максимально заполнил контейнер, в котором находится. То есть, он позволяет обрезать текст в зависимости от высоты родительского блока и убрать все, что не поместилось, под кат. Единственное условие для корректной работы скрипта — это наличие у блока заданной высоты в фиксированном или процентном значении.
TextTailor часто используется на страницах со списком статей в виде плитки, когда блоки с превью топиков расположены по несколько штук в ряд и при этом заголовки статей разного объема. Дополнительно это может усложниться, если ширина этих блоков меняется, например, в адаптивных сайтах. В таких случаях, как правило, количество символов краткого описания (аннотации) грубо ограничено, и из-за того, что заголовки имеют разную высоту, в блоках получаются пустые области. TextTailor поможет обойти эту проблему и заполнит весть блок текстом.

P/S Возможно кому-то будет полезно. Когда-то мы публиковали плагин под названием flexMenu, который регулирует количество пунктов в зависимости от ширины родительского блока. Все, что не помещается, отправляется в выпадающий список. Он был с статье под названием "5 адаптивных меню для разных задач".

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

Jquery плагины и решения: 10 лучших jQuery плагинов для работы с текстом


Succinct — обрезка текста по количеству символов

Succinct — jQuery плагин, который позволяет поставить ссылку «Подробнее» или многоточие после заданного количества символов в тексте. Все что не поместилось — обрезается.
По сути, это стандартный подход в обрезке текста, только средствами jQuery, а не на PHP.

Jquery плагины и решения: 10 лучших jQuery плагинов для работы с текстом


Readmore.js — скрытие текста под спойлер

Readmore.js позволяет скрыть часть текста под спойлер. Скрипт, после заданного количества символов в тексте ставит кнопку «Подробнее», при нажатии на которую появляется скрытая часть текста с эффектом «выезда» вниз, сдвигая остальной контент.

Jquery плагины и решения: 10 лучших jQuery плагинов для работы с текстом


FitText — масштабирование текста по ширине экрана

FitText — jQery плагин, который динамически изменяет размер шрифта в зависимости от ширины экрана или родительского блока. Отлично подойдет для создания заголовков экранов в адаптивных сайтах. Теперь вам не потребуется менять размер шрифта под каждое разрешение экрана.

Jquery плагины и решения: 10 лучших jQuery плагинов для работы с текстом


Auto Line-Height — автоматическое межстрочное расстояние

Auto Line-Height позволяет автоматически рассчитать lineheight (высоту строк) при изменении размера окна. Как правило, применяется в адаптивных сайтах для улучшения читабельности текста на мобильных устройствах.

Jquery плагины и решения: 10 лучших jQuery плагинов для работы с текстом


Bacon — выравнивание текста по кривой

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

Jquery плагины и решения: 10 лучших jQuery плагинов для работы с текстом


jQSlickWrap — выравнивание текста по изображению

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

Jquery плагины и решения: 10 лучших jQuery плагинов для работы с текстом


Responsive-Measure — расчет ширины абзаца

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

Jquery плагины и решения: 10 лучших jQuery плагинов для работы с текстом


BigText — рассчитывает кегель шрифта и размер межсловных пробелов

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

Jquery плагины и решения: 10 лучших jQuery плагинов для работы с текстом


Kerning.js — расчет интервалов между знаками

Kerning.js позволяет быстро отрегулировать расстояние между символами с помощью CSS. Таким образом, вы получаете полный контроль над типографией сайта.
Кернинг — штука сложная, работать с ним следует только в тех случаях, когда вы четко понимаете, какой результат должен получиться в итоге.

Jquery плагины и решения: 10 лучших jQuery плагинов для работы с текстомJquery плагины и решения: 10 лучших jQuery плагинов для работы с текстом
Напишите свой комментарий
comments powered by HyperComments