WordPress.org

Make WordPress Core

#24231 closed defect (bug) (fixed)

Twenty Thirteen: avoid hyphenating post and page titles

Reported by: lancewillett Owned by: lancewillett
Milestone: 3.6 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch
Focuses: Cc:

Description

We use CSS3 hyphenation in Twenty Thirteen for almost every element; it's set on the body selector.

One case where I think it should be avoided is for post and page titles. It looks weird there ... titles should just break at word boundaries and go to multiple lines.

This primarily affects Safari and Firefox, and I think we should go with manual property value for hyphens so that if there is a natural break (like a hyphen!) in a long title, it'll break on it.

Attachments (5)

before-safari.png (280.3 KB) - added by lancewillett 12 months ago.
after-safari.png (274.1 KB) - added by lancewillett 12 months ago.
24231.diff (441 bytes) - added by lancewillett 12 months ago.
24231.1.diff (2.0 KB) - added by lancewillett 12 months ago.
24231.2.diff (499 bytes) - added by SergeyBiryukov 11 months ago.

Download all attachments as: .zip

Change History (21)

lancewillett12 months ago

lancewillett12 months ago

lancewillett12 months ago

comment:1 follow-up: johnbillion12 months ago

Hyphenation should really only be applied to post content (.entry-content in Twenty Thirteen). There's no need for it to be applied across the entire document.

comment:2 lancewillett12 months ago

Good call, @johnbillion.

comment:3 lancewillett12 months ago

I think it should be applied to widget content, also.

lancewillett12 months ago

comment:4 lancewillett12 months ago

.1 patch moves to .entry-content and .widget only, and cleans out from editor styles (not needed there).

comment:5 lancewillett12 months ago

  • Component changed from General to Bundled Theme
  • Milestone changed from Awaiting Review to 3.6

comment:6 lancewillett12 months ago

  • Summary changed from Twenty Thirteen: avoid hyphenating long post or page titles to Twenty Thirteen: avoid hyphenating post and page titles

comment:7 in reply to: ↑ 1 obenland12 months ago

Replying to johnbillion:

Hyphenation should really only be applied to post content (.entry-content in Twenty Thirteen). There's no need for it to be applied across the entire document.

I disagree. Why would you want to limit it to .entry-content only? I don't see a reason to slow development on browsers that support hyphenation. It's super useful, especially in a mobile context where there is limited space available.

I wouldn't mind 24231.diff​ going in, I'd be disappointed if 24231.1.diff made it.

comment:8 johnbillion12 months ago

The current behaviour demonstrates exactly why it shouldn't be blindly applied to the <body>. Hyphenation isn't desirable everywhere. Hyphenation exists to reduce the variation of line lengths in blocks of text, making it easier to read. In the case of headings and other areas where the text doesn't cover many lines, it has undesirable results.

I agree with Lance that applying it to widgets would probably be a good idea. Maybe even targeting text widgets? Not too sure on that one.

comment:9 lancewillett12 months ago

Noting that with Twenty Twelve we only targeted post content and widgets, so we should probably go the same way with Thirteen.

comment:10 lancewillett12 months ago

I agree with @johnbillion that hyphenation isn't needed except for "body" type content. It'll help in widgets, also.

comment:11 lancewillett12 months ago

  • Owner set to lancewillett
  • Resolution set to fixed
  • Status changed from new to closed

In 24153:

Twenty Thirteen: avoid hyphenating post and page titles (and other unintended consequences) by moving word-breaking and hyphenation rules to only apply specifically to post/page content and widgets. Fixes #24231.

SergeyBiryukov11 months ago

comment:12 follow-up: SergeyBiryukov11 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

One case where I think it should be avoided is for post and page titles. It looks weird there ... titles should just break at word boundaries and go to multiple lines.

I think this also applies to widget titles. Could we remove auto hyphenating for them too?

24231.2.diff would resolve the issue I was trying to address in #23672.

comment:13 in reply to: ↑ 12 ; follow-up: lancewillett11 months ago

Replying to SergeyBiryukov:

One case where I think it should be avoided is for post and page titles. It looks weird there ... titles should just break at word boundaries and go to multiple lines.

I think this also applies to widget titles. Could we remove auto hyphenating for them too?

Do you have a live example to look at? I think breaking a word is worse than hyphenating it, in the narrow widget title space.

comment:14 in reply to: ↑ 13 ; follow-up: SergeyBiryukov11 months ago

Replying to lancewillett:

Do you have a live example to look at?

See http://ruproject.wordpress.com/, the Recent Comments widget in the footer. I'd like to avoid hyphenating the widget title there.

Widget content looks weird (it's a default first comment from "Mr WordPress", which appears to have an issue with duplicated name showing instead of Gravatar), but that's out of scope for this ticket.

comment:15 in reply to: ↑ 14 ; follow-up: lancewillett11 months ago

Replying to SergeyBiryukov:

Replying to lancewillett:

Do you have a live example to look at?

See http://ruproject.wordpress.com/, the Recent Comments widget in the footer. I'd like to avoid hyphenating the widget title there.

Hmm ... I'm not seeing that title hyphenate in FF or Chrome. What browser are you using, and what viewport width?

comment:16 in reply to: ↑ 15 SergeyBiryukov11 months ago

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

Replying to lancewillett:

Hmm ... I'm not seeing that title hyphenate in FF or Chrome. What browser are you using, and what viewport width?

Tested in Firefox 21, Chrome 26, IE 8, IE 9, Opera 12 on Windows 7 and Windows XP, 1440x900 screen, also in Firefox 21, Chrome 26, Opera 12, Safari 4 on Mac OS X, 1024x768 screen.

Indeed, only happens in Firefox on Windows. I guess I can live with that :)

Note: See TracTickets for help on using tickets.