JS властивість CSSStyleDeclaration.orphans

Загальний опис

element.style.orphans – це CSS-властивість, яка використовується для управління друком і визначає мінімальну кількість рядків блоку, які повинні залишитися разом на сторінці, коли блок розривається на дві сторінки. Ця властивість особливо корисна при форматуванні документів для друку, щоб уникнути залишення однорядкових абзаців (або "сиріт") на одній сторінці.

Щоб скористатися властивістю orphans через JavaScript, спочатку потрібно отримати доступ до потрібного елемента DOM. Це можна зробити за допомогою методів, таких як document.getElementById або document.querySelector. Після цього можна встановити значення для властивості orphans, яке зазвичай є цілим числом.

Приклад 1: Встановлення значення orphans для елемента

// Отримуємо елемент за його ID
let element = document.getElementById('myElement');

// Встановлюємо значення orphans на 3
element.style.orphans = '3';

У цьому прикладі ми отримали елемент з ID myElement і встановили для нього значення orphans на 3, що означає, що при друку мінімум три рядки тексту повинні залишитися разом на сторінці.

Властивість orphans використовується разом із властивістю widows, яка визначає мінімальну кількість рядків блоку, які повинні залишитися разом на новій сторінці, коли блок переноситься. Ці дві властивості допомагають уникнути незручних розривів тексту при друку.

Приклад 2: Використання orphans і widows разом

// Отримуємо елемент за його ID
let element = document.getElementById('myElement');

// Встановлюємо значення orphans на 2
element.style.orphans = '2';

// Встановлюємо значення widows на 2
element.style.widows = '2';

У цьому прикладі ми встановили значення orphans і widows на 2, що забезпечує, що при друку як мінімум два рядки залишаться разом на сторінці та два рядки перейдуть на наступну сторінку, якщо відбудеться розрив.

Властивість orphans рідко використовується в повсякденному веб-розробці, але вона дуже важлива для підготовки документів до друку, де якість форматування має велике значення.

Приклад 3: Динамічне налаштування властивості orphans на основі контенту

// Функція для налаштування orphans на основі довжини тексту
function setOrphans(element) {
    let textLength = element.innerText.length;
    if (textLength > 500) {
        element.style.orphans = '3';
    } else {
        element.style.orphans = '2';
    }
}

// Отримуємо елемент за його ID і налаштовуємо orphans
let element = document.getElementById('myElement');
setOrphans(element);

У цьому прикладі ми створили функцію, яка налаштовує значення orphans на основі довжини тексту всередині елемента. Якщо текст довший за 500 символів, значення orphans встановлюється на 3, інакше – на 2. Це дозволяє динамічно змінювати параметри друку залежно від вмісту елемента.

Використання властивості element.style.orphans забезпечує більш професійний вигляд друкованих документів, допомагаючи уникнути незручних розривів тексту і покращуючи читабельність.

Синтаксис

element.style.orphans

Значення

Return

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі
• Серверні переглядачі

Приклади

• Приклад 1
• Приклад 2

window.addEventListener('resize', function() {
    let paragraphs = document.querySelectorAll('p');
    paragraphs.forEach(paragraph => {
        if (window.innerWidth < 600) {
            paragraph.style.orphans = '1';
        } else {
            paragraph.style.orphans = '2';
        }
    });
});

document.getElementById('orphansForm').addEventListener('submit', function(event) {
    event.preventDefault();
    let orphansValue = document.getElementById('orphansInput').value;
    let paragraphs = document.querySelectorAll('p');
    paragraphs.forEach(paragraph => {
        paragraph.style.orphans = orphansValue;
    });
});