br要素だけがフレックスアイテムやグリッドアイテムにならない

前提

　以下のコードにおいて、hr要素はフレックスアイテムやグリッドアイテムになりますが、br要素はそのようにならずテキストと一体として扱われているように思います。

これは、どのような仕様によるものでしょうか。推測や個人的見解でかまいませんので、教えて下さい。
Chrome と Firefox で同じ動作でしたが、これは仕様に沿ったUAであればこの動作が保証されているでしょうか。推測や個人的見解でかまいませんので、教えて下さい。
br要素以外に、このようなふるまいをする要素はありますか？

　なお、回避方法などについてお伺いをしているわけではないです。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <style>
8    * {
9      margin: 0;
10      padding: 0;
11    }
12
13    .flex {
14      display: flex;
15    }
16
17    .grid {
18      display: grid;
19      grid: auto-flow / repeat(5, auto);
20    }
21  </style>
22</head>
23
24<body>
25  <div class="flex">
26    text
27    <br>
28    text
29    <hr>
30    text
31  </div>
32  <div class="grid">
33    text
34    <br>
35    text
36    <hr>
37    text
38  </div>
39</body>
40
41</html>

発生している問題・エラーメッセージ

Chrome Devtools の Layout タブで overlay を表示したスクリーンショット

Firefox の開発者ツールのレイアウトタブでフレックスアイテムのリストを表示したスクリーンショット

試したこと

この仕様は見ました。

br { display-outside: newline; } /* this also has bidi implications */
15.3.4 Phrasing content | HTML Standard

4. Flex Items | CSS Flexible Box Layout Module Level 1

6. Grid Items | CSS Grid Layout Module Level 2

行動規範の内容に同意します

回答3件

ベストアンサー

現状は仕様に基づく挙動ではないので、<br>と<wbr>が将来に渡って同じ挙動をする保証はないと思います。

HTML要素のレンダリング挙動については、たいていの場合はブラウザでの挙動が最初に存在して、それにCSSで後から理由付けを行っています。

<br>と<wbr>に関してはCSSワーキンググループ的には「display-outside:newlineのような特有の規格化は必要なし」と判断されました。なので、こんどは HTML のほうでレンダリングのルールを規格化すべきターンなのだと思います。しかしまだ規格化されていないので、この挙動に依存するのはリスクがあります。

似たようなケースで、<fieldset> と <legend> のレンダリング挙動がCSSワーキンググループではなくHTML規格で詳細に定められています。

投稿2022/04/04 00:05

int32_t

総合スコア20872

Lhankor_Mhy

2022/04/04 04:42

ありがとうございます。どうやら仕様で定められていないだろうこと、理解しました。「必要なしと判断された」というのは、このコメントの部分ですね。 https://github.com/w3c/csswg-drafts/issues/610#issuecomment-274911199 現状のCSSで記述できるので、新しく何かを作ることはしないと。 https://lists.w3.org/Archives/Public/www-style/2016Mar/0379.html 上記CSSだけだと、ご提示のIssueでも指摘されていますが後方互換が維持できなさそうなので、実装に基づいてHTMLの仕様で特別に決めてしまった方が、仕様としてはややこしくなり美しくはないものの、実装側の負担も少ないという感じではあるのでしょうね。

行動規範の内容に同意します

Content model: が Nothing. だからとか。

【HTML Standard】
https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-br-element

4.5.27 The br element
Categories:
Flow content.
Phrasing content.
Contexts in which this element can be used:
Where phrasing content is expected.
Content model:
Nothing.

投稿2022/04/02 04:59

編集2022/04/02 08:34

kei344

総合スコア69407

Lhankor_Mhy

2022/04/02 05:08

ご回答ありがとうございます。それだと hr もそうなんですよね…… https://html.spec.whatwg.org/multipage/grouping-content.html#the-hr-element

kei344

2022/04/02 08:37

確かに。<wbr>もNothingなのに br とは違う挙動ですね、勘が外れました。 https://jsfiddle.net/e70on4fa/ （本文編集：リンク先が間違っていたのを修正）

kei344

2022/04/02 09:05

「CSS text run BR」で探してみた。BRを要素ではなくグリフとして扱ってるのではないかというような話（読解力には自信なし）。【[css-flexbox] Should <br> get lumped into a "contiguous run of text" to form an anonymous flex item? from Daniel Holbert on 2014-01-22 (www-style@w3.org from January 2014)】 https://lists.w3.org/Archives/Public/www-style/2014Jan/0317.html （何回かやり取りのあと↓） https://lists.w3.org/Archives/Public/www-style/2014Jan/0396.html > I think that WHATWG should change its incorrect definition, and should say that it is treated as though it was a glyph, and not as an element, except for a limited set of properties and values.

thyda.eiqau

2022/04/02 14:04

興味深いですね。kei344さんご提示のリンク先にあるとおり、br要素には何のスタイルも当たらず、「要素ではなく」という表現は正しいように感じますね。次のコードで "world" は現れず、すべての要素に対して指定できるはずのcontentが効いていないですね。 <style> br, hr { font-size: 0.5em; line-height: 5; margin: 0; } br:after { content: 'world'; } hr:after { content: 'you'; } </style> <section>hello<br>.</section> <section>How are<hr>?</section> MDNでは「キャリッジリターンを生成する」と表現されていて、こちらも「グリフとして扱って」と一致しているように理解できますね。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br

arcxor

2022/04/02 14:15

この問題についての的確な回答はできませんが、同様の質問が stackoverflow で扱われているようです。 https://stackoverflow.com/questions/45087054/br-is-not-friendly-with-the-flexbox br 要素は歴史的に特殊な振る舞いをしていて結果的にそうなってしまっている、というような感じの説明がされていますね。しかし、ここのコメントで指摘されている通り wbr と振る舞いが異なることは直感に反しますね。何の前提知識もなく考察するとすれば hr と br の違いとして、hr は置換要素として内在幅高さを持つ物が生成されると考えられそうですが、これでは br と wbr の振る舞いの違いが説明できません。 br 要素だけが歴史的に特殊な振る舞いをしている、という以上の理論的な説明があるのかどうか興味深い問題です。

thyda.eiqau

2022/04/03 07:49

Blinkの実装では LayoutBR クラスは LayoutText を継承していて、テキストノードの一部として扱われているいるように見えますね。 Width という短形描画の際に参照されるっぽいメンバーが居ますが常に0が返されています。 https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/layout/layout_br.h;drc=7fb345a0da63049b102e1c0bcdc8d7831110e324;l=30 同様に LayoutText を継承しているクラス https://source.chromium.org/search?q=%22:%20public%20LayoutText%20%7B%22&ss=chromium%2Fchromium%2Fsrc:third_party%2Fblink%2Frenderer%2Fcore%2Flayout%2F

Lhankor_Mhy

2022/04/04 04:28

みなさんから頂いたページを読むのに時間がかかってしまいました。応答が遅くなってすみません。 > kei344 さんありがとうございます。 WHATWG はグリフとして扱うように仕様を変更すべき、みたいな話のようですね。HTMLがW3Cから離れてしまったので、ややこしいことになっているのでしょうか。 > thyda.eiqau さんありがとうございます。 Mozilla のコードを見てみたところ、テキストと同じ処理をしてるっぽいのかな、という印象を受けました。コード読めないのであれですが。 https://searchfox.org/mozilla-central/source/layout/generic/BRFrame.cpp#92 https://searchfox.org/mozilla-central/search?q=symbol:_ZN12nsLineLayout15SetLineEndsInBREb > arcxor さん興味深いです。 CSS1のころから「現在のCSSでは定義できない」とされていながらずっとスルーされている、というのが示唆的であるように思いました。

行動規範の内容に同意します

全然ついていけてないのですが
テキストレベルセマンティクスと、グルーピングコンテンツの違いは関係ないですか？

投稿2022/04/03 09:19