Make WordPress Core

Opened 12 years ago

Closed 12 years ago

#21385 closed enhancement (fixed)

Twenty Twelve - Set justification to left and right for smaller screens

Reported by: chriswallace's profile chriswallace Owned by: drewstrojny's profile drewstrojny
Milestone: 3.5 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: needs-patch
Focuses: Cc:

Description

This enhancement would make text easier to read on smaller screens by creating a distinct visual margin on the left and right side of the text.

Change History (12)

#1 @chriswallace
12 years ago

  • Component changed from Themes to Bundled Theme

#2 @SergeyBiryukov
12 years ago

  • Milestone changed from Awaiting Review to 3.5

#3 @lancewillett
12 years ago

Thanks for the report, could you help us understand it better with 1) a screenshot and 2) a CSS patch?

#4 @obenland
12 years ago

  • Cc konstantin@… added

#5 follow-up: @chriswallace
12 years ago

I'm not sure a screenshot is needed. This is not a bug, just a feature request. This should probably just be for mobile and tablet formatting. The CSS for content <p> elements on mobile/tablet should be modified to include:

p{
  text-align: justify;
  text-justify: distribute;
}

That should take care of it.

#6 in reply to: ↑ 5 @lancewillett
12 years ago

  • Owner set to drewstrojny
  • Status changed from new to assigned

Replying to chriswallace:

I'm not sure a screenshot is needed.

OK, gotcha -- sometimes a visual does help make sure we're all looking at the same thing.

This should probably just be for mobile and tablet formatting. The CSS for content <p> elements on mobile/tablet should be modified to include:

p{
  text-align: justify;
  text-justify: distribute;
}

I'll let Drew decide on this, looks nicer, you are right.

Side note, text-justify: distribute; too me would be a bonus but not required, it seems to be valid CSS3 but I can't see that it's supported in any browsers yet.

#7 @lancewillett
12 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In [21426]:

Twenty Twelve: justify text in smaller views, props chriswallace. Fixes #21385.

#8 @markjaquith
12 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening. I think this makes for an inferior reading experience. The rule with justification is that you should do it when you have a lot of words on the line, such that the spacing adjustment will be a small part of the overall line length. When there are only a few words on the line, you should do ragged-right, else you end up with huge ugly spaces between words.

See:

http://i.imgur.com/DljAk.jpg

(ignore the colors — added via child theme)

"wonderful Inconsolata open"
"post-WordCamp SF hacking"

Ragged-right:

http://i.imgur.com/1tGiR.jpg

I suggest that "justify" be limited to 600px and above, where the justification doesn't result in such drastic word spacing.

#9 @scribu
12 years ago

I suggest "justify" not be used at all, because justified text doesn't make sense on the web.

#10 @knutsp
12 years ago

  • Cc knut@… added

+1

"text-align:justify", without a working "text-justify" property, is very often ugly when the average number of characters is less than about 60.

When most browsers, especially those typically used on small screens, supports advanced text-justify, stretching both character widths and character spacing, then "text-align:justify" may be used also for small screen widths. I don't get this CSS3 property working, so I revert all "justify" to "left" when the text box width probably holds less than 60 characters per line, in my responsive stylesheets.

But "justify" makes sense when there are columns, especially when there is no vertical ruler and/or little space between the columns. The text edge then defines the column edge nicely, as in newspapers. As long as the column spacing is generous, as in Twenty Twelve, and/or have a ruler (Twenty Twelve don't), then I agree with scribu: Don't use "justify".

On narrow screens the columns should even collapse (disappear). This is another reason for not using "justify" in that case.

#11 @drewstrojny
12 years ago

+1 for removing entirely.

I am admittedly not familiar with it, and wasn't aware of these downsides when it was proposed at WCSF. In the end, there could be a case made for it, but I think it's a bit too cute for a default theme.

#12 @lancewillett
12 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In [21721]:

Twenty Twelve: remove justified text alignment rules for small screens. Closes #21385.

Note: See TracTickets for help on using tickets.