Увеличение размера текста на сайте: особенности и реализация

// Функция для изменения размера текста
function changeTextSize(multiplier) {
// Получаем текущий базовый размер шрифта (по умолчанию 16px)
const currentSize = parseFloat(
window.getComputedStyle(document.documentElement).fontSize
);

// Устанавливаем новый размер шрифта
document.documentElement.style.fontSize = (currentSize * multiplier) + 'px';

// Сохраняем выбранный размер в localStorage
localStorage.setItem('fontSize', document.documentElement.style.fontSize);
}

// Функция для восстановления размера текста при загрузке страницы
function restoreFontSize() {
const savedSize = localStorage.getItem('fontSize');
if (savedSize) {
document.documentElement.style.fontSize = savedSize;
}
}

// Вызываем функцию восстановления при загрузке страницы
window.addEventListener('DOMContentLoaded', restoreFontSize);

// Создаем класс для управления размером текста
class TextSizeManager {
constructor(defaultSize = 100, steps = [75, 100, 125, 150, 200]) {
this.currentSizeIndex = steps.indexOf(defaultSize);
if (this.currentSizeIndex === -1) {
this.currentSizeIndex = steps.indexOf(100);
}
this.steps = steps;
this.init();
}

init() {
// Восстанавливаем сохраненный размер
const savedSize = parseInt(localStorage.getItem('textSizePercent')) || 100;
this.setTextSize(savedSize);

// Применяем размер к странице
this.applyTextSize();
}

increase() {
if (this.currentSizeIndex < this.steps.length – 1) {
this.currentSizeIndex++;
this.applyTextSize();
}
}

decrease() {
if (this.currentSizeIndex > 0) {
this.currentSizeIndex--;
this.applyTextSize();
}
}

setTextSize(percent) {
const index = this.steps.indexOf(percent);
if (index !== -1) {
this.currentSizeIndex = index;
}
}

applyTextSize() {
const percent = this.steps[this.currentSizeIndex];
document.documentElement.style.fontSize = (percent / 100) + 'rem';
localStorage.setItem('textSizePercent', percent.toString());

// Можно добавить вызов события для обновления UI
const event = new CustomEvent('textsizechange', { detail: { percent } });
document.dispatchEvent(event);
}

getCurrentSize() {
return this.steps[this.currentSizeIndex];
}
}

// Инициализация менеджера
const textSizeManager = new TextSizeManager();

// Пример использования
document.querySelector('#increase-text').addEventListener('click', () => {
textSizeManager.increase();
});

document.querySelector('#decrease-text').addEventListener('click', () => {
textSizeManager.decrease();
});

// Обработчик события изменения размера текста
document.addEventListener('textsizechange', (event) => {
console.log(`Размер текста изменен на ${event.detail.percent}%`);
// Здесь можно обновить UI, например, активировать соответствующую кнопку
});

// Установка размеров через CSS-переменные
function setTextSizeWithVariables(size) {
document.documentElement.style.setProperty('--base-font-size', size + 'px');
}

// Инициализация при загрузке страницы
document.addEventListener('DOMContentLoaded', () => {
const savedSize = localStorage.getItem('baseFontSize');
if (savedSize) {
setTextSizeWithVariables(parseInt(savedSize));
}
});

/* Базовая настройка с использованием CSS-переменной */
:root {
--base-font-size: 16px;
font-size: var(--base-font-size);
}

/* Используйте относительные единицы для всего текстового содержимого */
body {
font-size: 1rem;
line-height: 1.5;
}

h1 {
font-size: 2rem;
}

h2 {
font-size: 1.75rem;
}

h3 {
font-size: 1.5rem;
}

/* Классы для элементов текста разного размера */
.text-small {
font-size: 0.875rem;
}

.text-large {
font-size: 1.25rem;
}

.text-xlarge {
font-size: 1.5rem;
}

/* Основные классы для изменения размера текста */
body {
font-size: 16px; /* Базовый размер */
}

body.text-size-small {
font-size: 14px;
}

body.text-size-medium {
font-size: 16px;
}

body.text-size-large {
font-size: 18px;
}

body.text-size-xlarge {
font-size: 20px;
}

/* Эти классы применяются к тегу body, чтобы все дочерние элементы 
с размерами в em масштабировались автоматически */

:root {
/* Базовые переменные для текста */
--font-size-base: 16px;
--line-height-base: 1.5;

/* Масштабирование различных типов текста */
--heading-scale: 1;
--body-scale: 1;
--ui-scale: 1;
}

/* Заголовки */
h1, h2, h3, h4, h5, h6 {
font-size: calc(var(--font-size-base) * var(--heading-scale) * var(--type-scale));
}

h1 { --type-scale: 2.5; }
h2 { --type-scale: 2; }
h3 { --type-scale: 1.75; }
h4 { --type-scale: 1.5; }
h5 { --type-scale: 1.25; }
h6 { --type-scale: 1.1; }

/* Основной текст */
body, p, li, blockquote {
font-size: calc(var(--font-size-base) * var(--body-scale));
line-height: var(--line-height-base);
}

/* UI-элементы */
button, input, select, textarea {
font-size: calc(var(--font-size-base) * var(--ui-scale));
}

<!-- HTML-структура -->
<div class="text-size-controls">
<button id="decrease-text" aria-label="Уменьшить размер текста">A-</button>
<button id="reset-text" aria-label="Стандартный размер текста">A</button>
<button id="increase-text" aria-label="Увеличить размер текста">A+</button>
</div>

<!-- CSS для стилизации кнопок -->
<style>
.text-size-controls {
display: flex;
align-items: center;
background-color: #f5f5f5;
border-radius: 4px;
padding: 4px;
}

.text-size-controls button {
background: none;
border: 1px solid #ddd;
padding: 5px 10px;
margin: 0 2px;
cursor: pointer;
border-radius: 3px;
transition: all 0.2s ease;
}

.text-size-controls button:hover {
background-color: #e0e0e0;
}

/* Разные размеры для визуального представления */
#decrease-text {
font-size: 12px;
}

#reset-text {
font-size: 16px;
}

#increase-text {
font-size: 20px;
}
</style>

<!-- JavaScript для функциональности -->
<script>
document.getElementById('decrease-text').addEventListener('click', function() {
changeTextSize(0.9); // Уменьшаем на 10%
});

document.getElementById('reset-text').addEventListener('click', function() {
document.documentElement.style.fontSize = '16px'; // Сбрасываем к стандартному
localStorage.removeItem('fontSize'); // Удаляем сохраненное значение
});

document.getElementById('increase-text').addEventListener('click', function() {
changeTextSize(1.1); // Увеличиваем на 10%
});
</script>

<!-- HTML-структура для слайдера -->
<div class="text-size-slider">
<span class="slider-label">A-</span>
<input 
type="range" 
id="text-size-range" 
min="75" 
max="200" 
value="100" 
step="25"
aria-label="Изменить размер текста"
>
<span class="slider-label">A+</span>
</div>

<!-- CSS для стилизации слайдера -->
<style>
.text-size-slider {
display: flex;
align-items: center;
margin: 10px 0;
padding: 8px;
background-color: #f5f5f5;
border-radius: 4px;
}

.slider-label {
margin: 0 10px;
}

.slider-label:first-child {
font-size: 12px;
}

.slider-label:last-child {
font-size: 20px;
}

#text-size-range {
width: 150px;
height: 6px;
background: #ddd;
outline: none;
-webkit-appearance: none;
}

#text-size-range::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px;
height: 16px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
</style>

<!-- JavaScript для функциональности слайдера -->
<script>
const slider = document.getElementById('text-size-range');

// Инициализация с сохраненным значением
window.addEventListener('DOMContentLoaded', () => {
const savedSize = localStorage.getItem('textSizePercent');
if (savedSize) {
slider.value = savedSize;
applyTextSize(savedSize);
}
});

// Обработчик события изменения слайдера
slider.addEventListener('input', () => {
const percent = slider.value;
applyTextSize(percent);
});

function applyTextSize(percent) {
document.documentElement.style.fontSize = (percent / 100) + 'rem';
localStorage.setItem('textSizePercent', percent);
}
</script>

<!-- HTML-структура для переключателя размеров -->
<div class="text-size-switcher" role="group" aria-label="Выбор размера текста">
<button class="size-btn" data-size="small">S</button>
<button class="size-btn active" data-size="medium">M</button>
<button class="size-btn" data-size="large">L</button>
<button class="size-btn" data-size="xlarge">XL</button>
</div>

<!-- CSS для стилизации переключателя -->
<style>
.text-size-switcher {
display: inline-flex;
border-radius: 4px;
overflow: hidden;
border: 1px solid #ddd;
}

.size-btn {
padding: 8px 12px;
background: #f8f8f8;
border: none;
cursor: pointer;
transition: all 0.2s;
font-weight: bold;
}

.size-btn:not(:last-child) {
border-right: 1px solid #ddd;
}

.size-btn.active {
background: #2196F3;
color: white;
}

/* Различные размеры для визуального представления */
.size-btn[data-size="small"] { font-size: 12px; }
.size-btn[data-size="medium"] { font-size: 14px; }
.size-btn[data-size="large"] { font-size: 16px; }
.size-btn[data-size="xlarge"] { font-size: 18px; }
</style>

<!-- JavaScript для функциональности переключателя -->
<script>
const buttons = document.querySelectorAll('.size-btn');
const sizeMap = {
'small': 14,
'medium': 16,
'large': 18,
'xlarge': 20
};

// Инициализация
window.addEventListener('DOMContentLoaded', () => {
const savedSize = localStorage.getItem('textSizeOption');
if (savedSize && sizeMap[savedSize]) {
setActiveButton(savedSize);
setTextSize(savedSize);
}
});

// Обработчик кликов по кнопкам
buttons.forEach(button => {
button.addEventListener('click', () => {
const size = button.dataset.size;
setActiveButton(size);
setTextSize(size);
localStorage.setItem('textSizeOption', size);
});
});

function setActiveButton(size) {
buttons.forEach(btn => {
btn.classList.remove('active');
if (btn.dataset.size === size) {
btn.classList.add('active');
}
});
}

function setTextSize(size) {
if (sizeMap[size]) {
document.body.style.fontSize = sizeMap[size] + 'px';
}
}
</script>

// Чек-лист для тестирования функции масштабирования текста

// 1. Функциональность
[ ] Текст масштабируется корректно при использовании элементов управления
[ ] Все элементы интерфейса доступны при любом размере текста
[ ] Контент не обрезается и не перекрывается при увеличенном размере текста
[ ] Сохраненный размер текста восстанавливается при повторном посещении

// 2. Доступность
[ ] Элементы управления имеют правильные ARIA-роли и метки
[ ] Функция работает с клавиатурного ввода (Tab, Enter, пробел)
[ ] Программы чтения с экрана корректно объявляют элементы управления
[ ] Сохраняется достаточный контраст при всех размерах текста

// 3. Кроссбраузерность
[ ] Функция работает в Chrome
[ ] Функция работает в Firefox
[ ] Функция работает в Safari
[ ] Функция работает в Edge

// 4. Адаптивность
[ ] Функция корректно работает на мобильных устройствах
[ ] Функция корректно работает на планшетах
[ ] Функция корректно работает на десктопах
[ ] Элементы управления адаптируются под разные размеры экрана

// 5. Производительность
[ ] Изменение размера текста происходит без заметных задержек
[ ] Функция не вызывает избыточного перерендеринга страницы
[ ] Код оптимизирован и не содержит утечек памяти