5

Estou formatando um documento para impressão e preciso adicionar uma quebra de página + cabeçalho e rodapé em determinadas coordenadas, se a coordenada for no meio do paragrafo preciso dividí-lo. Já consigo fazer as inserções ao informar manualmente a posição onde o parágrafo divide.

Na minha abordagem inicial tentei obter a palavra na coordenada (x,y) e depois o indexOf() dessa palavra em relação ao parágrafo. Com "indice" consigo integrar com o código existente.

O mais perto que consegui foi usar a função document.elementFromPoint(x,y), que retorna todo o parágrafo.

Abaixo o código de teste. Estou utilizando o evento clique do mouse para simular as coordenadas. Na minha implementação serão utilizadas somente coordenadas calculadas.

document.addEventListener('click', function(event) {
  alert(document.elementFromPoint(event.clientX, event.clientY).textContent);
}, false);
div {margin: 15px 0;}
p {margin: 0;}
<div>
  <p>Cras vel erat sit amet eros posuere volutpat nec in massa. Quisque dignissim mollis aliquet.</p>
  <p>Fusce suscipit rhoncus mi a dapibus. Donec nisl augue, molestie sed porttitor id, pulvinar tempor neque.</p>
  <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec et enim eleifend velit faucibus consequat vel at risus.</p>
</div>
<div>
  <p>Aliquam erat volutpat.</p>
  <p>Phasellus ornare feugiat convallis. Aenean tincidunt tristique sem eu porttitor. Aliquam convallis eu purus et venenatis.</p>
  <p>Suspendisse euismod ullamcorper odio, ac sollicitudin quam pharetra sed. Vestibulum dictum cursus sollicitudin.</p>
  <p>Praesent at odio nisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris sodales vehicula neque quis imperdiet. Morbi lacinia libero in posuere porttitor. Curabitur pretium vel tortor in aliquet.</p>
</div>
<div>
  <p>Integer eu sapien odio. Morbi blandit nibh leo, in dapibus sem malesuada vitae. Etiam sit amet tristique sem.</p>
  <p>Sed mattis lectus lorem, at dapibus leo suscipit quis. Nunc in massa quis mauris suscipit gravida. Sed at nunc mauris. Duis et lectus ex.</p>
</div>

6
  • 2
    E se você embrulhar cada palavra num span? Aí o elemento retornado por esse seu código seria a palavra. Dá tranquilamente pra fazer esse "embrulho" por JS, acho que já tem até uma pergunta aqui no site sobre isso. Esta aqui pode ser um ponto de partida: pt.stackoverflow.com/questions/41477/…
    – bfavaretto
    Commented 5/08/2015 às 19:44
  • @bfavaretto o que preciso é a posição da palavra no parágrafo e não a palavra em si. Usar <span> parece uma boa alternativa, realmente pode ser um ponto de partida Commented 5/08/2015 às 19:56
  • Com cada palavra num span, você consegue as coordenadas de qualquer uma delas com Element.getBoundingClientRect().
    – bfavaretto
    Commented 5/08/2015 às 19:59
  • Uma outra resposta no SOen sugere criar um span para cada palavra, meio na onda que o bfavaretto sugeriu. Isso seria uma opção? O que pretendes fazer? colorir o que foi clicado?
    – Sergio
    Commented 5/08/2015 às 20:01
  • @bfavaretto a função getBoundingClienteRect faz o contrário do que preciso, ela faz elemento->coordenada. @Sergio adicionei o resultado esperado na pergunta Commented 5/08/2015 às 20:47

2 Respostas 2

1

Caso você não queira adotar a solução que o @Sanção indicou, tem esse código aqui que funcionou perfeitamente aqui no Chrome.

Fonte: https://stackoverflow.com/a/3710561/3257568

function getWordAtPoint(elem, x, y) {
  if(elem.nodeType == elem.TEXT_NODE) {
    var range = elem.ownerDocument.createRange();
    range.selectNodeContents(elem);
    var currentPos = 0;
    var endPos = range.endOffset;
    while(currentPos+1 < endPos) {
      range.setStart(elem, currentPos);
      range.setEnd(elem, currentPos+1);
      if(range.getBoundingClientRect().left <= x && range.getBoundingClientRect().right  >= x &&
         range.getBoundingClientRect().top  <= y && range.getBoundingClientRect().bottom >= y) {
        range.expand("word");
        var ret = range.toString();
        range.detach();
        return(ret);
      }
      currentPos += 1;
    }
  } else {
    for(var i = 0; i < elem.childNodes.length; i++) {
      var range = elem.childNodes[i].ownerDocument.createRange();
      range.selectNodeContents(elem.childNodes[i]);
      if(range.getBoundingClientRect().left <= x && range.getBoundingClientRect().right  >= x &&
         range.getBoundingClientRect().top  <= y && range.getBoundingClientRect().bottom >= y) {
        range.detach();
        return(getWordAtPoint(elem.childNodes[i], x, y));
      } else {
        range.detach();
      }
    }
  }
  return(null);
}
document.body.addEventListener("click", function(e) {
  alert(getWordAtPoint(e.target, e.x, e.y)); 
});
div {margin: 15px 0;}
p {margin: 0;}
<div>
  <p>Cras vel erat sit amet eros posuere volutpat nec in massa. Quisque dignissim mollis aliquet.</p>
  <p>Fusce suscipit rhoncus mi a dapibus. Donec nisl augue, molestie sed porttitor id, pulvinar tempor neque.</p>
  <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec et enim eleifend velit faucibus consequat vel at risus.</p>
</div>
<div>
  <p>Aliquam erat volutpat.</p>
  <p>Phasellus ornare feugiat convallis. Aenean tincidunt tristique sem eu porttitor. Aliquam convallis eu purus et venenatis.</p>
  <p>Suspendisse euismod ullamcorper odio, ac sollicitudin quam pharetra sed. Vestibulum dictum cursus sollicitudin.</p>
  <p>Praesent at odio nisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris sodales vehicula neque quis imperdiet. Morbi lacinia libero in posuere porttitor. Curabitur pretium vel tortor in aliquet.</p>
</div>
<div>
  <p>Integer eu sapien odio. Morbi blandit nibh leo, in dapibus sem malesuada vitae. Etiam sit amet tristique sem.</p>
  <p>Sed mattis lectus lorem, at dapibus leo suscipit quis. Nunc in massa quis mauris suscipit gravida. Sed at nunc mauris. Duis et lectus ex.</p>
</div>

1
  • Gostei da solução, iterar todos os elementos de forma recursiva, utilizando range de seleção para pegar a palavra, vou testar a integração com meu código existente Commented 6/08/2015 às 15:19
0

Encontrei a solução com base nessa pergunta do SOen da resposta do @MaiconCarraro.

Utilizei a função document.caretRangeFromPoint(x, y), que cria uma seleção de texto na coordenada infomada. O objeto retornado contém as informações que eu preciso: o elemento DOM (.startElement) e o "indice" da posição (.startOffset).

Para o meu problema foi a melhor solução porque não altera o DOM (como a solução com <span>) e não é necessário iterar diversos elementos. O ponto negativo é a diferença entre navegadores, mas no meu caso só precisa atender webkit.

Nota: a especificação recomenda a implementação da função document.caretPositionFromPoint() mas o webkit e IE criaram alternativas próprias.

No trecho de código abaixo mantive a função de obter a palavra inteira, além de obter o elemento DOM e a posição do texto (deve funcionar em navegadores atualizados).

document.addEventListener('click', function(e) {
  e.preventDefault();
  var caret, range;
  if (document.caretRangeFromPoint) { // webkit/chrome
    range = document.caretRangeFromPoint(e.clientX, e.clientY);
    // elemento DOM
    // range.startElement
    // posição
    // range.startOffset
  } else if (document.caretPositionFromPoint) { // gecko/firefox
    caret = document.caretPositionFromPoint(e.clientX, e.clientY);
    range = document.createRange();
    range.setStart(caret.offsetNode, caret.offset); // elemento DOM e posição
  }

  // obter palavra
  if (range) { // comum para chrome e firefox
    selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
    selection.modify('move', 'backward', 'word');
    selection.modify('extend', 'forward', 'word');
    alert(selection.toString());
    selection.collapse(selection.anchorNode, 0);
  } else if (document.body.createTextRange) {
    // tudo diferente para o internet explorer
    // obter palavra
    range = document.body.createTextRange();
    range.moveToPoint(event.clientX, event.clientY);
    range.select();
    range.expand('word');
    alert(range.text);
    // elemento DOM
    // range.parentElement();
    // posição
    // var range_copy = range.duplicate();
    // range_copy.moveToElementText(range.parentElement());
    // range_copy.setEndPoint('EndToEnd', range);
    // range_copy.text.length
  }

}, false);
div {margin: 15px 0;}
p {margin: 0;}
<div>
  <p>Cras vel erat sit amet eros posuere volutpat nec in massa. Quisque dignissim mollis aliquet.</p>
  <p>Fusce suscipit rhoncus mi a dapibus. Donec nisl augue, molestie sed porttitor id, pulvinar tempor neque.</p>
  <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec et enim eleifend velit faucibus consequat vel at risus.</p>
</div>
<div>
  <p>Aliquam erat volutpat.</p>
  <p>Phasellus ornare feugiat convallis. Aenean tincidunt tristique sem eu porttitor. Aliquam convallis eu purus et venenatis.</p>
  <p>Suspendisse euismod ullamcorper odio, ac sollicitudin quam pharetra sed. Vestibulum dictum cursus sollicitudin.</p>
  <p>Praesent at odio nisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris sodales vehicula neque quis imperdiet. Morbi lacinia libero in posuere porttitor. Curabitur pretium vel tortor in aliquet.</p>
</div>
<div>
  <p>Integer eu sapien odio. Morbi blandit nibh leo, in dapibus sem malesuada vitae. Etiam sit amet tristique sem.</p>
  <p>Sed mattis lectus lorem, at dapibus leo suscipit quis. Nunc in massa quis mauris suscipit gravida. Sed at nunc mauris. Duis et lectus ex.</p>
</div>

fontes (em inglês):

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .