Page MenuHomePhabricator

Article Feedback Tool - Font Sizes
Closed, ResolvedPublic

Description

Mockup showing proposed font adjustments

Adjust font sizes on the feedback page (and other parts of the extension) to address recommendations below, written by Pau Giner. See also attached mockups.

"The proposed changes to match the size of the left-menu and increase the line height for post content are indicated at http://dl.dropbox.com/u/30377416/prototypes/feedback-tool/article-feedback/font-adjustments.png

The most relevant changes are that (a) I modified the body text to 0.75em (the default in Wikipedia) and (b) increased the line length for post content.
I include a comparison of large comments (where line-height can be appreciated). These are independent changes, so if you prefer bigger text for the post we can still increase the line height to increase readability.

...

It should be taken into account that the em measures are affected by the parent elements of each node. For example, if I include a 2em element into a 0.5em container, the resulting font size is equivalent to 1em.

In the prototype the body font size has been set to 0.8em, and this implies that a 20% reduction will be applied to any other em-based measure in the document. For example, the sub-title "250 feedback posts on this article" that is set to 1.2em instead of being translated to 19px (as stated in the spec), is translated to 18px due to the body font reduction.

This difference is not a big issue (just one pixel in this case), but it should be made clear in the specification whether these ems should be computed considering the body font size reduction or not. At the moment I have indicated the specific em to be applied to each final element including the resulting size in pixels. But I want to be sure that this is the way that best helps developers before we indicate sizes for each single element."


Version: unspecified
Severity: enhancement

Attached:

Details

Reference
bz37025

Related Objects

StatusAssignedTask
ResolvedNone
ResolvedNone

Event Timeline

bzimport raised the priority of this task from to High.Nov 22 2014, 12:27 AM
bzimport added a project: ArticleFeedbackv5.
bzimport set Reference to bz37025.
bzimport added a subscriber: Unknown Object (MLST).

Created attachment 10641
AFT font adjustment examples from Pau (Before and After)

Attached:

yoni wrote:

If i understand correctly, we should be using em rather than "hard" px/pt units - in order for the interface to scale correctly. Pau, is my understanding correct?

Yes, the implementation should be based on em.
The specific em values should be the ones that achieve the indicated size at the 100% zoom level, which may be different em values depending on the specific element.

Why ems are not used at the design level?

The problem of specifying the changes with em, is that it is a relative unit that it is affected by containment. So if I have a one HTML element with a size of 2em that contains another element with 0.5em, the resulting size is equivalent to 1em. Thus, knowing the final size requires you to know the structure of the HTML code.

Considering that with the current code several containment elements have applied different em values (e.g., body has 0.8em that affects any other em value in the page by reducing it to the 80%), there is no guarantee that using the same em value in child elements represents the same final sizes.

Pushed to Gerrit (https://gerrit.wikimedia.org/r/#/c/14499/) & prototype

Pau: can you please thoroughly doublecheck and let me know if and what pieces still need to be changed?
I rebuilt most font-sizes & line-heights & tossed around some more CSS. I'm not sure everything's exactly as you've got it in your head, and the mockups are no (longer a) 100% reflection of the current feedback page. So please let me know what I didn't grasp and I'll fix it!
PS: I think it looks a little less "busy/crowded" already, with the slightly smaller font sizes