Скриншоты схемы и подписи

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

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

Что именно должен показать рисунок

У старого урока LINQ изображения сопровождают полученный вывод. Их назначение связано с определённым листингом. Поэтому полезно говорить не «картинка после кода», а «результат данного условия отбора». Такая формулировка помогает выбрать место, подпись и размер. Перестановка изображения к другой программе ради красивой композиции нарушит объяснение.

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

Подпись должна назвать содержание и существенное условие. «Рисунок 1» даёт только порядковый номер. «Место для собственной схемы: исходник, HTML и чтение» объясняет назначение нашего прототипа. В реальной статье допустима более конкретная подпись с версией программы или выбранным режимом, если эти сведения действительно известны.

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

Один визуальный блок

Продолжайте состояние восьмого урока. Ниже полный файл lesson-09.css:

.reading-lab .lab-figure { max-width: 100%; }
.reading-lab .lab-figure img { max-width: 100%; height: auto; margin-inline: auto; border-radius: var(--lab-radius); }
.reading-lab .lab-figure figcaption { max-width: 62ch; line-height: 1.55; }
.reading-lab .lab-prototype { min-height: 10rem; display: grid; place-items: center; text-align: center; }
.reading-lab .lab-figure + p { margin-block-start: 1.25rem; }

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

У настоящего изображения height: auto сохраняет пропорцию при ограничении ширины. Небольшое изображение не растягивается автоматически до полной колонки: задан максимум, а не обязательная ширина. Для снимков интерфейса это особенно важно. Растягивание маленького растра создаёт крупную, но менее чёткую картинку и не восстанавливает утраченные детали.

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

Будущее изображение с известными размерами

Когда у вас появится собственная схема размером 1200 на 675 пикселей, замените только div.lab-prototype внутри существующего figure следующим вариантом. Это ресурсный пример: имя файла предполагает, что вы предварительно предоставили соответствующий файл в папке media.

<img src="media/markdown-flow.png" width="1200" height="675"
     alt="Схема перехода от исходника Markdown к HTML и чтению готовой страницы">

Числа здесь относятся к условному выбранному ресурсу, а не к уже созданной иллюстрации. У фактического файла необходимо указать его собственную пропорцию. Атрибуты размера помогают браузеру резервировать место до загрузки; такой приём рассматривается в web.dev об устойчивости вёрстки. Изменение CSS-ширины не отменяет необходимость точных исходных размеров.

Не задавайте всем учебным изображениям одинаковую высоту с object-fit: cover. Такой режим заполняет область и может обрезать часть изображения. Для фотографии карточки это иногда допустимо, а для вывода консоли — может удалить строку результата. Различие cover и contain описано в MDN. В основном блоке оставим изображение целиком.

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

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

Пропорция изображения также влияет на расположение подписи. Под узким вертикальным снимком подпись может занимать всю ширину колонки; это допустимо, если её связь с объектом понятна. Не сужайте длинное пояснение до нескольких слов в строке только ради совпадения с шириной картинки. Размер изображения определяется видимой деталью, а длина строки подписи — удобством чтения. Эти ограничения могут различаться внутри одного блока.

Масштаб и читаемая деталь

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

Увеличенный фрагмент должен быть честно обозначен. Если вы оставили только область сообщения, подпись сообщает об этом, а текст объясняет, где она находится. Читателю не нужно угадывать, какая часть интерфейса исчезла. При этом сам фрагмент не должен превращать состояние одной программы в якобы универсальный вид всех её версий.

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

Для самостоятельного сравнения замените текст прототипа длинным описанием из трёх предложений. Проверьте будущим просмотром, что он не выходит за пределы области, а подпись сохраняет связь с ней. Затем представьте собственную вертикальную схему вместо горизонтальной. Высота страницы изменится, и это допустимо: содержание определяет геометрию объекта.

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