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.

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

Specify br and wbr rendering as magic #2298

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Specify br and wbr rendering as magic #2298

wants to merge 1 commit into from

Conversation

domenic
Copy link
Member

@domenic domenic commented Jan 25, 2017

Closes #2291.

Marked "do not merge" as we try to work on the following questions.

Editorial questions:

  • Does this belong in the Widgets section, or the Replaced elements section? Both seem rather similar.
  • Did I use "used style" correctly? Should it be "computed" instead? I always get these confused.

Normative questions:

  • What are the "bidi implications" that I deleted about? Do we need to add those back somehow?
  • "No CSS properties affect this element's rendering." This is not true across browsers. http://software.hixie.ch/utilities/js/live-dom-viewer/?saved=4837 shows line-height affecting br in different ways in Edge and in Blink (no effect in Gecko), and wbr seems to be styled as a red box in Edge and a box in Gecko. Should we hold this as an ideal and submit some reftests, perhaps? In the intersection, none of the tested CSS properties appear to apply reliably.

💥 Error: Wattsi server error 💥

PR Preview failed to build. (Last tried on Jan 15, 2021, 7:57 AM UTC).

More

PR Preview relies on a number of web services to run. There seems to be an issue with the following one:

🚨 Wattsi Server - Wattsi Server is the web service used to build the WHATWG HTML spec.

🔗 Related URL

Parsing MDN data...
Parsing...



If you don't have enough information above to solve the error by yourself (or to understand to which web service the error is related to, if any), please file an issue.

@domenic domenic added do not merge yet Pull request must not be merged per rationale in comment topic: rendering labels Jan 25, 2017
@domenic domenic requested a review from zcorpan January 25, 2017 20:51
@zcorpan
Copy link
Member

zcorpan commented Jan 25, 2017

Does this belong in the Widgets section, or the Replaced elements section? Both seem rather similar.

Neither? Can't it stay in the phrasing content section?

Did I use "used style" correctly? Should it be "computed" instead? I always get these confused.

I guess you mean, whatever is returned by getComputedStyle? In CSSOM that is called "resolved style", which can be used style or computed style depending on the property... but it's not clear to me it's a good idea to include these rules in the first place.

What are the "bidi implications" that I deleted about? Do we need to add those back somehow?

I think what is considered a bidi paragraph, and yeah, we need to be careful not to break that here. Can check in more detail later.

In the intersection, none of the tested CSS properties appear to apply reliably.

Per #2291 (comment) results are different if you apply only line-height (without display:block). I don't want to assume that the Web doesn't depend on this. 😐

@zcorpan zcorpan added the needs tests Moving the issue forward requires someone to write tests label Feb 2, 2017
@zcorpan
Copy link
Member

zcorpan commented Feb 2, 2017

I think we need to do more testing to inform what to do here.

@tabatkins
Copy link
Collaborator

What are the "bidi implications" that I deleted about? Do we need to add those back somehow?

Actually, that note is about setting the 'content' property on those elements. Assuming that property simply doesn't work on these, then there are no bidi implications, and the line was safe to remove.

@zcorpan
Copy link
Member

zcorpan commented Feb 3, 2017

Well it depends on whether the "bidi implications" were an unimportant side-effect or if it was deliberate. I remember something about br and bidi, but need to look up what happened there.

@fantasai
Copy link
Contributor

Line breaks in general have bidi implications. <br> specifically breaks the bidi “paragraph”. It was previously defined not to (in HTML4) but this was found to be Web-incompatible, IIRC.

source Outdated
<p>However, this is not part of the user agent stylesheet rules, as inspecting the used style
of <code>br</code> and <code>wbr</code> elements does not give any of the above values.</p>

<p>(Note also that this depends on the as-of-yet unimplemented ability to specify the
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can just move the 'content' declaration to a ::before pseudo; there's no real need for it to be specified on the element itself.

source Outdated
<p>No CSS properties are expected to affect the rendering of these elements.</p>

<div class="note">
<p>The following CSS snippet reproduces the above expectations:</p>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Say it "approximately" reproduces?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Given that things like line-height work probably the best thing to do is to just remove this approximation.

source Outdated
}</pre>

<p>However, this is not part of the user agent stylesheet rules, as inspecting the used style
of <code>br</code> and <code>wbr</code> elements does not give any of the above values.</p>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are in fact use cases for allowing more CSS control over these elements (see @AndySky21's comments in w3c/csswg-drafts#610). So I would suggest allowing a UA to implement it with CSS rules, even if that's neither required nor expected atm. In which case, the note shouldn't say that these styles are necessarily undetectable. (This is very unlikely to be or become a Web-compat issue.)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When we have multi-implementer interest in implementing these in a way that detectably shows up in getComputedStyle, we'll allow (or enforce) that in the standard, but until then it's best to spec the interoperable reality that they do not.

source Outdated
<h4>The <code>br</code> and <code>wbr</code> elements</h4>

<p>The <code>br</code> element is expected to render as a line break, ignoring the effect of the
<span>'white-space'</span> property.</p>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

... expected to render as a forced line (and bidi paragraph) break.

“line break” is ambiguous, because the Unicode Line Separator (U+2028) breaks a line but doesn't break the bidi paragraph.

source Outdated

<p>The <code>wbr</code> element is expected to render as a line break opportunity.</p>

<p>No CSS properties are expected to affect the rendering of these elements.</p>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@zcorpan points out that line-height and font-size are honored, so these should be listed as exceptions.

@domenic
Copy link
Member Author

domenic commented Mar 14, 2017

OK, I posted a new version of this that omits the CSS equivalent, hopefully talks properly about bidi line breaks, and has a vague paragraph about what properties apply. The text ends up being:

The br element is expected to render as a forced line (and bidi paragraph) break, ignoring the effect of the 'white-space' property.

The wbr element is expected to render as a line break opportunity.

Most CSS properties do not affect the rendering of these elements; however, some such as 'line-height' and 'font-size' seem to do so under some circumstances. The exact specification for which properties apply is still being determined.

Thoughts and help appreciated; the last paragraph in particular could probably be better.

@fantasai
Copy link
Contributor

fantasai commented Mar 20, 2018

@Nadya678 points out that the display property is also supported, insofar as it can be set to none: w3c/csswg-drafts#610 (comment)

Wrt <wbr>, it looks like Webkit/Blink-based browsers override an inherited white-space: nowrap and create a line-break opportunity anyway, but Edge/IE/Gecko do not. I want to run this test on Netscape 4 now... see http://fantasai.tripod.com/FHQR/HTML/misc.htm#NOBR which dates from like 2000 or so. More ancient references can be found with https://www.google.com/search?q=netscape+nobr+wbr

@fantasai
Copy link
Contributor

More fun archaeology: https://bugzilla.mozilla.org/show_bug.cgi?id=6347#c29

@frivoal
Copy link
Contributor

frivoal commented Aug 20, 2018

another nuance in "Most CSS properties do not affect the rendering of these elements; however, some [...] seem to do so under some circumstances":

In Firefox (but not Chrome), the margin property applies to <wbr>. This can be useful for a (somewhat rough) solution to wakachi-gaki, a practice often found in Japanese books (including textbooks) for children and language learners which consists of putting half an em or an em worth of whitespace between words. Japanese does not normally have interword spaces, but marking word boundaries with <wbr> is a semantically reasonable thing to do, which then allows wbr {margin-right: 1em;}, possibly combined with word-break: keep-all, to enable word-by-word line breaking, rather than the usual character-by-character line breaking.

I don't think this is gives a perfect rendition of wakachi-gaki, but it's a useful approximation.

TL;DR: I wouldn't ban the margin property from applying to <wbr>.

Base automatically changed from master to main January 15, 2021 07:56
Zynton added a commit to odoo-dev/odoo-editor that referenced this pull request Mar 22, 2021
dmo-odoo pushed a commit to odoo-dev/odoo-editor that referenced this pull request Mar 22, 2021
@andreubotella
Copy link
Member

From my tests, it seems like all browser engines honor display: none on <br> elements; and they will not render anything for display: contents, even if the <br> element has contents.

@r12a r12a added the i18n-tracker Group bringing to attention of Internationalization, or tracked by i18n but not needing response. label Sep 21, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
do not merge yet Pull request must not be merged per rationale in comment i18n-tracker Group bringing to attention of Internationalization, or tracked by i18n but not needing response. needs tests Moving the issue forward requires someone to write tests topic: rendering
Development

Successfully merging this pull request may close these issues.

UA style for <br> and <wbr>
7 participants