text-combine-upright — кілька символів в одну клітинку

HTML

<p lang="ja" class="text">平成20年4月16日に</p>

CSS

.text {
  writing-mode: vertical-lr;
  text-combine-upright: digits 2;
  font: 36px serif;
}

HTML

<div class="cols">
    <div>
        <p class="cap">1. Без властивості</p>
        <div class="v"><span id="s1">令和<span class="y">2026</span>年の縦書き</span></div>
    </div>
    <div>
        <p class="cap">2. <code>all</code> на спані з роком</p>
        <div class="v all"><span id="s2">令和<span class="y">2026</span>年の縦書き</span></div>
    </div>
    <div>
        <p class="cap">3. <code>digits 2</code> на всьому блоці</p>
        <div class="v dg"><span id="s3">令和<span class="y">2026</span>年の縦書き</span></div>
    </div>
    <div>
        <p class="cap">4. <code>all</code> у горизонтальному тексті</p>
        <div class="h"><span id="s4">рядок <span class="y">2026</span> року</span></div>
    </div>
</div>

<table id="report">
    <thead><tr><th>колонка</th><th>обчислене значення</th><th>висота шматка «2026»</th></tr></thead>
    <tbody></tbody>
</table>

CSS

.cols {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.v {
    writing-mode: vertical-rl;
    height: 240px;
    padding: 8px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
    font: 20px/1.3 serif;
}

.h {
    padding: 8px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
    font: 20px/1.3 serif;
}

/* складаємо в одне знакомісце лише короткий шматок */
.all .y,
.h .y {
    text-combine-upright: all;
}

/* автоматичний варіант — у Firefox відкочується до none */
.dg {
    text-combine-upright: digits 2;
}

.y {
    color: #2f6fd0;
}

table {
    margin-top: 16px;
    border-collapse: collapse;
    font-size: .88rem;
}

th,
td {
    padding: 5px 9px;
    border: 1px solid #b9c6d8;
    text-align: left;
}

th {
    background: #eef4ff;
}

.cap {
    margin: 0 0 8px;
    font-size: .95rem;
    color: #5a6472;
}

code {
    background: #eef4ff;
    border-radius: 3px;
    padding: 0 4px;
}

JS

const RYADKY = [
    ['1. без властивості', '.v:not(.all):not(.dg)', '#s1'],
    ['2. all на спані', '.v.all', '#s2'],
    ['3. digits 2 на блоці', '.v.dg', '#s3'],
    ['4. all у горизонтальному', '.h', '#s4'],
];

const tbody = document.querySelector('#report tbody');

for (const [nazva, blok, span] of RYADKY) {
    const rik = document.querySelector(span + ' .y');
    const vysota = Math.round(rik.getBoundingClientRect().height * 10) / 10;
    const shyryna = Math.round(rik.getBoundingClientRect().width * 10) / 10;
    const obchyslene = getComputedStyle(document.querySelector(blok)).textCombineUpright;

    const row = tbody.insertRow();
    row.insertCell().textContent = nazva;
    row.insertCell().textContent = obchyslene;
    row.insertCell().textContent = vysota + 'px (ширина ' + shyryna + 'px)';

    console.log(nazva + ': обчислене =', obchyslene, '| висота «2026» =', vysota + 'px');
}
// → 1. без властивості: обчислене = none | висота «2026» = 44.7px
// → 2. all на спані: обчислене = none | висота «2026» = 20px  (all стоїть на самому спані, а не на блоці)
// → 3. digits 2 на блоці: обчислене = none | висота «2026» = 44.7px — значення не прийнято
// → 4. all у горизонтальному: висота 28px, ширина 44.7px — властивість тут мовчить

console.log('CSS.supports("text-combine-upright", "all"):',
    CSS.supports('text-combine-upright', 'all')); // → true
console.log('CSS.supports("text-combine-upright", "digits 2"):',
    CSS.supports('text-combine-upright', 'digits 2')); // → false у Firefox

HTML

<p class="v">令和<span class="year">2026</span>年の縦書き</p>

CSS

.v {
    writing-mode: vertical-rl;
    height: 180px;
    font-size: 22px;
}

.year {
    text-combine-upright: all;
}

HTML

<p>Вибери потрібне значення для <code>text-combine-upright</code>:</p>

<select id="form">
  <option value="none" name="value2" selected>none</option>
  <option value="all" name="value2">all</option>
<!--   <option value="digits" name="value2">digits</option> -->
</select>

<p id="text">Текст виводиться як зазвичай. За замовчуванням.</p>

<hr>

<p id="block">平成20年4月16日に</p>

CSS

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  text-align: center;
  font-family: monospace;
  font-size: 17px;
  line-height: 1.5;
  color: #222;
}


#form {
  padding: 8px 16px;
  font-size: 19px;
}

#block {
  margin: 75px auto 0 auto;
  background: gold;
  padding: 16px;
  font-size: 18px;
  color: #222;
  writing-mode: vertical-lr;
  text-combine-upright: none;
}

#text {
  height: 150px;
  background-color: #eee;
  padding: 16px 0;
}

JS

var block = document.getElementById('block');
var form = document.getElementById('form');
var text = document.getElementById('text');

var textArray = { 'none': 'Форматування не відбувається. Значення без задання.',
  'all': 'Всі послідовні символи в контейнері розміщуються горизонтально, щоб зайняти простір одного символу в межах вертикальної лінії контейнеру.',
  'digits': 'Браузер спробує розмістити горизонтально кожну максимальну послідовність послідовних цифр ASCII (U + 0030â € U + 0039), яка має стільки або менше символів, ніж зазначене ціле число, яке займає пробіл одного символу у вікні вертикальної лінії. Значення у діапазоні 2-4.' };

form.onchange = function change() {

  var newVal = getNewValue();
  block.style.textCombineUpright = newVal;
  text.innerHTML = textArray[newVal];

};

function getNewValue() {

  var result = '';

  for (var i = 0; i < form.options.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    if (form.options[i].selected == true) {
      result = form.options[i].value;
    }
  }window.CP.exitedLoop(0);

  return result;

}
//# sourceURL=pen.js