fbpx
印刷

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

作成日:2021年7月2日
最終更新日:2023年8月22日

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

    MENU
    PAGE TOP