2021.06リリースでのdivタグの変更点とその理由？

BuildVu-HTMLの2021.06リリースでは、テキスト要素がdivタグからspanタグに変更されました。また、関連する CSS を持つ親コンテナ要素が追加されました。

何が変わったのか？

Before:

<style class="shared-css" type="text/css" >
.t {
	transform-origin: bottom left;
	z-index: 2;
	position: absolute;
	white-space: pre;
	overflow: visible;
	line-height: 1.5;
}
</style>

<div id="t1_1" class="t s1_1">Some things never change</div>
<div id="t2_1" class="t s2_1">Never trust a dog to watch your food.</div>
<div id="t3_1" class="t s3_1">—</div>
<div id="t4_1" class="t s4_1">Patrick, age 10</div>

After:

<style class="shared-css" type="text/css" >
.t {
	transform-origin: bottom left;
	z-index: 2;
	position: absolute;
	white-space: pre;
	overflow: visible;
	line-height: 1.5;
}
.text-container {
	white-space: pre;
}
@supports (-webkit-touch-callout: none) {
	.text-container {
		white-space: normal;
	}
}
</style>

<div class="text-container"><span id="t1_1" class="t s1_1">Some things never change </span>
<span id="t2_1" class="t s2_1">Never trust a dog to watch your food. </span>
<span id="t3_1" class="t s3_1">—</span><span id="t4_1" class="t s4_1">Patrick, age 10 </span></div>

なぜ変わったのか？

これにより、テキストのコピー＆ペースト時に誤って改行が挿入されてしまう問題の修正など、さまざまなメリットがあります。これは、ブラウザがdiv要素のコピー時に、div要素の末尾に改行文字を自動的に挿入するためです。

さらに、テキスト要素間の改行を適切に検出して挿入したり、テキストブロックの最後にスペース文字を必要に応じて追加したりする処理を追加し、テキストの適切な抽出を実現しました。

また、今回の変更により、search.jsonファイルにおいて、単語の途中などに不必要にスペース文字が挿入される問題が修正されました。

Before:

After:

なぜ@supports CSSなのか？

iOSやiPadOSのテキスト選択エンジンは、やや最適とは言えず、絶対配置されたテキスト(PDFのテキストはこのように配置されています)では苦労します。

テキスト選択エンジンは、絶対的に配置されたテキスト内の改行を処理する際に非常に苦労します。

そのため、iOSやiPadOSでは改行を無視するCSSを追加しています。

改行のサポートとは関係なく、iOS/iPadOSではspanタグに切り替えてもテキストの抽出には影響しません。これは、他のブラウザと異なり、iOS/iPadOSのSafariでは、spanタグが絶対配置されている場合、コピー時にspanタグの末尾に改行文字が挿入されるためです。

iOSの動作が理想的ではないことは認識しており、今後も改善のためのアイデアを検討していきます。