Page MenuHomePhabricator

WikipediA and Translations are misaligned in cx-header__personal-menu
Open, LowPublic

Description

Chrome 63 (MacOS)

Safari 10 (MacOS)

More misalignment on Content Translation Stats:

Proposed solution
These adjustments are proposed to better align the header:

  • Move the page title down to align with the wordmark. It can be corrected by moving the element 3px down or adding 6px of top margin (I tried the later below).
    • It would be possible as an alternative to move the wordmark up, but that would misalign both of them with respect to the user menu button.
  • Increase the separation between the wordmark and the page title to be 8px, as indicated in T186874.

This is the result of applying the approach:

This is the CSS adjustments made in case they are useful as a reference:

.cx-header__trademark-text{
	margin-left: 8px;
	margin-top: 6px;
}

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 9 2018, 11:16 PM

The wordmarks can have different heights (18px and 22px are used currently). With the jawiki wordmark this issue is not as visible, but seems to still be there. It would also be good to check whether all the wordmarks have the same baseline – if not, then this will be problematic to fix.

Petar.petkovic renamed this task from [monobook] Wikipedia and Translations are misaligned in cx-header__personal-menu to Wikipedia and Translations are misaligned in cx-header__personal-menu.Feb 15 2018, 8:06 AM
Petar.petkovic updated the task description. (Show Details)
Petar.petkovic added subscribers: santhosh, Arrbee.
Pginer-WMF updated the task description. (Show Details)Feb 15 2018, 12:01 PM
Pginer-WMF added a subscriber: Pginer-WMF.

I updated the description to describe the proposed solution

Pginer-WMF triaged this task as Normal priority.
KartikMistry renamed this task from Wikipedia and Translations are misaligned in cx-header__personal-menu to WikipediA and Translations are misaligned in cx-header__personal-menu.Feb 15 2018, 12:05 PM
Pginer-WMF lowered the priority of this task from Normal to Low.Feb 16 2018, 9:41 AM
Arrbee moved this task from Priority backlog to In Progress on the Language-2018-Jan-Mar board.

We need to consider other languages and custom wordmarks while discussing this. Currently arwiki, arzwiki, arwiki, bnwiki, arzwiki, cywiki, cawiki, jawiki, hewiki, mkwiki, srwiki, urwiki and some non-Wikipedia projects use custom wordmarks. Other Wikipedia projects use same wordmark that enwiki uses.

As it currently stands, wordmark ("WikipediA" in English) or trademark (W icon) are centered with tool name ("Translations", "Content Translation statistics", etc. in English). Because of that centering, and the fact that English wordmark doesn't have letters with descenders, it looks 2px off. Inspecting the element shows this centering:

It would also be good to check whether all the wordmarks have the same baseline – if not, then this will be problematic to fix.

I have explored how baseline alignment would affect the different projects and their wordmarks, compared to current state of centering the image and text. Project that don't define custom wordmark and use English version fallback would benefit from this. That includes enwiki, but I have also checked in German, Finnish and Farsi. All would benefit from baseline alignment.

Wikis that define custom wordmarks often use non-Latin letters that have descenders, which makes centering much more beneficial to those wikis. Although, some wikis that define custom wordmarks with letters without descenders, like atjwiki also benefit from baseline alignment.
Not sure if solving this per-project would be productive. Here is how centering vs baseline compares on some wikis with custom wordmark:

Wiki projectCentering (current state)Baseline alignment (proposed state)
arwiki
atjwiki
bnwiki
cawiki
enwiki
hewiki
jawiki
srwiki
urwiki

Proposed solution, from the description of this ticket, would just not be generic enough to cover different fonts with different sizes and baselines.


When displaying trademark (W icon) with tool text (change made in T186871) using baseline instead of centering gives this:

CenteredBaseline

so that would need to be solved separately, although not a huge amount of work, it brings some level of increase in complexity.

We need to consider other languages and custom wordmarks while discussing this.

Thanks for the analysis @Petar.petkovic. I agree we want to find a solution that works across languages, and it seems that it won't be an easy task.

For now I'd focus on solving the non-controversial part of the ticket: increase the separation between the wordmark and the page title to be 8px.

Regarding the vertical alignment, the reading team did some customisations on those wikis where the wormark had descenders. For example, the mobile version of Catalan Wikipedia has the following CSS rule to move the Wordmark one pixel down:

.branding-box span {
    margin-top: 1px;
}

If we can find an approach that can reuse such customisations without having to do our own I'd go that way. If it is not possible or it is too complex, I'd postpone the work on this ticket and involve the Reading team to find a more general solution.

Change 413192 had a related patch set uploaded (by Petar.petkovic; owner: Petar.petkovic):
[mediawiki/extensions/ContentTranslation@master] Increase trademark text margin

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

For now I'd focus on solving the non-controversial part of the ticket: increase the separation between the wordmark and the page title to be 8px.

I have submitted patch for "non-controversial" part.

Regarding the vertical alignment, the reading team did some customisations on those wikis where the wormark had descenders. For example, the mobile version of Catalan Wikipedia has the following CSS rule to move the Wordmark one pixel down:

.branding-box span {
    margin-top: 1px;
}

If we can find an approach that can reuse such customisations without having to do our own I'd go that way. If it is not possible or it is too complex, I'd postpone the work on this ticket and involve the Reading team to find a more general solution.

Not sure if Reading team was behind the customization, but it's coming from this file. That file, and wordmarks are applied only on mobile versions of the site. We don't have mobile-specific skin, but rather we use responsive approach for mobile screens.
I don't see such customizations on other wikis where the wordmark has descenders.

Even if we could reuse that piece of CSS, that would be per-project approach that has high maintenance cost, but could be feasible if Reading team does that maintenance anyway.

I'll try to come up with a way to achieve this without high maintenance costs, but not actively working on it. I'd postpone that part and maybe involve the Reading team.

Nikerabbit removed a project: Patch-For-Review.

Change 413192 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Increase trademark text margin

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

Checked in cx-testing - the change (for the margin is in place) and everything else seems unaffected.

@Petar.petkovic - thank you for the table with examples.

Moved the task to *Continued/Moved to future*.

238482n375 lowered the priority of this task from Low to Lowest.Jun 15 2018, 8:03 AM
238482n375 removed Petar.petkovic as the assignee of this task.
238482n375 moved this task from Next Up to In Code Review on the Analytics-Kanban board.
238482n375 edited subscribers, added: 238482n375; removed: Aklapper.

SG9tZVBoYWJyaWNhdG9yCk5vIG1lc3NhZ2VzLiBObyBub3RpZmljYXRpb25zLgoKICAgIFNlYXJjaAoKQ3JlYXRlIFRhc2sKTWFuaXBoZXN0ClQxOTcyODEKRml4IGZhaWxpbmcgd2VicmVxdWVzdCBob3VycyAodXBsb2FkIGFuZCB0ZXh0IDIwMTgtMDYtMTQtMTEpCk9wZW4sIE5lZWRzIFRyaWFnZVB1YmxpYwoKICAgIEVkaXQgVGFzawogICAgRWRpdCBSZWxhdGVkIFRhc2tzLi4uCiAgICBFZGl0IFJlbGF0ZWQgT2JqZWN0cy4uLgogICAgUHJvdGVjdCBhcyBzZWN1cml0eSBpc3N1ZQoKICAgIE11dGUgTm90aWZpY2F0aW9ucwogICAgQXdhcmQgVG9rZW4KICAgIEZsYWcgRm9yIExhdGVyCgpUYWdzCgogICAgQW5hbHl0aWNzLUthbmJhbiAoSW4gUHJvZ3Jlc3MpCgpTdWJzY3JpYmVycwpBa2xhcHBlciwgSkFsbGVtYW5kb3UKQXNzaWduZWQgVG8KSkFsbGVtYW5kb3UKQXV0aG9yZWQgQnkKSkFsbGVtYW5kb3UsIEZyaSwgSnVuIDE1CkRlc2NyaXB0aW9uCgpPb3ppZSBqb2JzIGhhdmUgYmVlbiBmYWlsaW5nIGF0IGxlYXN0IGEgZmV3IHRpbWVzIGVhY2guIE1vcmUgaW52ZXN0aWdhdGlvbiBuZWVkZWQuCkpBbGxlbWFuZG91IGNyZWF0ZWQgdGhpcyB0YXNrLkZyaSwgSnVuIDE1LCA3OjIxIEFNCkhlcmFsZCBhZGRlZCBhIHN1YnNjcmliZXI6IEFrbGFwcGVyLiC3IFZpZXcgSGVyYWxkIFRyYW5zY3JpcHRGcmksIEp1biAxNSwgNzoyMSBBTQpKQWxsZW1hbmRvdSBjbGFpbWVkIHRoaXMgdGFzay5GcmksIEp1biAxNSwgNzoyMiBBTQpKQWxsZW1hbmRvdSB1cGRhdGVkIHRoZSB0YXNrIGRlc2NyaXB0aW9uLiAoU2hvdyBEZXRhaWxzKQpKQWxsZW1hbmRvdSBhZGRlZCBhIHByb2plY3Q6IEFuYWx5dGljcy1LYW5iYW4uCkpBbGxlbWFuZG91IG1vdmVkIHRoaXMgdGFzayBmcm9tIE5leHQgVXAgdG8gSW4gUHJvZ3Jlc3Mgb24gdGhlIEFuYWx5dGljcy1LYW5iYW4gYm9hcmQuCkNoYW5nZSBTdWJzY3JpYmVycwpDaGFuZ2UgUHJpb3JpdHkKQXNzaWduIC8gQ2xhaW0KTW92ZSBvbiBXb3JrYm9hcmQKQ2hhbmdlIFByb2plY3QgVGFncwpBbmFseXRpY3MtS2FuYmFuCtcKU2VjdXJpdHkK1wpXaWtpbWVkaWEtVkUtQ2FtcGFpZ25zIChTMi0yMDE4KQrXClNjYXAK1wpTY2FwIChTY2FwMy1BZG9wdGlvbi1QaGFzZTIpCtcKQWJ1c2VGaWx0ZXIK1wpEYXRhLXJlbGVhc2UK1wpIYXNodGFncwrXCkxhYnNEQi1BdWRpdG9yCtcKTGFkaWVzLVRoYXQtRk9TUy1NZWRpYVdpa2kK1wpMYW5ndWFnZS0yMDE4LUFwci1KdW5lCtcKTGFuZ3VhZ2UtMjAxOC1KYW4tTWFyCtcKSEhWTQrXCkhBV2VsY29tZQrXCkJvbGQKSXRhbGljcwpNb25vc3BhY2VkCkxpbmsKQnVsbGV0ZWQgTGlzdApOdW1iZXJlZCBMaXN0CkNvZGUgQmxvY2sKUXVvdGUKVGFibGUKVXBsb2FkIEZpbGUKTWVtZQpQcmV2aWV3CkhlbHAKRnVsbHNjcmVlbiBNb2RlClBpbiBGb3JtIE9uIFNjcmVlbgoyMzg0ODJuMzc1IGFkZGVkIHByb2plY3RzOiBTZWN1cml0eSwgV2lraW1lZGlhLVZFLUNhbXBhaWducyAoUzItMjAxOCksIFNjYXAgKFNjYXAzLUFkb3B0aW9uLVBoYXNlMiksIEFidXNlRmlsdGVyLCBEYXRhLXJlbGVhc2UsIEhhc2h0YWdzLCBMYWJzREItQXVkaXRvciwgTGFkaWVzLVRoYXQtRk9TUy1NZWRpYVdpa2ksIExhbmd1YWdlLTIwMTgtQXByLUp1bmUsIExhbmd1YWdlLTIwMTgtSmFuLU1hciwgSEhWTSwgSEFXZWxjb21lLlBSRVZJRVcKMjM4NDgybjM3NSBtb3ZlZCB0aGlzIHRhc2sgZnJvbSBJbiBQcm9ncmVzcyB0byBJbiBDb2RlIFJldmlldyBvbiB0aGUgQW5hbHl0aWNzLUthbmJhbiBib2FyZC4KMjM4NDgybjM3NSByZW1vdmVkIEpBbGxlbWFuZG91IGFzIHRoZSBhc3NpZ25lZSBvZiB0aGlzIHRhc2suCjIzODQ4Mm4zNzUgdHJpYWdlZCB0aGlzIHRhc2sgYXMgTG93ZXN0IHByaW9yaXR5LgoyMzg0ODJuMzc1IHJlbW92ZWQgc3Vic2NyaWJlcnM6IEFrbGFwcGVyLCBKQWxsZW1hbmRvdS4KQ29udGVudCBsaWNlbnNlZCB1bmRlciBDcmVhdGl2ZSBDb21tb25zIEF0dHJpYnV0aW9uLVNoYXJlQWxpa2UgMy4wIChDQy1CWS1TQSkgdW5sZXNzIG90aGVyd2lzZSBub3RlZDsgY29kZSBsaWNlbnNlZCB1bmRlciBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSAoR1BMKSBvciBvdGhlciBvcGVuIHNvdXJjZSBsaWNlbnNlcy4gQnkgdXNpbmcgdGhpcyBzaXRlLCB5b3UgYWdyZWUgdG8gdGhlIFRlcm1zIG9mIFVzZSwgUHJpdmFjeSBQb2xpY3ksIGFuZCBDb2RlIG9mIENvbmR1Y3QuILcgV2lraW1lZGlhIEZvdW5kYXRpb24gtyBQcml2YWN5IFBvbGljeSC3IENvZGUgb2YgQ29uZHVjdCC3IFRlcm1zIG9mIFVzZSC3IERpc2NsYWltZXIgtyBDQy1CWS1TQSC3IEdQTApZb3VyIGJyb3dzZXIgdGltZXpvbmUgc2V0dGluZyBkaWZmZXJzIGZyb20gdGhlIHRpbWV6b25lIHNldHRpbmcgaW4geW91ciBwcm9maWxlLCBjbGljayB0byByZWNvbmNpbGUu

238482n375 set Security to Software security bug.Jun 15 2018, 8:07 AM
238482n375 changed the visibility from "Public (No Login Required)" to "Custom Policy".

SG9tZVBoYWJyaWNhdG9yCk5vIG1lc3NhZ2VzLiBObyBub3RpZmljYXRpb25zLgoKICAgIFNlYXJjaAoKQ3JlYXRlIFRhc2sKTWFuaXBoZXN0ClQxOTcyODEKRml4IGZhaWxpbmcgd2VicmVxdWVzdCBob3VycyAodXBsb2FkIGFuZCB0ZXh0IDIwMTgtMDYtMTQtMTEpCk9wZW4sIE5lZWRzIFRyaWFnZVB1YmxpYwoKICAgIEVkaXQgVGFzawogICAgRWRpdCBSZWxhdGVkIFRhc2tzLi4uCiAgICBFZGl0IFJlbGF0ZWQgT2JqZWN0cy4uLgogICAgUHJvdGVjdCBhcyBzZWN1cml0eSBpc3N1ZQoKICAgIE11dGUgTm90aWZpY2F0aW9ucwogICAgQXdhcmQgVG9rZW4KICAgIEZsYWcgRm9yIExhdGVyCgpFVzZSC3IERpc2NsYWltZXIgtyBDQy1CWS1TQSC3IEdQTApZb3VyIGJyb3dzZXIgdGltZXpvbmUgc2V0dGluZyBkaWZmZXJzIGZyb20gdGhlIHRpbWV6b25lIHNldHRpbmcgaW4geW91ciBwcm9maWxlLCBjbGljayB0byByZWNvbmNpbGUu

Ladsgroup changed the visibility from "Custom Policy" to "Public (No Login Required)".
Restricted Application added a project: Security. · View Herald TranscriptJun 15 2018, 11:55 AM
Arrbee moved this task from Needs Triage to Bugs on the ContentTranslation board.Jun 26 2018, 6:05 PM
Kaganer added a comment.EditedOct 17 2018, 2:31 PM

In some cases, baseline of wordmark may be upper that a baseline of header text.
Currently, for hebrew:

In my opinion, no a good universal solution for this problem. Initial idea (graphic wordmark with text in a single line) is wrong.

See also T207269