Why textAlign: 'justify' increases letter spacing in some rows - javascript

I'm using react-native for creating mobile app and I want to make the text justified within the element.
It works well in most places, but I noticed that in some rows it increasing not only space between words, but between letters as well.
And it looks strange.
Something like this:
Lorem Ipsum is simply -> in most rows (like I want)
L o r e m I p s u m i s s i m p l y -> in some rows
Who knows why it happens?

From the specification:
If [text-align] has the value 'justify', the user agent may stretch spaces and words in inline boxes (but not inline-table and inline-block boxes) as well.
(my emphasis)
So not just spaces between words, but words themselves can be stretched to fill the space. The algorithm the browser uses to decide where to add the padding (between words, within words, or a combination) is browser-specific.

Justify means: fillup from left to right, it'll space out the wording / letters in a line until it feels up...

Because that's what "justify" means in typesetting. It means both the left and right side of every line are aligned. The only way to reliably do that without splitting words is to mess with the letter kerning. This is frequently used in column based layouts like a newspaper.

Related

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>

Restrict user input to fixed width and height contenteditable div

After a lot of research, I haven't found a post with exactly the same requirements so I thought write a new post.
I'm trying to create a fixed area (e.g. 200px by 300px) where the user can enter text input. He should be able to enter any character (including line breaks).
However, he should not be able to 'write outside the box' (i.e. there shouldn't be overflow scroll or hidden for the 200x300 area).
Once user reaches the 'bottom' of the area, they can't enter any more line breaks.
And once they reach the 'bottom right' corner of the 200x300 area, they shouldn't be able to enter any more characters at all.
Is this possible in css, angular, js, jquery, etc?
Limit the length of characters with base in font and div's size, but you must change the font size and family or line height because every browser can have different styles.
To limit the length of characters in the div is need to ignore the HTML tags in the content, like interpreting.
Firstly calculate how many characters fits there.
You can restrict the number of characters per line with the cols="" attribute and set the displayed the number of editable lines with the rows="" attribute. However limiting the number of rows could only be one with the maxlength attribute which would control the number of characters you can have, which you'd have to estimate. There are some hacks to limit the number of rows with event listeners, but they seem to have fairly major bugs.
It is possible, you just need to do following:
Use event handlers to control character input process. It is required to be able to stop processing further keystrokes when limit is reached. Use keypress and keydown, first handles character processing, second - control keys processing.
Each time user presses a key, use a separate buffer to produce final result, compute its bounding rectangle, and if it is bigger than limit, prevent event handling.
Height of text body could be calculated by multiplying number of lines by line height (interpret font-size and line-height CSS properties).
Width of text body could be computed rather easy with help of HTML5 canvas measureText method.
If you don't have canvas, you can use offscreen span (or any other inline) element - just fill innerHTML with text block and use its offsetWidth attribute. Actually, if you replace line break characters with <br>, you may use span approach to get both dimensions in one go - just make sure it has same style as editable container.
ContentEditable containers, as i remember, store text body in HTML format already (in other words - with <br>s instead of line break characters).

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.

Count number of lines with javascript

I need to trim a dynamic text in order to make a 2 lines excerpt out of it (a teaser).
The problem is that the number of lines that takes a displayed string within a div depends on the characters used (for instance,"w" and i" will not have the same width), the browser and the OS (a font on Mac is not exactly equal to the same font on Windows).
Is there a way, in javascript, to trim a text that would be longer than x lines within a div (knowing that the div length is fixed)?
Thank you.
you can use something like that http://jsfiddle.net/cSTzn/ by using overflow: hidden; and proper height
EDIT: made update with link on the bottom right, customize as necessary http://jsfiddle.net/cSTzn/1/

javascript string clicked position

If I have a string in a div
<div id="article">
lots of text goes here
<strong> it's really interesting</strong>
and it's free to read
</div>
if a user double click or single click on a particular word, is there a way to determine the position/index of the character clicked?
If that cannot be done, how about determining how many space character there are before the clicked position. So if I click on the word 'goes' in the above example, it returns 3 because there are three spaces before the word goes which is clicked.
Thank You very much for your time.
The ugly hack solution to such a problem involves programming converting the characters into event capturing objects.
For instance
<div id="article">
<span>lots </span><span>of </span><span>text</span>...
</div>
Now this can be done programmatically.
You can grab whatever the current content of a div and convert it to something like the formatting above. Then attach event handlers to the contained spans which count the number of spans preceding it in the same container.
a way to determine the position/index of the character clicked
Well, first I need to use a fixed width size font like Courier.
Then, I'd create two span with only a char each. With those two, I should be able to know the width of a char (beware padding and margin) and its height.
Then, you need to know your upper left coordinates for your div whose id is 'article' and capture click event with event.x and event.y.
After that,
var line = (event.x - divLeft) / charHeight;
var column = (event.y - divTop) / charWidth;

Categories