WordPress.org

Make WordPress Core

#21385 closed enhancement (fixed)

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

Reported by: chriswallace Owned by: 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)

comment:1 chriswallace21 months ago

  • Component changed from Themes to Bundled Theme

comment:2 SergeyBiryukov21 months ago

  • Milestone changed from Awaiting Review to 3.5

comment:3 lancewillett21 months ago

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

comment:4 obenland21 months ago

  • Cc konstantin@… added

comment:5 follow-up: chriswallace21 months 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.

comment:6 in reply to: ↑ 5 lancewillett21 months 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.

comment:7 lancewillett21 months ago

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

In [21426]:

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

comment:8 markjaquith20 months 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.

comment:9 scribu20 months ago

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

comment:10 knutsp20 months 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.

comment:11 drewstrojny20 months 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.

comment:12 lancewillett20 months 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.