1

小さな「diff-/offset」表示を作成しています。テキスト内の特定の場所に何らかの「線」を描画して、「diff」が発生した場所を視覚化したいと思います。基本的に私はこれから得たいです：

ここに画像の説明を入力してください

これまたは類似のものに：

ここに画像の説明を入力してください

私はcanvas要素について知っていて、それを使って線を引くことができますが、どうすればそのような画像を正しい場所に配置できますか？

このようなアプローチのための「簡単な」CSSソリューションはありますか？

従うことができるベストプラクティスはありますか？たとえば、ToolTipプラグイン/スクリプトは、特定の場所を指すようなものを使用する必要があります。

私はこれについての助けのヒントに感謝しています。私のjsfiddleへの元のリンク：http： //jsfiddle.net/bKng6/

4

6 に答える 6

2

マーカーが必要な場所で、線の右側をスパンでラップします。border-bottomおよびborder-leftプロパティを使用します。

于 2012-05-10T11:13:53.893 に答える
2

アプリケーションが期待する動作（エンドユーザーとのやり取りについて話している）がわかりません。ソリューションがどのようにクロスブラウザになるかについては言及していません。とにかく、純粋なCSS（CSS3も）がJavaScriptスニペットなしでそれを解決するとは思いません。それで、私はtucuxiとFelipeAlsの推測を補完したいと思います。

基本的に、ラインについて、その開発中に留意すべきいくつかの事柄：

  • 線を引くための解決策はたくさんあります。前述のように、Canvasを選択することもできますが、単純なものではないと確信しています。

  • tucuxiによって提案された作業例は、 CSSアニメーションを介して行われたもので、キャンバスよりも単純で、 FelipeAlsによって提案されたものと同じ設計を実現するために改善できます。

  • エンドユーザーとの予想される視覚的相互作用がFelipeAlsの提案に近い場合、デフォルトで2pxの境界線幅のdivに加えて、右と下の両方の境界線幅を0に設定すると、線の疑問が解決します。ここで作業サンプルを作成しました。提案されたサンプルでは、​​DOM相対位置を使用して正しいライン位置を測定しました。私はjQueryを使用してこれを行いましたが、これは純粋なJSまたはMootoolsなどの別のDOMベースのライブラリでいつでも実行できます。

お役に立てば幸いです。

于 2012-09-08T20:49:14.710 に答える
1

基本的に、コンテナにスパンを追加することで、好きなものを描くことができます。
デモ
ペイントで色を選択し、ペイントの場合と同じようにマウスで描画します。

于 2012-05-10T11:11:29.917 に答える
1

組み合わせることによって：

  • コメントの絶対位置（追加または削除されるテキストの近くのHTMLコードに配置されるため、テキストに対して相対的に配置されます）
  • 疑似の2つの境界線で作られた「矢印」:after
  • :beforeCSSで疑似コンテンツおよび生成コンテンツ「-」を使用してテキストが追加または削除される視覚的な合図
  • 情報は主に色とCSSで生成されたコンテンツの使用によって伝達されるため、何が追加または削除されたかわからないスクリーンリーダーユーザー向けの視覚的に非表示のテキスト（VoiceOverのみがそれを読み取ります。この場合はわかりません。スクリーンリーダーは、単一の文字を無視する傾向があります。これは、HTMLリストアイテムを使用する必要があるプレーンテキストでリストを作成するための箇条書きとして悪用されることが多すぎるためです）

純粋なHTML/CSSで結果を得ることが可能です。それはかなり簡単に壊れます（各行に単語が追加されている場合、右側のコメントは互いに重なり合います...）が、JSと:hoverイベント（さらに:focus、tabindex目の見えるキーボードユーザーにとっては、タッチイベントを忘れないでください） ！）それを回避することは可能です。
それでも、最大200％のズームテキストをサポートします（Firefoxの「ズームテキストのみ」の第6レベル）。問題は、修正の数とそれらがテキストにどれだけ近いか、右と絶対位置に関するコメントの長さです。

==>フィドルのデモ

純粋なHTML/CSSでスタイル設定されたdiffのスナップショット

于 2012-09-07T21:17:56.060 に答える
0

ツールチップを使用する方がよいと思います。CSSを使ってそれを行うことを考えることができるすべての方法は、私にはハックのように思えます。

たとえば、これを見てください：http: //jquerytools.org/demos/tooltip/index.html

私は自分自身を訂正します：多分あなたは::beforeを使って要素を作成することを使ってあなたが望むものを手に入れることができるでしょう。それがより良い選択肢であるかどうかはわかりませんが、ニーズによって異なります。

于 2012-05-10T11:20:48.037 に答える
0

jQueryのoffset（）およびwidth（）/ height（）呼び出しを使用して、JavaScriptを介してオフセットとディメンションを見つけることができます。ソースとデスティネーションのボックスができたら、それらの間に線を引くだけです。これは、プレーンHTML + CSSを使用して、非常に薄い色付きのdivを作成し、必要に応じて回転させることで実行できます（画像のように直交線を使用する場合は、回転は必要ありません）。

jQuery要素eを指定すると、次を使用してその境界ボックス（左、上、幅、高さ）を取得できます。

function box(e) {
    var b = e.offset();
    b.width = e.width();
    b.height = e.height();
    return b;
}

元のフィドルと@Mageekのコメントに基づいて、この実用的な例を参照してください。

于 2012-09-07T13:15:48.517 に答える