mardi 21 avril 2015

Get visible text in CSS3 columns

Trying to make a method which can read the current visible text inside of a element. The method you see below is as far as i've gotten the past few days.

Is there anything more reliable for getting the visible text in a element other than using a caret/range? Cause the issue I'm having is that i have a lot of overflown text who then also gets selected because caret doesn't catch the textNode but instead the parent container.

An example of what my page looks like & why I'm having issues with current method:

enter image description here

The closest approach so far has been (Gael) "http://ift.tt/1Gafhmp" - So if you're looking for any reference code to see what I'm trying to archive. There it is.

Not sure I'm making sense here, otherwise let me know :)


function getTextInColumn (rect) {
      var startX = rect.left;
      var startY = rect.top;
      var endX = rect.left + rect.width - 2;
      var endY = rect.top + rect.height - 2;
      var start, end, range = null;
      var i = 0;
      var rangeText = '';

      while ((rangeText === '' && i < 100 && endY > 5)) {
        range = null;

        if (typeof document.caretPositionFromPoint != 'undefined') {
          start = document.caretPositionFromPoint(startX, startY);
          end = document.caretPositionFromPoint(endX, endY);

          if (start !== null && end !== null) {
            range = document.createRange();
            range.setStart(start.offsetNode, start.offset);
            range.setEnd(end.offsetNode, end.offset);
          }
        }
        else if (typeof document.caretRangeFromPoint != 'undefined') {
          start = document.caretRangeFromPoint(startX, startY);
          end = document.caretRangeFromPoint(endX, endY);

          if (start !== null && end !== null) {
            range = document.createRange();
            range.setStart(start.startContainer, start.startOffset);
            range.setEnd(end.startContainer, end.startOffset);
          }
        }

        if (range !== null) {
          rangeText = range.toString();
        }

        endY -= 52;
        i++;
      }

      return rangeText;
}

Aucun commentaire:

Enregistrer un commentaire