🥨
ブラウザ上で自動改行されたテキスト表示の各行を取得したメモ
ブラウザ上で自動改行により適切に表示されているテキストの各行を、諸事情により抽出する必要が出てきたのでそれを実装したメモです。そのようなWebAPIが提供されていないので無理やり実現した感が否めませんが、申し訳程度にパフォーマンス向上策を盛り込んだので良しとする事にします。今のところChromeでのみ動作検証しているため、Firefox/Safariでは結果が少し異なる可能性があります。
前提と方針
実現したい事
幅が制限されたブロック要素の中に表示されている長いテキストは通常、要素内に収まるようにブラウザによって自動改行される。この自動改行されたテキストの各行を把握した上で何らかの処理を行うために、各行のテキスト内容をstring[]として抽出する。
対応方針
RangeオブジェクトのgetClientRectsメソッドを用いてブラウザがどのようにテキストを行分けしてレンダリングしているか(する予定か)を取得して判定する。テキストを任意の長さに何度も切り取り、その都度getClientRectsで得られる行数が変化するかを確認することで自動改行が存在する位置を検知する。
制約
- 抽出対象テキスト(テキストノード)はインライン要素の子である必要がある
- テキストノードがブロック要素の子である場合、自動改行の無い結果しか取得できない
- テキストノードを指定した
RangeでgetClientRectsメソッドを適用する必要がある- インライン要素自体を指定するとテキストを任意長に切り取ることができない
実装
デモ
code
App.svelte
<script module lang="ts">
import { benchmark, getFirstTextNode, getEachLine } from "./Lib.svelte";
const dummy = {
short: `私は\n今朝まあこの学習「Lorem ipsum dolor」のため、"sitamettemporerattincidunt ipsum at 🏴"屋ってのをしならで。`,
long: ` 洋服 が用いらしくのもいくら時間がはたしてでたべき🏴☠️。しばしば張さんに徴価値そう教育で"Liber no ea dolores dolores vero et dolores sit amet volutpat duis dolor diam diam diam feugiat labore."思っず弟その主人それか馳走でってご膨脹ですだだたて、その前は私か事業性からして、大森君ののに思想の私でもっともご演説と云いけれども私自分でご担任をなるようにせっかくご一言が引張りなたと、ちっともついに生活をいだがいけたのにもっだた🏴。 あるい は「Lorem ipsum dolor sitamettemporerattincidunt ipsum at 🏴」またはお春に釣っはずはそう大変とすれだって、その方向をも参りだばに対して当否を起るて得るずた🏴。`,
};
const widthRates = [4, 2, 1];
</script>
<script lang="ts">
let elems = $state<HTMLSpanElement[]>([]);
let results = $state<{ duration: number, result: string[]}[]>([]);
let type = $state("short");
function onclick() {
for (let i = 0; i < 3; i++) {
const text = getFirstTextNode(elems[i]);
if (!text) continue;
results[i] = benchmark(() => getEachLine(text));
}
}
</script>
<select bind:value={type} onchange={() => results = []}>
<option>short</option>
<option>long</option>
</select>
<button type="button" {onclick}>detect lines</button>
{#each widthRates as rate, i (rate)}
<div class="box example" style={`width:${5*rate}rem;`}>
<span bind:this={elems[i]}>{dummy[type]}</span>
</div>
{#if results[i]?.duration}
<div>Duration: {`${results[i].duration.toFixed(2)}ms`}</div>
{/if}
<ol>
{#each results[i]?.result as line}
<li class="box">{line}</li>
{/each}
</ol>
<hr />
{/each}
<style>
.example {
margin-block: 1rem;
margin-left: 1rem;
overflow: visible;
}
.box {
border: solid;
border-width: 1px;
}
ol {
padding-left: 1rem;
}
</style>
Lib.svelte
<script module lang="ts">
export function benchmark<T>(fn: () => T): { duration: number, result: T } {
const start = performance.now();
const result = fn();
return {
duration: performance.now() - start,
result,
};
}
export function getFirstTextNode(node?: Node): Text | null {
if (!node) return null;
const isTextNode = (node: Node): node is Text => node.nodeType === 3;
for (const child of node.childNodes) {
if (isTextNode(child)) return child;
}
return null;
}
export function getEachLine(text: Text): string[] {
const offsets = seekLineBreakOffsets(text);
return getLines(text, offsets);
}
function seekLineBreakOffsets(text: Text): number[] {
const { range, lines, step } = initRange(text);
const breaks: number[] = [];
for (let i=1; i<lines; i++) {
const offset = estimateRoughNextOffset(text, range, i, step);
breaks.push(refineBreakOffset(text, range, i, offset));
}
return breaks;
}
function initRange(text: Text) {
const range = getTextRange(text);
const lines = range.getClientRects().length;
return {
range,
lines,
step: createHalfDecayGenerator(Math.trunc(text.length / lines)),
};
}
function getTextRange(text: Text): Range {
const range = new Range();
range.setStartBefore(text);
range.setEndAfter(text);
return range;
}
function createHalfDecayGenerator(initNum: number): (initialize?: boolean) => number {
const init = Number.isInteger(initNum) ? Math.abs(initNum) * 2 : 1;
let last = init;
return (initialize) => {
if (initialize) last = init;
last = Math.ceil(last / 2);
return last;
};
}
function estimateRoughNextOffset(text: Text, range: Range, current: number, step: (init?: boolean) => number): number {
let offset = step(true) * current;
while (!isNextLineOnwards(text, range, current, offset)) {
offset += step();
}
while (true) {
const delta = step();
if (delta < 5) break;
if (isNextLineOnwards(text, range, current, offset - delta)) offset -= delta;
}
return offset;
}
function refineBreakOffset(text: Text, range: Range, current: number, offset: number): number {
do {
offset--;
} while (isNextLineOnwards(text, range, current, offset))
return offset;
}
function isNextLineOnwards(text: Text, range: Range, current: number, offset: number): boolean {
range.setEnd(text, offset);
return range.getClientRects().length > current;
}
function getLines(text: Text, offsets: number[]): string[] {
const range = new Range();
const lines: string[] = [];
range.setStart(text, 0)
for (const offset of [...offsets, text.length]) {
range.setEnd(text, offset);
appendRenderedLine(lines, range.toString());
range.setStart(text, offset);
}
return lines;
}
function appendRenderedLine(lines: string[], line: string) {
if (line.trim() || lines.length <= 0) {
lines.push(line);
} else {
lines[lines.length - 1] = lines.at(-1) + line;
}
}
</script>
コード
getEachLine(textNode)を実行することで各行に分割された配列を取得可能。
code
function getEachLine(text: Text): string[] {
const offsets = seekLineBreakOffsets(text);
return getLines(text, offsets);
}
function seekLineBreakOffsets(text: Text): number[] {
const { range, lines, step } = initRange(text);
const breaks: number[] = [];
for (let i=1; i<lines; i++) {
const offset = estimateRoughNextOffset(text, range, i, step);
breaks.push(refineBreakOffset(text, range, i, offset));
}
return breaks;
}
function initRange(text: Text) {
const range = getTextRange(text);
const lines = range.getClientRects().length;
return {
range,
lines,
step: createHalfDecayGenerator(Math.trunc(text.length / lines)),
};
}
function getTextRange(text: Text): Range {
const range = new Range();
range.setStartBefore(text);
range.setEndAfter(text);
return range;
}
function createHalfDecayGenerator(initNum: number): (initialize?: boolean) => number {
const init = Number.isInteger(initNum) ? Math.abs(initNum) * 2 : 1;
let last = init;
return (initialize) => {
if (initialize) last = init;
last = Math.ceil(last / 2);
return last;
};
}
function estimateRoughNextOffset(text: Text, range: Range, current: number, step: (init?: boolean) => number): number {
let offset = step(true) * current;
while (!isNextLineOnwards(text, range, current, offset)) {
offset += step();
}
while (true) {
const delta = step();
if (delta < 5) break;
if (isNextLineOnwards(text, range, current, offset - delta)) offset -= delta;
}
return offset;
}
function refineBreakOffset(text: Text, range: Range, current: number, offset: number): number {
do {
offset--;
} while (isNextLineOnwards(text, range, current, offset))
return offset;
}
function isNextLineOnwards(text: Text, range: Range, current: number, offset: number): boolean {
range.setEnd(text, offset);
return range.getClientRects().length > current;
}
function getLines(text: Text, offsets: number[]): string[] {
const range = new Range();
const lines: string[] = [];
range.setStart(text, 0)
for (const offset of [...offsets, text.length]) {
range.setEnd(text, offset);
appendRenderedLine(lines, range.toString());
range.setStart(text, offset);
}
return lines;
}
function appendRenderedLine(lines: string[], line: string) {
if (line.trim() || lines.length <= 0) {
lines.push(line);
} else {
lines[lines.length - 1] = lines.at(-1) + line;
}
}
簡単な解説
単純化した流れ概要
- テキスト全体が何行か取得する
- 1行あたりのテキスト目安長(テキスト長/行数)を取得する
- 行始め位置から目安長を足したテキストが次の行になるか検査する
- 次の行にならない場合、再度目安長を足して検査する
- 次の行になった位置から1文字ずつ減らして都度検査し、改行が無くなる位置を特定する
- 3,4の操作を各行に対して行い、テキストの改行位置を取得する
- テキストの改行位置から各行のテキスト内容を配列化する
工夫ポイント
- コストが高いと思われる
getClientRectsを呼び出す回数を極力減らせるようにした- 目安長を何度も足す場合、足す値を都度半減して改行に近い位置になる可能性を高めた
- 次の行になった位置からさらに半減させた値を用いて改行に近い位置に調整するようにした
- 改行直前の半角スペースは表示されていないように見えるが、結果には含めることにした
- 使用時に必要に応じて
trimすれば良いだけのため
- 使用時に必要に応じて
雑記
テスト中抽出1回に50ms程度かかった場合もあり、処理的にかなり重いので乱用はできませんが、スポットで使用する分にはある程度耐えるぐらいの処理内容になっている気がします。こんな処理がどうしても必要になるケースは相当稀だと思うので、そもそも乱用する機会自体ない気もします。
また、文字描画方向の左右や文字コード等によって不具合が出ないように影響がありそうな処理はRangeオブジェクトに任せています。そのためどんな言語でも問題なく使用可能なはずです。・・・はずです。
Discussion