1

我正在创建一个小“差异-/偏移”显示，我想在文本中的某些位置绘制某种“线”，以可视化“差异”发生的位置。基本上我想从中得到：

在此处输入图像描述

对此或类似的东西：

在此处输入图像描述

我知道画布元素，我可以用它画线，但我怎么能把这样的图像放在正确的地方呢？

对于这样的方法，是否有“简单”的 CSS 解决方案？

有什么我可以遵循的最佳实践吗？例如，任何 ToolTip 插件/脚本都必须使用类似的东西来指向某个地方。

我很感谢您对此提供任何帮助提示。我的 jsfiddle 的原始链接：http: //jsfiddle.net/bKng6/

4

6 回答 6

2

在您想要标记的位置，将线的右侧包裹在一个跨度中。使用border-bottom 和border-left 属性。

于 2012-05-10T11:13:53.893 回答
2

我不确定您的应用程序应该做的预期行为是什么（谈论与最终用户的交互）。您没有提到解决方案将如何跨浏览器。无论如何，如果没有一些 JavaScript 片段，我认为纯 CSS（也是 CSS3）无法解决它。所以，我想补充一下 tucuxi和FelipeAls 的建议。

基本上，关于线路，在其开发过程中需要牢记以下几点：

  • 有很多解决方案可以划清界限。如前所述 Canvas 它可以是一种选择，但我确信它不是更简单的选择。

  • tucuxi建议的工作示例是通过 CSS annitations 完成的，这是一个不错的选择，比 canvas 更简单，并且可以改进以完成FelipeAls提出的相同设计。

  • 如果您与最终用户的预期视觉交互接近 FelipeAls 的建议，那么默认情况下边框宽度为 2px 的 div 加上右侧和底部边框宽度都设置为 0 将解决您的线条疑问。我在这里制作了工作样本。在建议的示例中，我使用 DOM 相对位置来测量正确的行位置。尽管我是使用 jQuery 完成的，但您始终可以在纯 JS 或其他基于 DOM 的库（如 Mootools）中执行此操作。

我真的希望它可以帮助你。

于 2012-09-08T20:49:14.710 回答
1

通过结合：

  • 注释的绝对定位（放置在 HTML 代码中靠近要添加或删除的文本，因此相对于它放置）
  • “箭头”由 2 个伪边框组成:after
  • :before在 CSS 中使用伪和生成的内容“-”添加或删除文本的视觉提示
  • 屏幕阅读器用户的视觉隐藏文本，他们不知道添加或删除了什么，因为信息主要通过使用颜色和 CSS 中生成的内容来传达（只有 VoiceOver 会读取它，在这种情况下我什至不确定，因为屏幕阅读器倾向于忽略单个字符，因为它们经常被滥用为在应该使用 HTML 列表项的纯文本中制作列表的项目符号）

有可能产生纯 HTML/CSS 的结果。它会很容易中断（如果每行添加一个单词，右侧的注释将在彼此的顶部......）但是有 JS 和:hover事件（加上:focus和tabindex有视力的键盘用户，不要忘记触摸事件！）有可能避免这种情况。
它仍然支持高达 200% 的缩放文本（Firefox 中“仅缩放文本”的第 6 级）；问题在于修改的数量以及它们在文本中的接近程度，正确和绝对定位的评论长度。

==>小提琴中的 DEMO

纯 HTML/CSS 样式的 diff 快照

于 2012-09-07T21:17:56.060 回答
1

您基本上可以通过将跨度附加到容器
DEMO
来绘制任何您想要的东西， 选择一种颜色并像在 Paint 上一样用鼠标绘制。

于 2012-05-10T11:11:29.917 回答
0

我认为您最好使用工具提示。我能想到的所有使用 CSS 的方法对我来说似乎都是骇人听闻的。

看看这个，例如：http: //jquerytools.org/demos/tooltip/index.html

我纠正自己：也许你可以通过使用 ::before 创建一个元素来获得你想要的东西。我不确定这是否是更好的选择，取决于您的需求。

于 2012-05-10T11:20:48.037 回答
0

你可以通过 JavaScript 找到偏移量和尺寸，使用 jQuery 的offset () 和width()/height()调用。一旦有了源和目标框，就可以在它们之间画线了。您可以使用普通的 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 回答