WordPress.org

Make WordPress Core

Opened 10 years ago

Closed 9 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 10 years ago.
pipe-test-twentyeleven.png (135.8 KB) - added by sennza 10 years ago.
twenty-ten-fixed.png (6.0 KB) - added by sennza 10 years ago.
twenty-eleven-fixed.png (3.2 KB) - added by sennza 10 years ago.
21151.patch (1.5 KB) - added by sennza 10 years ago.
21151.2.diff (1.2 KB) - added by obenland 9 years ago.

Download all attachments as: .zip

Change History (25)

#1 @Japh
10 years ago

  • Cc japh@… added

#2 @kawauso
10 years ago

  • Component changed from General to Bundled Theme

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

#3 @georgestephanis
10 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
10 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
10 years ago

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

#6 @SergeyBiryukov
10 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
10 years ago

  • Cc StephenCronin added

#8 @sennza
10 years ago

  • Cc bronson@… added

@sennza
10 years ago

#9 @sennza
10 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
10 years ago

  • Milestone changed from Awaiting Review to 3.5

#11 @rmccue
10 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
9 years ago

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

#15 @lancewillett
9 years ago

  • Cc lancewillett added

#16 @lancewillett
9 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
9 years ago

#17 @obenland
9 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
9 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.