How to Use Justification Properly?

[RbnJrg]

Originally Posted by Turtle91

Yeah, my iphone 15 pro max has a 6.7" screen and I read in landscape mode almost exclusively. But, I find I'm slowly increasing the font size over the years which tends to create those rivers of white space again regardless of the font type...

When I do use justified text, as mentioned above, it is usually when I am inserting some other text that I want to differentiate from normal text. Then I have used a <div> and I style the paragraphs within that div as justified. That way the normal text has a left-alignment and the inset is visually distinctive.

Attachment 216976
Screenshot from Laurence E. Dahners'
Antigravity, Book 19 in the Ell Donsaii Story

h3::before {
  display: block;
  background-image: url(../Images/img_ChDiv.png);
  background-size: 1em 1.5em;
  width: 1em;
  height: 1.5em;
  margin: 1em auto 0.5em;
  content: "";
}

p {
  text-indent: 1.2em;
  margin: 0;
}

p.first {
  text-indent: 0;
  font-size: 1em;
  clear: both;
}

p.first::first-letter {
  font-family: serif;
  font-size: 2em;
  font-weight: bold;
  float: left;
  margin: -0.1em 0.1em;
}

p.first::first-line {
  font-variant: small-caps;
  font-size: 1.15em;
}

div.news {
  margin: 2em auto;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  width: 90vw;
}

div.news p {
  margin: 0.5em;
  font-size: 0.9em;
  font-family: serif;
  text-indent: 0;
  text-align: justify;
}

Nice layout! But did you the try to open that epub, for example with Google Play Books, and select justified alignment. What happens with the title and its fleuron?

[RbnJrg]

Originally Posted by Turtle91

Here is an example of the difference between Justified (left column) and Left-Aligned (right column) text.

On larger screens the rivers of white space are less noticeable, but on smaller screens (most people read ebooks on their phones), especially with larger font, it is very noticeable. It can even get so bad that there are only two words on a given line!!

Attachment 216977
This screenshot is also from Antigravity

No, Turtle, your example is biased. Put two images not of text in two columns, but of the same text at the full width of the viewport, and then let's see if the rivers of white space are so noticeable with justified text. On today's phones with 6.75" screens, the rivers of white space you mention don't exist, especially if you read in apps that support hyphenation (PocketBook for epub3 and KOReader for epub2, for example).

Here is you have another screenshot about the sample whose screenshot you uploaded above, now with text-align: justify (even without hyphens), and the rivers are not present:



Of course, you may very well prefer to read with left-aligned text, and no one can argue with that, and you may very well want to design your books with that alignment. What I'm saying is that we can't leave the alignment unset for the <p> tag (in fact, you set it for both <h3> and <div class="news">), even if that alignment is "text-align: left." Because when the user sets their preference in the eReader, it affects the ENTIRE BOOK, not just the <p> tags.

[DNSB]

Originally Posted by j.p.s

Are there any devices that force unjustified when the book (properly!) does not specify anything at all about body text. If so, what are they?

Also, "left justified" strikes me as a very poor name unless ragged left is common enough to need a name. What is lacking about "unjustified"? Is there something special about starting each line at the same horizontal location?

There are 4 versions of justification,

Left justified, also known as left aligned or ragged right.

Right justified, also known as right aligned or ragged left

Center justified, where text is not aligned to the left or right margin. Each line has an equal left and right margin.

Fully justified where the text has word and character spacing modified to fill the line from the left margin to the right margin. AKA full justification or justified.

Of these, I prefer full justification IF the text is created by an engine that is capable of micro-typography, i.e., changing word and character spacing on a much finer scale than just adding extra spaces. Check the capabilities of LaTeX with the Microtype package installed. Sadly, no ereader I know of is able to match that performance leaving me preferring to read left justified.

Oddly, one of the items that Amazon got almost right in their enhanced typesetting for KFX was improving justification. Unfortunately, their implementation promptly screwed the pooch.

Font size layout improvement: Kindle with Enhanced Typesetting automatically adjusts when the font size is large or the line length is short, to improve readability by preventing large gaps between words or squished text. For example, at larger text sizes, Kindle will fall back to left-aligned text or reduce landscape two-column text to one column.

Nothing like getting a line or two of left justified text in the middle of a column of full justified text or having your two column display suddenly switch to single column for a line to give you the feeling of having a needle poked into your eyeball.

[Turtle91]

Originally Posted by RbnJrg

No, Turtle, your example is biased. Put two images not of text in two columns, but of the same text at the full width of the viewport, and then let's see if the rivers of white space are so noticeable with justified text. On today's phones with 6.75" screens, the rivers of white space you mention don't exist, especially if you read in apps that support hyphenation (PocketBook for epub3 and KOReader for epub2, for example).

Here is you have another screenshot about the sample whose screenshot you uploaded above, now with text-align: justify (even without hyphens), and the rivers are not present:

Attachment 216984

Of course, you may very well prefer to read with left-aligned text, and no one can argue with that, and you may very well want to design your books with that alignment. What I'm saying is that we can't leave the alignment unset for the <p> tag (in fact, you set it for both <h3> and <div class="news">), even if that alignment is "text-align: left." Because when the user sets their preference in the eReader, it affects the ENTIRE BOOK, not just the <p> tags.

Sorry, I didn't think someone might misunderstand the image. I just used a screenshot from Sigil's Preview with the text justified, then the exact same preview with left justified, then photoshopped them onto the same image so you could see them side by side. I did not use columns in any way for that example, just a small preview screen width to simulate a small, phone-like, display.

I only set the alignment for elements that I want a specific alignment...like center for <h> or justify as in the example above. I don't really care how the user aligns their normal paragraphs, so I don't set those. If the device/app is broken enough to override the specific alignment I put in the CSS, then there is nothing I can do about it and it is too broken for me to care about.

@JSWolf - The sigil program does not insert hyphenation into the preview... unless there is another feature that I'm not aware of...

I never liked hyphenation, even in pBooks. I think dashes should only be used when squishing words together to make a new word... I have never been impressed with any apps/devices ability to hyphenate on-the-fly and consistently.

[Turtle91]

Originally Posted by RbnJrg

Nice layout! But did you the try to open that epub, for example with Google Play Books, and select justified alignment. What happens with the title and its fleuron?

I haven't tried Google Play with this... it would be interesting to see if it honors the h3::before selector and it's CSS regardless of the users alignment selection, but I have a feeling the Google programmers were only doing the minimum they needed to get away with.

I'll give it a try...