Documentation · BlinkGTK

縦書き版面メトリクス — verticalFlowMetrics

縦書き (writing-mode: vertical-rl) の段組みについて、エンジンが実際に
使った値をページ側の JavaScript から読み出します。列の境界・行送り・
行数・各行が実際に占めた量を、座標の推測なしに取得できます。

電子書籍のビューアで「いま何行目か」「次の列はどこから始まるか」を知るために
使います。従来は getBoundingClientRect() を並べて推測するしかなく、
行末のぶら下げや列の折り返しがあると合いませんでした。

使う

const m = window.__blinkgtk?.verticalFlowMetrics(document.getElementById('book'));
if (m) {
  console.log(m.columnCount, m.stride, m.originX);
}

引数は縦書きの段組みコンテナの要素です。対象外のとき (縦書きの段組みで
ない、レイアウトがまだ確定していない、など) は 例外ではなく null を
返します。try/catch を書かずに済みます。

有効にする

この API は既定では生えません。 起動時に次のフラグが要ります。

--enable-blink-features=CJKVerticalColumnFragmentation

フラグが無いときは window.__blinkgtk そのものが存在しません。
上の例のように ?. か typeof で機能検出してください。存在しない環境で
そのまま呼ぶと TypeError になります。

返るもの

すべて content px (レイアウト座標。ページの拡大率を掛ける前の値) です。

名前 型 意味
stride number 列 1 つ分の送り幅。使われた列幅 + 使われた列間
originX number 先頭行 (最も右の列の先頭) の右端 X
columnCount number 列の数
lineCount number 本文行の総数
contentWidth number 段組み全体の送り方向の総量
hasBoundaries boolean 列境界を導出できるか (stride > 0 かつ columnCount > 0)
boundaries null 下記参照。現状はつねに null
generation number レイアウト世代。値が変わっていなければ再計算は不要
lines Array 行ごとの実測値 (下記)

列の境界

boundaries は現状つねに null です。 CSS の段組みは構造上つねに等間隔
(同じ列幅 + 同じ列間) なので、配列を持つ必要がありません。境界は割り算で
出せます。

// n 番目 (0 起点、右から) の列の右端 X
const rightEdge = n => m.originX - m.stride * n;

将来 column-span などで不等間隔が生じる形を扱うことになれば、そのときに
実測の配列を載せます。hasBoundaries を見てから使ってください。

lines の各要素

名前 型 意味
inlineSize number その行が実際に占めた量。使える幅ではありません
blockOffset number 行の送り方向の位置 (縦書きでは X)
columnIndex number その行が属する列。エンジンの事実値で、座標比較の結果ではありません
hasHanging boolean 行末にぶら下げがあるか。量は残らないので真偽値だけです

inlineSize が「占めた量」であることが要点です。行が容量まで詰まっているか
どうかは、これと contentWidth を比べれば分かります。

実際の値

出荷物で実測した例です (2026-09-03 採取、Chromium 152.0.7977.64)。900x640 の窓、column-width: 11em、
font: 16px/1.75 serif、column-gap: 2em。

{
  "stride": 272,
  "originX": 352,
  "columnCount": 2,
  "lineCount": 24,
  "contentWidth": 544,
  "hasBoundaries": true,
  "boundaries": null,
  "generation": 2,
  "lines": [
    { "blockOffset": 324, "columnIndex": 0, "hasHanging": false, "inlineSize": 224 },
    { "blockOffset": 296, "columnIndex": 0, "hasHanging": false, "inlineSize": 240 }
  ]
}

読み方: 列は 2 つ、送り幅 272px。右端の列は X=352 から始まり、2 列目は
352 - 272 = 80。行は 24 行あり、最初の 2 行はどちらも 1 列目 (columnIndex: 0)。
1 行目が占めたのは 224px、2 行目は 240px。

気をつけること

関連