Page MenuHomePhabricator

PostEdit: Text unreadable in the Monobook skin
Closed, ResolvedPublic

Description

Author: mr.heat

Description:
Vector at the top, MonoBook at the bottom

The font is way to small in MonoBook. Depending on the browser and OS the text is not readable at all.

The attached screenshot is created with Opera, Windows 7, ClearType disabled.


Version: unspecified
Severity: normal

Attached:

still-blocking-random-ui-elements.png (226×800 px, 14 KB)

Details

Reference
bz41404

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 22 2014, 12:45 AM
bzimport set Reference to bz41404.
bzimport added a subscriber: Unknown Object (MLST).

swalling wrote:

Looks roughly the same in Firefox and Chrome, though the icon positioning is not as weird.

Munaf: take a look at potential fixes for Monobook when you get some time?

mr.heat wrote:

The MonoBook skin starts with body { font-size: x-small; } and scales the text up in the following containers. But the PostEdit code is inserted outside of this containers right after the opening <body> tag and adds font-size: 0.8em; on top of this. This is why it ends with 8px (calculated font size) in the MonoBook skin but 13px in the Vector skin.

Possible solution:

.postedit { font-size: 13px; }

Preferred. This guarantees it will look the same in all skins. All web browsers are able to scale px font sizes.

An other possible solution:

.skin-monobook .postedit { font-size: 125%; }

This way you need to add code for every skin.

massaf wrote:

(In reply to comment #2)

The MonoBook skin starts with body { font-size: x-small; } and scales the text
up in the following containers. But the PostEdit code is inserted outside of
this containers right after the opening <body> tag and adds font-size: 0.8em;
on top of this. This is why it ends with 8px (calculated font size) in the
MonoBook skin but 13px in the Vector skin.

Possible solution:

.postedit { font-size: 13px; }

Preferred. This guarantees it will look the same in all skins. All web browsers
are able to scale px font sizes.

An other possible solution:

.skin-monobook .postedit { font-size: 125%; }

This way you need to add code for every skin.

I'm wary of direct px sizing of text in the .postedit element because em is ideal for i18n (though I know nothing of i18n typography yet, just that they prefer em).

I'm also thinking that doing skin-specific sizing might be a bit much work/risk. Would it be completely silly to just reset the em-sizing in .postedit-container to 13px?

.postedit-container {

font-size: 13px;

}

.postedit {

font-size: 1em;

}

I realize this is effectively the same as your first solution, TMg. I just want to be sure there isn't an obscure i18n typography risk with directly setting .postedit { font-size: 13px; }.

mr.heat wrote:

(In reply to comment #3)

I realize this is effectively the same as your first solution, TMg.

This is just an other method to calculate the same font size. You are right, your code is better. But not because of an i18n problem (I'm not aware of any problems with this especially since it is the same font size). The reason is that this allows us to switch to an reliable "top: .6em;" as suggested in bug 41231 and bug 41240.

.postedit-container {

font-size: 13px;
top: .6em;

}
.postedit {

font-size: 1em;

}

massaf wrote:

(In reply to comment #4)

(In reply to comment #3)

I realize this is effectively the same as your first solution, TMg.

This is just an other method to calculate the same font size. You are right,
your code is better. But not because of an i18n problem (I'm not aware of any
problems with this especially since it is the same font size). The reason is
that this allows us to switch to an reliable "top: .6em;" as suggested in bug
41231 and bug 41240.

.postedit-container {

font-size: 13px;
top: .6em;

}
.postedit {

font-size: 1em;

}

Very well, I'll make the switch. There might be potential issues with this approach, though. Please see my follow-up:
https://bugzilla.wikimedia.org/show_bug.cgi?id=41231

massaf wrote:

To clarify: I'll make the switch from px to em in terms of font-sizing, but I'll hold off on positioning until we resolve the issue of section edits.

PostEdit extension has been replaced by core functionality in the MediaWiki software (which was added in version 1.22). Moving to "Page Editing".

mr.heat wrote:

It's 10 months since I reported this issue. Almost a year. I even provided a solution. A single line of CSS. That's all. Andre, I'm very sorry but I really, really do not understand why such insanely simple to fix bugs are not fixed?

If the extension is abandoned it's better to remove it from the Wikipedia projects.

(In reply to comment #6)

I'll hold off on positioning until we resolve the issue of section edits.

I asked this a few times before. What "section editing issue" are you talking about? There is no issue with section editing with this extension. The popup is placed absolutely from the to of the viewport. It does not care about sections.

(In reply to comment #8)

It's 10 months since I reported this issue. Almost a year. I even provided a
solution. A single line of CSS. That's all. Andre, I'm very sorry but I
really, really do not understand why such insanely simple to fix bugs are
not fixed?

It's the usual story: we're people and we make mistakes, sometimes repeatedly. In this particular instance, I neglected to take ownership of this bug after Munaf left the Wikimedia Foundation, and was sufficiently disorganized in processing bug mail that this slipped through the cracks. I apologize. I'm submitting a patch now.

Change 79991 had a related patch set uploaded by Ori.livneh:
Post-edit confirmation: ensure consistent font-size across skins

https://gerrit.wikimedia.org/r/79991

Change 79991 merged by Swalling:
Post-edit confirmation: ensure consistent font-size across skins

https://gerrit.wikimedia.org/r/79991