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 забезпечує більш професійний вигляд друкованих документів, допомагаючи уникнути незручних розривів тексту і покращуючи читабельність.

правити

Порада

Коли налаштовуєте значення orphans, розгляньте можливість використовувати більші значення для елементів з великим об'ємом тексту. Це забезпечить кращу читабельність, особливо для довгих абзаців або блоків тексту. Наприклад, для великих блоків тексту можна встановити element.style.orphans = '4';, що мінімізує ризик залишення одного або двох рядків на новій сторінці.

автор: Bond правити

Порада

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.style.orphans

Переглядачі

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

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	3	8	12

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	-	-

Приклади

+ запропонувати свій приклад у пісочниці

<p>Абзац для прикладу.</p>

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';
        }
    });
});

<form id="orphansForm">
    <label>Ім'я: <input type="text" name="name" value="Лесь"></label>
    <button type="submit">Надіслати</button>
</form>
<input type="text" id="orphansInput" value="текст для прикладу" placeholder="Введи щось">
<p>Абзац для прикладу.</p>

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;
    });
});