Jump to content

Template talk:Tech header/layout

Add topic
From Meta, a Wikimedia project coordination wiki
Latest comment: 1 year ago by Tacsipacsi in topic aligning

aligning

[edit]

Hello all, will it be better to make the tab size the same and align the text to the center of the tab? see Template:Tech header/sandbox/styles.css. --Minorax«¦talk¦» 03:43, 29 July 2023 (UTC)Reply

On QHD and 4K screens, maybe (or at least not worse). On smaller screens, your design is definitely worse than the current one:
  • As soon as one tab doesn’t fit in one line and contains a line break, its horizontal line is no longer at the same vertical position as those of the other tabs.
  • On even narrower screens, it may happen that both the tabs contain line breaks, and they are broken in two lines themselves. This looks bad; lines should be broken either within or between tabs, not at both places.
  • On even narrower screens, the @media rule kicks in, and there’s only one tab per line – but that’s still narrow, hardly any word fits in one line, let alone whole tab texts.
  • When words don’t fit in one line, they’re broken at arbitrary positions rather than where they should be hyphenated.
  • Not only do narrow-screen scenarios look worse, they also get more common: using the current design, the tabs fit in one line on viewports not narrower than ~1520px; using your design, even a 2050px-wide viewport causes a line break. This means that users with common screen resolutions 1600×900px, 1920×1080px and 2048×1152 would start to see line breaks.
Tacsipacsi (talk) 00:08, 31 July 2023 (UTC)Reply