Как красиво разместить большое количество текста

Я написал скрипт на CSS для размещения многострочного усеченного текста с кнопкой «Читать далее».

Я задался вопросом, позволяет ли CSS правильно оформить усеченный текст так, чтобы разместить в нем несколько строк? А также по нажатию кнопки «Показать больше» отобразить текст полностью.

Свойство text-overflow: ellipsis не поддерживает многострочность. Но я вспомнил о свойстве line-clamp , которое позволяет обрезать многострочный текст.

Подробнее о кнопке «Показать больше»

Для создания кнопки «Показать больше» я не мог использовать тег или . Для этого требуется label и чекбокс. Вот что получилось:

Hey, don’t cut me off like that. I want to speak my mind and don’t appreciate being put into a box.

read more

Я разместил чекбокс прямо перед абзацем, поэтому можно использовать псевдокласс :checked для активации усечения текста:

input:checked + p

Нажмите кнопку, и в абзаце отобразится обрезанная версия текста.

Но как насчет доступности?

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

Чтобы решить эту проблему, я сделал чекбокс фокусируемым, хоть и все еще невидимым.

input

Теперь чекбокс можно выделить, но без скринридера нельзя узнать, установлен он или нет, так как невидим. Чтобы решить эту проблему, я заставил label наследовать стиль фокуса браузера по умолчанию, когда чекбокс выделен:

input:focus ~ label

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

Как отображать кнопку динамически?

Но как динамически отображать кнопку, когда текст в абзаце слишком длинный, чтобы поместиться в контейнер. Это единственная функция, которую я не смог реализовать с помощью CSS. Потому что она требует применения селектора :truncated :

.read-more < display: none; >p:truncated + .read-more

Поэтому реализовать это можно только с помощью JavaScript. Например:

const ps = document.querySelectorAll(‘p’); const observer = new ResizeObserver(entries => < for (let entry of entries) < entry.target.classList[entry.target.scrollHeight >entry.contentRect.height ? ‘add’ : ‘remove’](‘truncated’); > >); ps.forEach(p => < observer.observe(p); >);

А вот расширенная демо-версия:

Источник: www.internet-technologies.ru

Как оформить текст на сайте?

Сегодня мы разберем подробно вопрос о текстах на сайте и их оформлении: чем нужно руководствоваться при форматировании и оформлении текста на сайте, если хотите выгодно выделить проект из массы одинаковых и похожих друг на друга веб-сайтов?

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

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

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

Правило 1. Привлекательные заголовки и подзаголовки

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

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

Кроме этого, в подзаголовки можно включать ключевые слова для увеличения их веса на странице. Главное, не переспамить!

Правило 2. Одна мысль — один абзац

Забудьте о простынях текста – никому не интересно читать длинные полотна букв, сплошных строчек без просвета и иллюстраций. Обязательно разбивайте статью на небольшие абзацы. Давно известно, что в подобной форме любой материал намного легче воспринимается читателем.

Придерживаемся правила: «одна мысль — один абзац». Фишка в том, что вы не должны спугнуть читателя. Ведь мелкие шрифты, монотонные сплошные формы, большие абзацы (а тем более сплошной текст без абзацев вообще) лишь отпугивают читателей.

Правило 3. Маркированные списки, перечни, нумерация

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

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

При SEO-оптимизации текста, вы можете включать ключевые слова в короткие списки, чтобы передать слову больший вес, чем в абзаце.

Правило 4. Обязательный визуальный контент

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

Правило 5. Используйте курсив и жирный шрифт

Разнообразные способы выделения текста позволяют автору заострить внимание на важных моментах, а иногда и придать необходимый эмоциональный окрас тексту. Использовать подобные выделения желательно как раз для привлечения и удержания внимания читателя, а не для «роботов», поисковой оптимизации.

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

Правило 6. Оптимизируйте тексты для SEO продвижения

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

• Есть ли прямые вхождения в тексте жирных запросов? Если нет — добавляем, но должно получиться естественно.
• Есть ли вхождения словоформ жирных запросов в тексте? Если нет — поступаем как в предыдущем пункте.
• Для не жирных запросов в большинстве случае достаточно и не прямых вхождений. Но обязательно должно быть хотя бы упоминание слов из запроса.

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

Правило 7. Источник информации

При написании статей, не забывайте ссылаться на источник информации. Таким образом, Вы подтверждаете достоверность данных, а это еще один повод доверять вашему ресурсу. Вы можете упоминать просто имя автора или название компании, а также можете поставить ссылку на конкретный материал.

Важно помнить – от оформления текста зависит привлечение внимания посетителей. Кроме того, оформление влияет на поведенческие факторы, а они играют очень важную роль в успешном продвижении сайта в поисковиках.

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

Автор статьи: Руслан Албаков

Руководитель SEO-отдела, преподаватель, автор проекта albakoff.ru.

Источник: albakoff.ru

Как красиво и правильно оформить текст на сайте

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

Азы грамотного оформления текстов

• Создавайте структурированные публикации
  Разбивайте монолитный текст на информационные блоки.
• Избыточную(уточняющую) информацию удалите или вынесите на отдельную страницу
  Признайтесь, тяжело читать емкую публикацию. Позвольте читателю бегло пробежать по ней глазами, выхватить интересную и полезную информацию.
• Отделяйте информационные блоки
  Фоном, иллюстрациями(фотографиями), свободным пространством.
• Свободное пространство
  Это воздух для содержания страницы.

Веб-шрифты: как их правильно использовать на сайте?

Веб-шрифты создают эстетику при оформлении сайта и правильно подобранное начертание сделает сайт привлекательность и читабельность. Откройте для себя разнообразие профессиональных веб-шрифтов. Много бесплатных шрифтов, в том числе кириллических найдете и скачаете на сайте — http://www.fonts-online.ru.

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

При оформлении содержания (контента) шрифты разделяются на.

• заголовочные;
• текстовые;
• выделительные.

Какой шрифт использовать для сайта? Как узнать какой шрифт используется на другом сайте? Пройдем по пунктам по порядку, рассмотрим советы и применим полученные знания на практике.

Выбираем правильное начертание

• Используйте на сайте до 3-х шрифтов — гармонично и облегчает восприятие информации.
• Заведите и используйте фирменный шрифт для заголовков и подзаголовков.
• Используйте шрифты одной группы — только с засечками или только рубленые, пример — группа Time News Roman или Arial. Для публикаций в интернете предпочтение отдается рубленым шрифтам (без засечек).

Размер шрифта

Чем старше аудитория читателей, тем крупнее должен быть шрифт.

Размер шрифта для строчного текста — минимум 14px. Для заголовков и подзаголовков —
от 25px (в здравых пределах).

Цвет шрифта на сайте

Светлый шрифт на темном фоне читается хуже, чем темный шрифт на светлом фоне. Однако, шрифт с засечками читается очень хорошо.

При оформлении текста цветными шрифтами, используйте не более 2-х на весь текст, кроме основного, и только один из них яркий.

Эстетический баланс

Хороший шрифт должен выдерживать принципы эстетического баланса:

• не слишком тонкий или ажурный;
• не слишком тяжелый или кричащий;
• присутствуют запоминающиеся, искусно выполненные черты, которые придают шрифту визуальную привлекательность и индивидуальность.

Как узнать, какие цвета и шрифт используется на другом сайте?

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

Смотрим скрины и повторяем за мной. В качестве примера возьмем первый попавшийся сайт c ажурными шрифтами — http://beautiful.dtbaker.net.

— Из всех браузеров наиболее привычно стало семейство Chrome. Пример рассматривается в браузере Vivaldi.

Открыли сайт и сражу же увидели ажурные шрифты, которые используются в заголовках
по тексту и в навигации.

Наводим на шрифт и нажимаем правую кнопку мыши. Включилось контекстное меню. Выбираем пункт «Просмотреть код».

Смотрим слева направо. В верхнем боковом экране HTML-код сайта. Правее карта таблицы стилей CSS. Название шрифта прописывается в CSS. На примере мы определяем оформление для заголовка страницы. В блоке который отмечен видна таблица стилей этого загоовка.

Обратите внимание на выделенную строку font-family — это и есть название шрифта. Грамотные разработчики оставляют исходное название шрифтов и потому всегда можно узнать их наименование.

Indie Flower — искомое название шрифта. Понравился? Как теперь его скачать? Перед тем, как перейти к методике по скачиванию шрифта учитывайте, что не все шрифты представлены кириллицей.

Пройдем еще ряд шагов и шрифт будет скачан:

1. Оставляем открытым окно просмотра кода;
2. Код сайта просматривали во вкладке «Elements», переходим к «Resources» — к ресурсам страницы;
3. Раскрываем вкладки в левой части окна просмотра кода;
4. Ищем вкладку «Fonts» — это и есть список заветных шрифтов;
5. Находим шрифт «Indie Flower» сверяясь с начертанием в правом окне. Название в этих вкладках могут быть и такими, — бессмысленными;
6. Делаем двойной клик мышью по шрифту и вуа-ля, браузер скачивает шрифт на компьютер;
7. Вставляете шрифт на свой сайт.

Текст: как красиво и грамотно оформить?

Это рекомендация. Не всегда получается соблюдать правило длины строки, потому следует найти разумный предел.

В русском языке кавычки используются в виде «ёлочки», а в иностранном — “лапки”.

• Одна строка должна быть заполнена текстом минимум на треть;
• Используйте отступы между абзацами и сделайте их одинаковыми по всему сайту;
• Переносите значения, например «XX век», на другую строку полностью, безотрывно.

Выделяем слова и словосочетания грамотно

Выделения в тексте помогают читателю выхватить ключевые мысли. Грамотно расставленные выделения сосредотачивают внимание читателя и увеличивают вероятность прочтения текста до конца или его фрагмента.

Каждый автор использует любимые стили выделения. Важно при этом соблюсти меру, разумность и придерживаться общих правил в оформлении.

Цель этого раздела — научиться грамотному использованию выделений.

Выделение №1 — курсив

Выделение курсивом в тексте малозаметно и ненавязчиво. Применяется для выделения комментариев, пояснений, названий, расхожих выражений, а также конкретных слов.

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

Выделение №3 — подчеркивание

Подчеркивание желательно использовать исключительно для ссылок.

Выделение №4 — зачеркнутый текст

Зачеркнутый текст наиболее часто используется при оформлении ценников в интернет магазине. Пример — старая цена и новая цена. Еще такой вид выделения можно встретить при оформлении записей в блогах.

Выделение №5 — заливка

Выделение №7 — другой цвет

Выделение №8 — более крупный размер шрифта

Выделение №9 — другой шрифт — шрифтовое выделение

Выделение №10 — прописные (заглавные) буквы

Выделение №11 — рамка

Выделение №12 — разрядка

Разрядка — увеличение промежутков между буквами выделяемого слова.

Применяйте выделение разрядкой для коротких отрезков текста. Выделения длинных участки текста только затруднит чтение. Обратите внимание, на пример в изображении на широкие отступы между выделяемым словом (словосочетания) и текстом. Это сделано, чтобы выделяемое слово и рядом стоящие слова не слиплись.

Выделение №13 — боковой отступ (втяжка)

Боковой отступ или втяжка — еще одно нешрифтовое выделение, которое используется для выделения абзаца или раздела статьи. Отступ делается односторонним или двусторонним — на усмотрение автора.

Выделение №14 — боковая линейка

Боковая вертикальная линейка устанавливается рядом со строками, к которым хотят привлечь внимание читателя. Между линейкой и текстом обязательно сделайте отступ.

Выделение №15 — маркер + курсив

Пример использования выделения «маркер + курсив»:

Выделение №15 — комбинированное

Прописные (заглавные) и строчные истины буквы

НЕ ПИШИТЕ МНОГО ПРОПИСНЫМИ (ЗАГЛАВНЫМИ) БУКВАМИ. И уже тем более НИКОГДА «прыгающим стилем» — ЭтО ПрИмЕр ПрыгАющЕГо ТексТа.

Как об авторе сайта такое написание текста скажет прежде всего о пренебрежении к читателю.

Выравнивание

• Выравнивайте текст по левому краю и не переусердствуйте с центрированием объемных абзацев;
• Никогда не используйте выравнивание по ширине — CSS: text-align: justify;

Межбуквенные и межстрочные интервалы

Разумно используйте межбуквенный и межстрочный интервалы. Слишком большое расстояние между буквами и строками затрудняет чтение.

Буквица

Бу́квица — крупная, отличная от прочих, первая буква главы или раздела.

Источник: contentim.ru