Как имитировать функцию аннотации Word Wise в Amazon - PullRequest
Новая
       56

Как имитировать функцию аннотации Word Wise в Amazon

2 голосов
/ 27 июня 2019

Если включено, eInk Kindles и некоторые приложения Kindle отображают определения над редко используемыми словами. Например:

Kinde Word Wise screenshot

Я пытался эмулировать эту функцию с помощью тегов

Как лучше всего имитировать этот макет, используя только HTML5 и CSS?

Ответы [ 2 ]

2 голосов
/ 02 июля 2019

Может быть, это может работать для вас: 

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>
2 голосов
/ 01 июля 2019

Итак, вот базовая версия того, как я это сделаю, хотя я вижу некоторые проблемы в определенных сценариях, где объяснения параллельных слов перекрываются.

Сначала я завернул каждое слово в элемент 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) и создал оператор if для 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');
    }
  })
})

Вот рабочая скрипка: https://jsfiddle.net/fgnp07ty/1/

В случае, когда объяснения двух слов, расположенных рядом, слишком длинные и накладываются друг на друга, вам придется либо ограничить ширину объяснения длиной слова и добавить многоточие в конце (...) - я бы пошел с этим решением, или рассчитайте длину объяснения и скорректируйте соответственно - это слишком много.

...