19

たとえば、私はこれを持っています：

<pre>
sun<br/>
&nbsp;&nbsp;&nbsp;&nbsp;mercury <br/>
&nbsp;&nbsp;&nbsp;&nbsp;venus <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;earth <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mars <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jupiter <br/>
&nbsp;&nbsp;&nbsp;&nbsp;saturn <br/>
</pre>

この：

<div style="font-family:monospace">
  <div style="text-indent: 0">sun</div> <br/>
  <div style="text-indent: 4ch">mercury</div> <br/>
  <div style="text-indent: 4ch">venus</div> <br/>
  <div style="text-indent: 8ch">earth</div> <br/>
  <div style="text-indent: 8ch">mars</div> <br/>
  <div style="text-indent: 12ch">jupiter</div> <br/>
  <div style="text-indent: 4ch">saturn</div> <br/>
</div>

そして、2番目のものを最初のものとまったく同じように見せたい.

それらは同じに見えると思いますが、私の唯一の証拠は、古い「ウィンドウ間をすばやく切り替えて目で確認する」手法を使用することでした。(天文学者はこれを「まばたき比較器」と呼んでいます -- https://en.wikipedia.org/wiki/Blink_comparator )。ウィンドウが同じサイズで同じ位置にあることを確認しました。しかし、レンダリングされた HTML が画面に収まらない場合、これは難しすぎる可能性があります。

この比較を行うためのより決定的なツールまたは方法はありますか?

Chrome 77.0.3865.120 と Firefox 69.0.3 の両方でこれらを調べました。

たとえば、もともと Web Standards Project ( https://www.acidtests.org/ ) の一部だったブラウザの Acid テストでは、ピクセル パーフェクト レンダリングがベンチマークでした。

(追加クレジット: 2 番目のコード スニペットの HTML は、おそらく私のニーズには十分です。改善を提案したい場合は、歓迎します。)

編集:私の質問は、ブラウザーの表示部分に収まるようにレンダリングできる 2 つの小さな HTML サンプルを比較します。しかし、一般的に、非常に長くなる可能性のある HTML の答えを知りたいです。

4

8 に答える 8

5

DOM を実際に測定するためのアイデアを次に示します。問題のテキストを、クエリ可能なクラスを持つ div に置き換えただけです。次に、すべてのノードのオフセットを出力できます。

私が測定したところ、文字のインデントは確かに&nbsp;.

var nodes = document.getElementsByClassName('measure');

for (var n of nodes) {
  console.log(n.offsetLeft);
}
.measure {
  display: inline-block;
  background: red;
  width: 50px;
  height: 5px;
}
<pre>
<div class="measure"></div><br/>
&nbsp;&nbsp;&nbsp;&nbsp;<div class="measure"></div><br/>
&nbsp;&nbsp;&nbsp;&nbsp;<div class="measure"></div><br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div class="measure"></div><br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div class="measure"></div><br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div class="measure"></div><br/>
&nbsp;&nbsp;&nbsp;&nbsp;<div class="measure"></div><br/>
</pre>

var nodes = document.getElementsByClassName('measure');

for (var n of nodes) {
  console.log(n.offsetLeft);
}
.measure {
  display: inline-block;
  background: red;
  width: 50px;
  height: 5px;
}
<div style="font-family:monospace">
  <div style="text-indent: 0"><div class="measure"></div></div> <br/>
  <div style="text-indent: 4ch"><div class="measure"></div></div> <br/>
  <div style="text-indent: 4ch"><div class="measure"></div></div> <br/>
  <div style="text-indent: 8ch"><div class="measure"></div></div> <br/>
  <div style="text-indent: 8ch"><div class="measure"></div></div> <br/>
  <div style="text-indent: 12ch"><div class="measure"></div></div> <br/>
  <div style="text-indent: 4ch"><div class="measure"></div></div> <br/>
</div>

于 2019-10-28T17:19:29.667 に答える
2

まず、画像をキャプチャする必要があります

キャプチャ方法 1

キーボードのプリント スクリーン ボタン (または他のスクリーンショット ツール) を使用します。

ページが長すぎたり幅が広すぎて画面に収まらない場合は、各ページの複数のスクリーンショットを撮り、フォト エディターでそれらをつなぎ合わせます。大きなページの重複するスクリーンショットを撮り、それらを別々のレイヤーに配置し、重複部分を使用してピースを正確に配置してから、レイヤーを結合してページ全体の合成を作成できます。

キャプチャ方法 2

fireshotなどのブラウザ拡張機能を使用して、ページ全体を一度にキャプチャできます。

次に、画像を比較します

方法 1

  1. photoshop を開くか、photopeaに移動します。

  2. スクリーンショットをレイヤーに貼り付けます。

  3. 2 ページ目も繰り返し、別のレイヤーに貼り付けます。

  4. レイヤーの表示を切り替えると、変更が明らかになります。または、最上層の不透明度を調整して (および/または異なるブレンド モードを設定して) 比較します。

方法 2

ブラウザー内で半透明の画像をオーバーレイできるようにする、 pixel-perfect-2などのブラウザー拡張機能を使用します。これは、ブラウザー内でページをグリッド イメージでオーバーレイできるため、配置と間隔を確認するための便利な拡張機能です。

方法 3

画像差分ツールを使用します。Google で簡単に検索すると、ここにリストするには多すぎます。一部のコード エディター、コマンド ライン ツール、Python スクリプト、およびdiffcheckerなどのオンライン サービス用の画像差分プラグインがあります。

于 2019-11-21T09:43:06.173 に答える
1

ここには非常に複雑で巧妙なコード メソッドがいくつかあるので、単純なものを次に示します。

1 つのスクリーンショットを撮り、透明度をサポートするイメージ エディターで開きます。Photoshop のように、

それを貼り付けてから、CSS の方法で画面を表示し、2 番目に貼り付けた画像を 50% の不透明度に設定して貼り付け、それらが整列するかどうかを確認します。

于 2019-11-21T14:09:14.980 に答える