Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Apply text-align: match-parent to the option element in the UA stylesheet #6538

Open
frivoal opened this issue Mar 29, 2021 · 5 comments
Open

Apply text-align: match-parent to the option element in the UA stylesheet #6538

frivoal opened this issue Mar 29, 2021 · 5 comments
Labels
i18n-afrlreq Notifies African languages experts of relevant issues i18n-alreq Notifies Arabic script experts of relevant issues i18n-hlreq Notifies Hebrew script experts of relevant issues i18n-tracker Group bringing to attention of Internationalization, or tracked by i18n but not needing response. topic: rendering

Comments

@frivoal
Copy link
Contributor

frivoal commented Mar 29, 2021

The CSS text 3 spec suggests a UA stylesheet for the option element:

/* make option elements align together */
option { text-align: match-parent; }

This probably should be normatively defined in the HTML spec instead.

This 'match-parent' value makes the desired alignment consistent in bidi situations.
@domenic domenic added the agenda+ To be discussed at a triage meeting label Mar 31, 2021
@domenic
Copy link
Member

domenic commented Apr 1, 2021

Some quick investigation: currently it looks like Firefox uses left and Chromium uses start, at least according to getComputedStyle(). http://software.hixie.ch/utilities/js/live-dom-viewer/?saved=9141

@emilio will be looking into this more.

@emilio
Copy link
Contributor

emilio commented Apr 1, 2021

So, ok, if I understand correctly, this is a representative example of the situation that we want to fix (live):

<!DOCTYPE html>
<style>
  option, p { text-align: match-parent }
  select, div { text-align: end}
</style>
<select>
<option dir=rtl>abc</option>
<option>defghi</option>
</select>
<div>
  <p dir=rtl>abc</p>
  <p>defghi</p>
</div>

So, right now Firefox uses text-align: initial for <select>, while Chromium uses text-align: start, which is equivalent. However, Firefox resolves start at computed-value time, rather than at used-value time.

So that's an interop issue. My understanding is that Firefox's behavior is wrong per spec right now, but it used to be right (see bug 1661548 / w3c/csswg-drafts#2821).

Chromium hasn't implemented match-parent yet, but we should think whether the definition of match-parent makes sense in a world post-w3c/csswg-drafts#2821? If per that issue the values should be resolved against the containing-block, then I think just start / end would do the right thing wouldn't it? Or maybe not, I guess it depends on the layout of the popup, which is not terribly well specified...

@past past mentioned this issue Apr 1, 2021
Closed
@domenic domenic removed the agenda+ To be discussed at a triage meeting label May 6, 2021
@domenic
Copy link
Member

domenic commented May 6, 2021

This issue has gone a bit further beyond my understanding, but from what I can tell the open questions in @emilio's last comment are more in CSSWG territory. Would it make sense to open an issue for the CSSWG telecons? Or is there a clear next step here on the HTML spec side / implementation bug-filing side?

@past past mentioned this issue May 7, 2021
Closed
@fantasai
Copy link
Contributor

fantasai commented Mar 1, 2022

@domenic Afaict, the issue is on the implementation / HTML spec side. What I'm seeing:

  • Firefox has the correct behavior for multi-select boxes, and option { text-align: match-parent; } is clearly in it's UA stylesheet, but pop-up selects don't seem to have the right behavior. (Even an explicit text-align: left on the select or its options doesn't affect the their alignment, so something is getting lost in translation for pop-ups.)
  • Chrome claims no support for the keyword.
  • WPT tests and WebKit source are showing Safari support for match-parent (see https://trac.webkit.org/changeset/286803/webkit), but it's only applied to li in the UA style sheet, not to option. It'd be a very easy fix to add it to the UA style sheet, though. I don't have any way to test whether it supports text-align on pop-up options, though.

@emilio
Copy link
Contributor

emilio commented Mar 2, 2022

  • Firefox has the correct behavior for multi-select boxes, and option { text-align: match-parent; } is clearly in it's UA stylesheet, but pop-up selects don't seem to have the right behavior.

That can be explained. Do you file a bug for this?

Popups have limited styling capabilities (partly for implementation reasons, partly for compat).

Should be easy to fix on desktop: https://searchfox.org/mozilla-central/rev/292d17c13daa61016fd082e2337297091d53a015/toolkit/actors/SelectParent.jsm#29

However on Android we use native menus (and I think that's what Safari uses on macOS), so not sure it can easily be fixed there.

@r12a r12a added i18n-afrlreq Notifies African languages experts of relevant issues i18n-alreq Notifies Arabic script experts of relevant issues i18n-hlreq Notifies Hebrew script experts of relevant issues i18n-tracker Group bringing to attention of Internationalization, or tracked by i18n but not needing response. labels Mar 2, 2022
@w3cbot w3cbot mentioned this issue Mar 2, 2022
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
i18n-afrlreq Notifies African languages experts of relevant issues i18n-alreq Notifies Arabic script experts of relevant issues i18n-hlreq Notifies Hebrew script experts of relevant issues i18n-tracker Group bringing to attention of Internationalization, or tracked by i18n but not needing response. topic: rendering
Milestone
No milestone
Development

No branches or pull requests
6 participants
@frivoal @domenic @fantasai @emilio @annevk @r12a