strokoff

Тестируем верстку статей webislife вместе с вами

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

Гарнитуры шрифтов

Для заголовков используется шрифт с засечками Georgia , для текста используется без засечек Arial

Arial (sans-serif)

Arial — наиболее широко используемый шрифт как для онлайн, так и для печатных СМИ. Arial также является шрифтом по умолчанию в документах Google. Arial — один из самых безопасных веб-шрифтов, и он доступен во всех основных операционных системах.

Georgia (serif)

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

Текстовое форматирование

Текстовое базовое форматирование основано на HTML5 тегах, в место CSS стилей

Строчные элементы

  1. bжирный
  2. uподчеркнутый
  3. sзачеркнутый
  4. iкурсивный
  5. qцитата
  6. smallмаленький текст
  7. supнадстрочный
  8. subподстрочный
  9. markвыделенный текст
  10. strongважный текст
  11. sampвывод компьютерной программы
  12. kbdПРОБЕЛ обозначение кнопки
  13. delудаленный текст из документа
  14. insдобавленный текст в документ
  15. code — Внутритекстовый код
  16. dfnопределение
  17. abbrаббриватура

Блочные элементы

В блочные элементы входят все заголовки h1-h6, а также:

Списки

Все просто есть нумерованные

  1. Нумерованный
  2. Список

Стандартные маркированные

И с поддержкой emoji через атрибут data-listStyle

  1. Emoji тоже можно!
  2. Вот так)
  3. А что с вложенностью?
    1. с вложенностью
    2. все отлично

А на других площадках так можно? Простейшая поддержка при помощи CSS3

Спойлер

Для спойлеров используется тег details

Нажми, чтобы увидеть спойлер

Ура, спойлерить в статьях можно! Но скрыть одно/пару слов можно и abbrилиdfn тегами.

Можно спрятать код в спойлер, если его чтение опционально или затрудняет статью

CSS стили для dfn под спойлером
/* Пример оформления dfn */
dfn {
    color: var(--color-blue-900);
    position: relative;
}
dfn:after {
    content: "*";
    color: var(--color-blue-900);
    
}

dfn:after {
    content: "*";
    color: var(--color-blue-900);
}
dfn::before {
    transition: all 0.2s ease;
    display: inline-block;
    position: absolute; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90vw;
    min-width: 50px;
    padding: 3px 6px;
    background-color: var(--color-blue-50);
    top:0;
    font-size: 0.9em;
    line-height: 0.9em;
    left: 50%;
    transform: translate(0, 0);
}
dfn:hover::before {
    content: attr(title);
    transform: translate(-50%, -110%);
}
А вы знали?

Использование content: attr(title); для псевдо-элемента dfn:hover::before позволяет лучше поддерживать всплывающие подсказки, css всплывает быстрее и на мобильных платформах показывается в отличии от нативного title

Поддерживается подсветка синтаксиса для популярных языков программирования

<?php $foo_bar = array(["foo"] => "bar")

Блочные вставки кода блока подсвечиваются синтаксисом через веб-компонент и библиотеку highlight, пока пользователь не прокрутит экран до блока кода, ему даже не будет подгружен js необходимый для подсветки синтакиса! Модный ныне lazy hydration на фронтенде.

Конечно же вставка картинок как img или с описанием картинки как figure>img+figcaption

Midjourney-Mishra-abstract-dancing-painting Изображение сгенерированное нейросетью Midjourney
по запросу abstract dancing painting

Цитаты

Используем тег q для коротких inline цитат

Есть такая фраза Я не слишком богат, чтобы покупать вещи дважды — вы слышали?

Используем тег blockquote для блока цитаты

БлокЦитаты — лучше использовать отдельно
Он лучше подходит для цитат и выдержек на несколько строк

Стили для браузеров

Добавлено 1 февраля 2023 Полезно при перечислении и упоминании браузеров и их поддержки
span.-browser.-chrome Пример: актуальные версии браузеров на момент обновления статьи 109109 109 16.1 еще примеры в статьях смотрите тут.

Это еще не все

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

p.s поддержку темной темы уже завозим и можно потестировать переключив настройки в ОС\Браузере


Последняя редакция 1 февраля, 2023 в 05:02