Page MenuHomePhabricator

"Appeal from Jimmy" notice text overflows box with large fonts
Closed, ResolvedPublic

Description

Screen shot IE7 in XP with 120dpi fonts

Some folks have larger than default DPI settings on their computers, which makes font sizes larger.

Steps to reproduce:

  1. Fire up Windows XP
  2. Go in display settings, advanced, and crank up DPI from 96 to 120 ("Large fonts")
  3. Pull up Wikipedia and find the Jimmy notice

This can probably also be reproduced by zooming in or bumping font size settings in many browsers.

On-wiki discussion:
http://en.wikipedia.org/wiki/Wikipedia:Village_pump_(technical)#Fundraising_banner_.28Personal_appeal.29


Version: unspecified
Severity: enhancement
URL: http://en.wikipedia.org/

Attached:

Parallels_Picture_2.png (980×1 px, 299 KB)

Details

Reference
bz16773

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 21 2014, 10:29 PM
bzimport set Reference to bz16773.

Curse you overlap! Tried removing the vertical height at first but that would look weird with the bottom part of the piece not touching the border. Instead changing the font size in px seems to work best.

Try this one.

http://dev.donate.wikimedia.org/index.php?title=Special:NoticeTemplate/view&template=2008_jimmy_letter_palatino&wpUserLanguage=en

ayg wrote:

I can see this overlap in Firefox on Ubuntu with, as far as I know, totally default font settings. "Wales" breaks onto a third line. Since you're doing line breaks manually here, why don't you just set the width to 100% instead of 500px to begin with?

Are you seeing this with Firefox 2 or 3? And is it with any zooming?

I'm testing in Ubuntu 8.10 with FF3 and everything wraps correctly even if the screen size is tiny. Would love to be able to reproduce this for a fix and possibly see a screenshot if this still persists.

ayg wrote:

Screenshot on Ubuntu in Firefox 3.0.5, no zoom enabled or anything

This is what I'm seeing with no special changes on my part that I can think of. I have custom fonts turned off, so the font being used is different, but changing that back to normal doesn't change anything. I can confirm that no zoom is enabled, pressing Ctrl-0 doesn't change the screen at all. The exact version is Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.5) Gecko/2008121621 Ubuntu/8.04 (hardy) Firefox/3.0.5.

Attached:

CentralNotice_broken.png (864×1 px, 147 KB)

ayg wrote:

Same as previous, with width removed for div

I just deleted the "width: 500px" rule in the style attribute of the div class="notice-text" (in Firebug) to get this screenshot. Since the height of everything is specified pixel-perfect, *any* line-breaking will cause this kind of overflow. It looks like the only possible effect of specifying a width here less than 100% would be to cause wrapping, so I don't see why you should. There's no background on the div or anything. Removing that rule should solve the problem in all browsers (although if the text is *really* *really* wide it might then overflow horizontally).

Attached:

CentralNotice_unbroken.png (864×1 px, 145 KB)

Removing the width causes vertical overflow to happen on small screen sizes. Which is all sorts of not ok.

ayg wrote:

Ah, so the width is there to set a minimum, not a maximum. You could do min-width: 500px if you didn't mind small IE6 screens. Or just set width: 600px, although that will do more screen-stretching. Setting white-space: nowrap; might be the best solution: it looks a little funny, but only for the people where it currently looks terrible, so it's at least a [[Pareto improvement]], which is more than can be said for anything else I can think of.

Resolving as the notice is no longer running and we've done our best to accommodate as many screen sizes as possible and retain the structure of the banner.