如何模仿亚马逊的 Word Wise 注释功能
How to mimic Amazon's Word Wise anotation feature
启用后,eInk Kindle 和一些 Kindle 应用程序会在不常用的单词上方显示定义。例如:
我尝试用 标签模拟这个功能,但是当定义比定义的词长时它不起作用。此外,如果您仔细观察屏幕截图,您会注意到每个单词上方还有一个与其长度相匹配的垂直括号 (?)。
仅使用 HTML5 和 CSS 来模仿此布局的最佳方法是什么?
所以这是我如何执行此操作的基本版本,尽管在 side-by-side 个词的解释重叠的特定情况下我可以看到一些麻烦。
首先,我将每个单词包装在一个 span
元素中,并添加一个带有单词解释的 data-tooltip
属性。我使用伪元素设置样式,以便解释绝对位于每个单词的顶部,并在 word-to-be-explained 上添加一个 border-top 和另一个伪元素来伪造箭头提示。
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 语句:
- word-to-be-explained 在段落长度的前 1/3 之前
- word-to-be-explained 在段落长度的 2/3 之后
- word-to-be-explained 位于上述两个语句之间
...并通过相应地应用 类 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/
如果 side-by-side 的两个单词的解释太长且重叠,您必须将解释宽度限制为单词长度并在末尾添加省略号 (...) - I将采用此解决方案,或计算解释长度并相应地进行调整 - 这太多了。
也许这对你有用:
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>
启用后,eInk Kindle 和一些 Kindle 应用程序会在不常用的单词上方显示定义。例如:
我尝试用 标签模拟这个功能,但是当定义比定义的词长时它不起作用。此外,如果您仔细观察屏幕截图,您会注意到每个单词上方还有一个与其长度相匹配的垂直括号 (?)。
仅使用 HTML5 和 CSS 来模仿此布局的最佳方法是什么?
所以这是我如何执行此操作的基本版本,尽管在 side-by-side 个词的解释重叠的特定情况下我可以看到一些麻烦。
首先,我将每个单词包装在一个 span
元素中,并添加一个带有单词解释的 data-tooltip
属性。我使用伪元素设置样式,以便解释绝对位于每个单词的顶部,并在 word-to-be-explained 上添加一个 border-top 和另一个伪元素来伪造箭头提示。
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 语句:
- word-to-be-explained 在段落长度的前 1/3 之前
- word-to-be-explained 在段落长度的 2/3 之后
- word-to-be-explained 位于上述两个语句之间
...并通过相应地应用 类 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/
如果 side-by-side 的两个单词的解释太长且重叠,您必须将解释宽度限制为单词长度并在末尾添加省略号 (...) - I将采用此解决方案,或计算解释长度并相应地进行调整 - 这太多了。
也许这对你有用:
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>