css - 如何模仿亚马逊的Word Wise注释功能

Question

启用后，eInk Kindle 和某些 Kindle 应用会在不常用单词上方显示定义。例如:

我尝试使用 标签来模拟此功能，但当定义长于定义的单词时，它不起作用。另外，如果您仔细观察屏幕截图，您会发现每个单词上方还有一个与其长度相匹配的垂直括号(？)。

仅使用 HTML5 和 CSS 来模拟此布局的最佳方法是什么？

Answer 1

因此，这是我如何执行此操作的基本版本，尽管在并排单词的解释重叠的特定场景中我可以看到一些问题。

首先，我将每个单词包装在 span 元素中，并添加带有单词解释的 data-tooltip 属性。我使用伪元素进行样式设置，以便解释绝对位于每个单词的顶部，并在要解释的单词上添加一个边框顶部和另一个伪元素来伪造箭头提示。

CSS:

body {
  font-size:22px;
}
[data-tooltip] {
  position:relative;
  display:inline-block;
  margin-top:20px;
  border-top:1px solid red;
}
[data-tooltip]:before {
  content:attr(data-tooltip);
  font-size:12px;
  position:absolute;
  display:inline-block;
  white-space:nowrap;
  /* left:0; */
  margin-top:-20px;
}
[data-tooltip]:after {
  content:"";
  display:block;
  width:6px;
  height:6px;
  border-top:1px solid red;
  border-right:1px solid red;
  transform:rotate(-45deg);
  position:absolute;
  left:50%;
  margin-left:-3px;
  top:-4px;
  background:#fff;
}
[data-tooltip].left:before {
  left: 0 !important;
}
[data-tooltip].right:before {
  right: 0 !important;  
}
[data-tooltip].center:before {
  left: 50% !important;
  transform:translateX(-50%);
}

此外，使用Javascript，我获取了每个段落的长度(假设所有段落都具有相同的宽度)，并为以下3种场景: - 待解释的单词位于段落长度的前 1/3 之前 - 待解释的单词在段落长度的2/3之后 - 待解释的词位于上述两个语句之间 ...并通过相应地应用类 left、right 或 center 来相应调整解释。

Javascript

$(window).on('load resize', function() {
    pw = $('p').first().width();
  $('[data-tooltip]').each(function() {
    pos = $(this).offset().left;
    if (pos < pw/3) {
    console.log('run');
        $(this).removeClass().addClass('left');
    } else if (pos > pw*2/3) {
        $(this).removeClass().addClass('right');
    } else if ((pos > pw/3) && (pos < pw*2/3)) {
        $(this).removeClass().addClass('center');
    }
  })
})

这是一个工作 fiddle : https://jsfiddle.net/fgnp07ty/1/

如果两个并排单词的解释太长且重叠，您必须将解释宽度限制为单词长度并在末尾添加省略号(...) - 我会去使用这个解决方案，或者计算解释长度并相应调整 - 这太多了。