We Keep Coding

Best way to detect "orphan words" in wrapped text

I have a request from our content & design teams to not let paragraphs of text end with an "orphan word" - a single word on the last line of text that has wrapped to multiple lines. The designer's solution is to cheat the margins to, say, +/- 5% to see if we can get the word to move to the previous line or get a word to join it on the last line. That is easy to do by hand but of course we need it to work in code so that it works with different sizes, languages, etc.
What is the best way to detect how many words are in the last line of a wrapped text block? I assume this would involve breaking the string into words, each in their own span or something...?
Thanks in advance!

Clearly I was overthinking this. Someone mentioned that for the use case above, it is sufficient to just replace the space between the final two words with a non-breaking space. (&nbsp). Duh!!
example in action:
<div>This div will not have orphaned&nbsptext</div>

Find the boundaries of a text with JavaScript

My Question
Is it possible to get the boundaries of a text with JavaScript?
For example:
I want to get only the red marked area.
Why I'm Asking
I'm working on a wordcloud and want to be able to place new words inside a word's div, without overlapping the actual text.
For example:
I want to be able to place new words in the red marked areas, but my overlap-checking function won't recognize those areas as "free", since i currently use the word's div's boundaries (as shown in the black frame).

You can make a span to the places where you want to place a text, give this an id then read this id with javascript and paste the text into the span. As shown here:
Html:
<span id='mySpan'><span>
Javascript:
let span = document.getElementById("mySpan");
span.text = "example";

CSS: text-background:hide-other-text;

Is it possible to have multiple texts over each other and yet only one of them readable/visible, without setting the background-color of the text container of the desired readable one ?
I dream about something like:
text-background: hide-other-text;
more info:
I need the background color of the elements behind the text, and text "below" needs to go up to the text on top.

You could use jQuery to hide the one piece of text, and add the other piece of text, if you so desired. That might be much simpler in this case.

Is there anyway to set the letter-spacing automatic based on the div width?

I have a fluid width website where I planned to place some text inside <div>. The idea is
<div>FIRST LINE TEXT HERE</div>
<div>THE SECOND LINE TEXT HERE. BUT QUITE LENGTHY</div>
<div>THIRD LINE IS HERE. NOT THAT MUCH LENGTH<div>
I need to display all the three lines to look like a justified LETTERS, by adding letter spacing dynamically based upon the content inside and available out <div> width.

You could compute the widths of the texts in JavaScript, then calculate the letter spacing needed, and add it. Note that this would treat word space like any other character, so the more spacing is added, the closer to each other would words appear to be. The results would be typographically questionable in other ways, too: words don’t look good if letters get too spaced.
If just a little spacing would be needed, it’s usually better to add word spacing, and you could do that for some browsers (not Chrome) with text-align-last: justify. You could consider using additionally text-justify: newspaper, as it may put part of the added spacing between letters, not just between words. See jsfiddle.

I would suggest you to try this..give three different classes to the lines ie first_line, second_line and similarly third_line
Then write css for the classes. for first_line u keep the letter-spacing to wat u want. similarly u can give letter spacing for the other two lines as well.

How to measure word/caret position in Google Docs?

For those who haven't worked with the Google Docs editor here's a short explanation of how it works:
Google Docs has no visible editable textarea or contentEditable elements.
Google Docs listens for keydown/press/up in a separate iFrame where they place the OS cursor for event listening.
When the iFrame catches an event Google handles it by performing the equivalent operations on the visible document.
The "caret" in Google Docs is a DIV that is styled and scripted to look and act like an OS cursor.
With that out of the way, here's my request:
I'm working on a plugin that interacts with the Google Doc and I need to be able to do two things:
Highlight words with an opaque overlay DIV.
Determine cursor position inside a word.
I've been exhausting a lot of ideas about just how to handle this, but so far I've only manage to get a buggy solution for the latter problem (I perform a backspace, determine where the text changed and undo the backspace).
I'm looking for all the best ideas you can come up with to solve these problems. They don't need to be cross browser, but they do need to be able to be turned into something robust that will also handle things such as font size changed mid line.
A little bit of extra info explaining what a Google Doc looks like in HTML:
<wrapper> // Simplified wrapper containing margins, pagination and similar
<div class="kix-paragraphrenderer"> // single DIV per page wrapping all content
// Multiple paragraphs separated by linebreak created by Enter key:
<div class="kix-paragraphrendeder">...</div>
<div class="kix-paragraphrendeder">...</div>
<div class="kix-paragraphrendeder">
// Multiple wrapper divs created by Google's word wrapping:
<div class="kix-lineview">...</div>
<div class="kix-lineview">...</div>
<div class="kix-lineview">
// Single inner wrapper, still full width of first wrapper paragraph:
<div class="kix-lineview-content">
// Single wrapper SPAN containing full text of the line, but not display:block
<span class="kix-lineview-text-block">
// Multiple spans, one per new font change such as normal/bold text,
// change in font size, indentation and similar:
<span>This is normal text</span>
<span style="font-size:40px; padding-left:4px;">This larger text.</span>
<span style="font-weight:bold; padding-left:10px;">This is bold text</span>
<span style="padding-left:4px;">More normal text</span>
</span>
</div>
</div>
</div>
</div>
</wrapper>

After more tinkering I came to the conclusion that it is extremely troublesome - if not impossible - to try and programmatically determine cursor position with regard to a letter inside a <span>, simply because the <span> is the smallest element that is measurable (correct me if I am wrong).
So how to solve the problem? Here's what I ended up doing:
I create an offscreen positioned <div>
I get the text of the current paragraph (<div class="kix-paragraphrenderer">) - I could get the entire text, but wanted to limit the computational load.
I extract each single character of the paragraph by looping through its children in the following way:
Loop through linveviews of the paragraph (<div class="kix-lineview">)
Get the lineview content (<div class="kix-lineview-content">)
Loop through text blocks of the lineview content (<span class="kix-lineview-text-block">)
Loop through <span>'s of the text block
Loop through innerText of the <span>
I append each character in my offscreen <div> with the currently applied style extracted from style.cssText of the current <span>
For each character appended I measure the width of the <div> and save this in an array. I now have a position of each single character.
I measure the position of the cursor relative to my widths and voila - I know where the cursor is positioned in the text.
This is obviously a bit simplied (I left out details about margins and paddings of the different elements), but it covers the idea behind how it's possible to get the cursor position.
It works quite well, but there are many pitfalls and a lot of measuring required. On top of that it's also required to post-parse the text if you want to use it for anything, since tabs, spaces and linebreaks aren't always included in innerText (depending on where these are in the text, Google may or may not make them through positioning of new elements).

I made something like Kix two years ago Google Docs. And for any HTML design and yes, for IE6 too :-) How? All we need is to compute letter absolute position. How? Replace textNode with inline element without layout, that's important, and then use Element.getClientRects I remember I also needed wrap just letter and compute its position via fast and reliable https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect
The trick how to detect lines and wraps for home and end keys was based on some vertical heuristic letter position change. Something like if base line is different, than stop caret walking. It was pretty fast and with any markup and without any caching. Holy grail :)
The only not resolvable problem was justified text, because letters were distributed randomly and spaces between them was not computable.
That project is dead http://webeena.com now. Bad management killed it (and me almost too).