[drammock]

closes #13, closes #16

width-before-after.mp4

assisted by Claude Opus 5.5

[stefanv]

In the call, was mentioned that left-justified footer is easier to read.

[lundybernard]

Is it possible to reformat like this, or does the auto-formatter complain?

Suggested change

	grid-template-columns:
	[screen-start] calc(max(2rem, 50% - 720px) + 1.25rem)
	[screen-inset-start page-start page-inset-start body-outset-start body-start body-inset-start middle-start gutter-left-start gutter-left-end gutter-right-start]
	1fr
	[gutter-right-end middle-end body-inset-end body-end body-outset-end]
	20.5rem
	[page-inset-end page-end screen-inset-end] max(2rem, 50% - 720px)
	[screen-end];
	grid-template-columns:
	[screen-start]
	calc(max(2rem, 50% - 720px) + 1.25rem)
	[screen-inset-start page-start page-inset-start body-outset-start body-start body-inset-start middle-start gutter-left-start gutter-left-end gutter-right-start]
	1fr
	[gutter-right-end middle-end body-inset-end body-end body-outset-end]
	20.5rem
	[page-inset-end page-end screen-inset-end]
	max(2rem, 50% - 720px)
	[screen-end];

[drammock]

TODO: code formatting to make this section more readable, plus some more comments (e.g, "matching the alignment of items in the topbar" etc)

[drammock]

In the call, was mentioned that left-justified footer is easier to read.

@lundybernard Here's what it looks like with left-aligned footer text items:

To my eye, both the community description and the list of links look off-center. The list of links looks off because the longest element (which is the only one actually centered) is in the middle of the link list, so the (short) last element stands out as uncentered w/r/t the icons below it. For the description, it ends up offcenter because of extra whitespace on the right edge due to word wrapping (moreso or less so depending on where the line wraps).

For the description we could do text-align: center; text-wrap: balance for an intermediate solution (browser makes best effort to wrap lines in a place that minimizes line length differences)... IDK if that seems better to you? If you're unsure, it might be worth spinning up a demo site on a local webserver and using browser console to enable/disable/tweak those CSS properties and see what looks best to you. For the list of text links, there's no comparable alternative to text-wrap: balance so there I think we choose between centered or left-aligned.

My personal take is:

• this is the footer, many people won't read it, those that do may only read it once, and the case in question only occurs on displays / browser windows narrower than 1024px, which suggests it's a small percentage of user interactions we're talking about.
• If everything is centered, then some fraction of those users may struggle to read the community description or links list
• If community description and link list are left-aligned, there's a chance that people not even intending to read the footer might notice that parts of it look unevenly-centered and be drawn to scrutinize it in cases where if it were cleanly centered they wouldn't have looked closely at all
• I don't know how to weigh "looks bad / draws the eye of some (possibly many) users" versus "hard to read for some users", but I lean toward accepting the left-alignment on accessibility grounds

WDYT?

[lundybernard]

I spent some time playing around with variants.

The easiest solution that I prefer is to left-align everything:

.footer .outer-grid {
  justify-items: start;
  text-align: left;
}
.footer .footer-icons {
  justify-content: flex-start;
}

A slightly fancier solution leaves the icons centered:

@media (max-width: 1023px) {
  .footer .outer-grid > .myst-grid-item:nth-child(2),
  .footer .outer-grid > .myst-grid-item:nth-child(3) {
    justify-self: start;
    text-align: left;
  }
}

I had @3M1LY-lb dig up a few references that validate my gut feeling. "WCAG forbids only full justification, and WebAIM, BDA, NHS, Material, Fluent, USWDS, and NN/g all say to left-align multi-line text and lists." I can post a report if anyone is interested.

British Dyslexia Association style guide: "Left align text, without justification. This makes it easier to find the start and finish of each line."