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

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

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

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

Приклад 1: Встановлення значення widows через JavaScript. Це корисно, коли потрібно динамічно змінювати налаштування форматування тексту в залежності від контенту або умов.

var element = document.getElementById('textElement');
element.style.widows = '3';

У цьому прикладі елемент з id textElement буде мати мінімум три рядки тексту у верхній частині блоку після розриву сторінки або колонки.

Приклад 2: Використання значення widows у поєднанні з іншими стилями форматування тексту для забезпечення кращої читабельності. Це може бути корисним при друкуванні довгих статей або документів.

var element = document.getElementById('printElement');
element.style.widows = '4';
element.style.orphans = '4'; // Для забезпечення консистентного форматування

У цьому прикладі елемент з id printElement буде мати мінімум чотири рядки тексту у верхній та нижній частині блоку після розриву сторінки або колонки, що забезпечить кращу читабельність і естетичний вигляд при друкуванні.

Приклад 3: Динамічне налаштування значення widows на основі контенту або користувацьких налаштувань. Це може бути корисним для створення адаптивних веб-сторінок, які змінюються в залежності від умов відображення або користувацьких переваг.

var element = document.getElementById('dynamicElement');
var userPreference = getUserPreference(); // Функція для отримання налаштувань користувача

element.style.widows = userPreference.widows;

У цьому прикладі значення widows для елемента з id dynamicElement встановлюється на основі користувацьких налаштувань, що забезпечує більш гнучке та персоналізоване відображення контенту.

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

Синтаксис

element.style.widows

Значення

Return

Переглядачі

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

Приклади

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

var printButton = document.getElementById('printButton');
var contentElement = document.getElementById('content');

printButton.addEventListener('click', function() {
  if (window.innerWidth > 800) {
    contentElement.style.widows = '4';
  } else {
    contentElement.style.widows = '2';
  }
  window.print();
});

var adjustWidowsButton = document.getElementById('adjustWidowsButton');
var longTextElement = document.getElementById('longText');

adjustWidowsButton.addEventListener('click', function() {
  var textLength = longTextElement.textContent.length;
  if (textLength > 1000) {
    longTextElement.style.widows = '5';
  } else {
    longTextElement.style.widows = '2';
  }
});