WordPress.org

Make WordPress Core

Opened 9 years ago

Closed 8 years ago

#21151 closed defect (bug) (fixed)

Break long words in sidebar widgets for Twenty Ten and Twenty Eleven

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

Description

The Monster widget adds lots of awesome widgets in one and is fantastic for theme testing. Whilst working on a theme at the moment I realised that both Twenty Eleven and Twenty Ten haven't factored in the the 'Pipe Test' which is part of the monster widget.

I have attached screenshots and hopefully my first patch ever :)

Attachments (6)

pipe-test-twentyten.png (138.8 KB) - added by sennza 9 years ago.
pipe-test-twentyeleven.png (135.8 KB) - added by sennza 9 years ago.
twenty-ten-fixed.png (6.0 KB) - added by sennza 9 years ago.
twenty-eleven-fixed.png (3.2 KB) - added by sennza 9 years ago.
21151.patch (1.5 KB) - added by sennza 9 years ago.
21151.2.diff (1.2 KB) - added by obenland 8 years ago.

Download all attachments as: .zip

Change History (25)

#1 @Japh
9 years ago

  • Cc japh@… added

#2 @kawauso
9 years ago

  • Component changed from General to Bundled Theme

Tabs, not spaces, in patches please. </pedant>

#3 @georgestephanis
9 years ago

  • Keywords ux-feedback added

Not entirely sure if this would be intended usage ... some people may prefer things to overflow the box rather than unintended ambiguity over line breaks assigned by css in the middle of a word.

#4 @sennza
9 years ago

Sorry @kawauso I was well aware of the 'tabs not spaces' policy and had used a tab in my IDE. Unfortunately I wasn't aware that PhpStorm changed those from tabs to spaces without me knowing I've flicked the setting for next time. Damn IDEs :)

Interesting feedback @georgestephanis. It'll be fun to see what others think. This patching thing is fun already!

#5 @SergeyBiryukov
9 years ago

FWIW, we already use break-word for several things in the admin (#6036, #9283, #13574, #17424).

#6 @SergeyBiryukov
9 years ago

  • Summary changed from The Pipe Test in the Monster Widget shows issues in Twenty Ten and Twenty Eleven to Break long words in sidebar widgets for Twenty Ten and Twenty Eleven

#7 @StephenCronin
9 years ago

  • Cc StephenCronin added

#8 @sennza
9 years ago

  • Cc bronson@… added

@sennza
9 years ago

#9 @sennza
9 years ago

  • Summary changed from Break long words in sidebar widgets for Twenty Ten and Twenty Eleven to Break long words in sidebar widgets for Twenty Ten,Twenty Eleven and Twenty Twelve

#10 @SergeyBiryukov
9 years ago

  • Milestone changed from Awaiting Review to 3.5

#11 @rmccue
9 years ago

  • Cc me@… added

#12 @obenland
9 years ago

  • Summary changed from Break long words in sidebar widgets for Twenty Ten,Twenty Eleven and Twenty Twelve to Break long words in sidebar widgets for Twenty Ten and Twenty Eleven

Fixed for Twenty Twelve in [21336].

#14 @DrewAPicture
8 years ago

Per @lancewillett: created #21503 to add word-wrap for breaking long words in Twenty Twelve.

#15 @lancewillett
8 years ago

  • Cc lancewillett added

#16 @lancewillett
8 years ago

  • Keywords ux-feedback removed

The best fix is a bit more verbose and also adds support for hyphenation in modern browsers. From http://html5please.com/#hyphens Paul Irish explains:

CSS Text Level 3 allows you to tell the browser to break words using hyphens. Read about how to effectively use hyphens:auto and word-break in Word wrapping/hyphenation using CSS.

As there won't by any noticable effects on browsers which don't support the feature, we recommend that you use it without any polyfills or fallbacks. CSS Hyphenator is a polyfill that works on browsers that support the soft hyphen. Modernizr has good support for hyphentation detection.

See a detailed explanation at http://blog.kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/.

CSS to be implemented:

	-ms-word-break: break-all;
    word-break: break-all;
	word-break: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;

Props iandstewart for the Paul Irish pointer.

@obenland
8 years ago

#17 @obenland
8 years ago

21151.2.diff adds support for hyphenation and takes learnings from #21503 into consideration. Also improves image resizing for images in widgets.

#19 @lancewillett
8 years ago

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

In [22195]:

Twenty Ten and Eleven: more elegant fix for long word overflow in sidebars. Also improves image resizing for images in widgets in Twenty Ten. Props obenland, fixes #21151; see #21503 also.

Note: See TracTickets for help on using tickets.