Page MenuHomePhabricator

Alignment issue with Glosses
Closed, ResolvedPublic5 Story Points

Description

Problem:
The Glosses of different Senses are not vertically aligned. This makes the Lexeme page look messy.

Example:
https://www.wikidata.org/wiki/Lexeme:L21966
https://test.wikidata.org/wiki/Lexeme:L121

Screenshots:


BDD
GIVEN a Lexeme with several Senses
THEN the Glosses of all Senses are in the same line vertically

Acceptance criteria:

  • Glosses of all Senses are in the same line vertically

Details

Related Gerrit Patches:

Event Timeline

Nikki created this task.Oct 18 2018, 5:40 PM
Restricted Application added a project: Wikidata. · View Herald TranscriptOct 18 2018, 5:40 PM
Lydia_Pintscher renamed this task from Glosses for senses are not consistently aligned to Alignment issue with Glosses.Nov 26 2018, 9:54 PM
Lydia_Pintscher triaged this task as Medium priority.
Lydia_Pintscher updated the task description. (Show Details)
Lydia_Pintscher updated the task description. (Show Details)
Lydia_Pintscher moved this task from Incoming to Ready to estimate on the Wikidata-Campsite board.
Lydia_Pintscher moved this task from incoming to consider for next sprint on the Wikidata board.

I can't reproduce this issue on Firefox or Chrome. Can you give more details on what is your browser?


-.-
Nikki tried Vivaldi 1.14, Edge and IE11 and I tried Chromium. I can reproduce it logged in and logged out.

Michael claimed this task.Nov 29 2018, 11:23 AM
Restricted Application added a project: User-Michael. · View Herald TranscriptNov 29 2018, 11:23 AM

This is a problem with table layouting in IE11, Edge and some older Chrome versions.
From some preliminary testing on IE 11, it seems like adding an explicit width attribute to the first table cell (i.e. .wikibase-lexeme-sense-gloss-language) resolves that problem. However, that might not be optimal if the language codes are ever replaced by language names. Currently there is a min-width and a max-width declaration, with the latter being regularly ignored by the browsers.

Side-note: I noticed that the language code and the gloss value are not perfectly vertically aligned. The gloss value has some vertical 1px padding that the language code is missing and that causes the slight misalignment.

Michael added a comment.EditedDec 14 2018, 3:25 PM

@Greta_Doci_WMDE @Lydia_Pintscher
This is an example where long language names are already breaking the layout: https://www.wikidata.org/wiki/Lexeme:L3338#S1

Setting the width to 100px and removing max-width and min-width as mentioned above, fixes that problem as well.

(h/t to @Lucas_Werkmeister_WMDE for providing the query to find it and to @Jakob_WMDE for providing the list of languages)

Michael added a subscriber: Jakob_WMDE.

@Greta_Doci_WMDE @Lydia_Pintscher
This is an example where long language names are already breaking the layout: https://www.wikidata.org/wiki/Lexeme:L3338#S1

Yep, this happens in all versions of browsers, not only at the old ones.

Setting the width to 100px and removing max-width and min-width as mentioned above, fixes that problem as well.

I'll prepare a patch with this change if no one has any better idea.

(h/t to @Lucas_Werkmeister_WMDE for providing the query to find it and to @Jakob_WMDE for providing the list of languages)

<3

That screenshot also shows that the language name and gloss text have slightly different baselines :/

More testing: Looks like fixing width will not resolve our problem completely. As seen in the screenshot below, all the other glosses are aligned depending on the longest language name.

Note: if we want to solve this by wrapping the language name (not saying we should, just an option), we could add some indent to the language name to make it clear that the wrapped lines are not new languages:

padding-left: 1em;
text-indent: -1em;

If we want to go ahead with Lucas idea we should also increasing the width value up to 220px, so we would only have the longest language to be wrapped.

Otherwise if we leave it 'width: 100px' it will look like the pic below and its confusing.

KaMan added a subscriber: KaMan.Jan 2 2019, 2:07 PM

This one please :)

Change 482307 had a related patch set uploaded (by Greta WMDE; owner: Greta Doçi):
[mediawiki/extensions/WikibaseLexeme@master] width and padding was changed so glosses of all senses to be in the same line vertically

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

Patch looks good, for me while testing locally this has gone from this:

To this:

+2ed :)

Change 482307 merged by jenkins-bot:
[mediawiki/extensions/WikibaseLexeme@master] width and padding was changed so glosses of all senses to be in the same line vertically

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