WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 2 years ago

#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 2 years ago.
after-safari.png (274.1 KB) - added by lancewillett 2 years ago.
24231.diff (441 bytes) - added by lancewillett 2 years ago.
24231.1.diff (2.0 KB) - added by lancewillett 2 years ago.
24231.2.diff (499 bytes) - added by SergeyBiryukov 2 years ago.

Download all attachments as: .zip

Change History (21)

@lancewillett2 years ago

@lancewillett2 years ago

@lancewillett2 years ago

comment:1 follow-up: @johnbillion2 years 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 @lancewillett2 years ago

Good call, @johnbillion.

comment:3 @lancewillett2 years ago

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

@lancewillett2 years ago

comment:4 @lancewillett2 years ago

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

comment:5 @lancewillett2 years ago

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

comment:6 @lancewillett2 years 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 @obenland2 years 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 @johnbillion2 years 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 @lancewillett2 years 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 @lancewillett2 years ago

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

comment:11 @lancewillett2 years 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.

@SergeyBiryukov2 years ago

comment:12 follow-up: @SergeyBiryukov2 years 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: @lancewillett2 years 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: @SergeyBiryukov2 years 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: @lancewillett2 years 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 @SergeyBiryukov2 years 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.