如何模仿亚马逊的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，我计算了每个paragraph的长度（假设所有的width都相同），并为以下3种情况创建了if语句： -待解释的单词在段落长度的前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');
    }
  })
})

这是一个工作的小提琴： https://jsfiddle.net/fgnp07ty/1/

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

Answer 2

也许这对您有用：

p{
line-height:2em;
}
span{
position:relative;
}
span:after{
content: "";
    width: 0.3rem;
    height: 0.3rem;
    display: block;
    position: absolute;
    border-bottom: solid 1px coral;
    border-left: solid 1px coral;
    background: white;
    top: -0.1rem;
    left: 10%;
    transform: rotate(-45deg);
}
span:before{
content:"the definition of penatibus";
font-size:.7em;
line-height:1rem;
color:coral;
position:absolute;
top:-1rem;
white-space:nowrap;
border-bottom:solid 1px coral;
width:100%;
}

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque <span>penatibus</span> et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>