WordPress.org

Make WordPress Core

Opened 2 years ago

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

Download all attachments as: .zip

Change History (25)

sennza2 years ago

sennza2 years ago

sennza2 years ago

comment:1 Japh2 years ago

  • Cc japh@… added

comment:2 kawauso2 years ago

  • Component changed from General to Bundled Theme

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

comment:3 georgestephanis2 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.

comment:4 sennza2 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!

comment:5 SergeyBiryukov2 years ago

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

comment:6 SergeyBiryukov2 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

comment:7 StephenCronin2 years ago

  • Cc StephenCronin added

comment:8 sennza2 years ago

  • Cc bronson@… added

sennza2 years ago

comment:9 sennza2 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

comment:10 SergeyBiryukov2 years ago

  • Milestone changed from Awaiting Review to 3.5

comment:11 rmccue2 years ago

  • Cc me@… added

comment:12 obenland2 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].

comment:14 DrewAPicture2 years ago

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

comment:15 lancewillett2 years ago

  • Cc lancewillett added

comment:16 lancewillett2 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.

obenland21 months ago

comment:17 obenland21 months ago

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

comment:19 lancewillett21 months 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.