How to mimic Amazon's Word Wise anotation feature

Question

When enabled, eInk Kindles and some Kindle apps display definitions above less frequently used words. For example:

I tried to emulate this feature with tags, but it didn't work when the definition was longer than the defined word. Also, if you look closer at the screen capture, you'll notice that there's also a vertical bracket(?) above each word that matches its length.

What would be the best approach to mimic this layout using only HTML5 and CSS?

user_2261073 · Answer

So here's a basic version of how I would do this, although I can see some trouble in specific scenarios where the explanations of side-by-side words overlap.

First I wrapped each word inside a span element and added a data-tooltip attribute with the word explanation. I styled using pseudo elements so that the explanations are absolutely positioned at the top of each word and added a border-top with another pseudo element on the word-to-be-explained to fake the arrow tip.

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%);
}

Additionally, using Javascript, I took the length of each paragraph (assumed all have same width) and create an if statement for the 3 following scenarios: - the word-to-be-explained is before the first 1/3 of the paragraph length - the word-to-be-explained is after the 2/3 of the paragraph length - the word-to-be-explained is between the two above statements ... and adjusted the explanation accordingly by applying classes left, right or center accordingly.

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');
    }
  })
})

Here is a working fiddle: https://jsfiddle.net/fgnp07ty/1/

In case where explanations of two words that are side-by-side are too long and overlap, you would have to either limit explanation width to the word length and add ellipsis at the end (...) - I would go with this solution, or calculate explanation lengths and adjust accordingly - this is too much tbh.

user_11730164 · Answer

Maybe this can work for you:

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%;
}

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

How to mimic Amazon's Word Wise anotation feature

2 Answers