Change <summary> to use span content model instead of block
#819
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
In HTML5, the `<summary>` element can be treated as either block or
inline (phrasing) content. Currently, it's set as a block element,
which can lead to formatting issues in general usage scenarios
like the following.
How to reproduce
Consider the following markdown file (summary.md).
```markdown
<details>
<summary>Hello</summary>
World
</details>
```
When processed with bin/kramdown summary.md with
the `--parse-block-html` option.
```console
$ bin/kramdown summary.md --parse-block-html
<h1 id="summary-test">Summary test</h1>
<details>
<summary>
<p>Hello</summary>
World
</details></p>
</summary>
</details>
Warning: Found no end tag for 'summary' (line 4) - auto-closing it
Warning: Found no end tag for 'details' (line 3) - auto-closing it
Warning: Found invalidly used HTML closing tag for 'summary' on line 4
Warning: Found invalidly used HTML closing tag for 'details' on line 6
```
Expected output
```console
$ bin/kramdown summary.md --parse-block-html
<h1 id="summary-test">Summary test</h1>
<details>
<summary>Hello</summary>
<p>World</p>
</details>
```
Suggestion
By treating `<summary>` as an inline span element rather than a
block element, we can align with the expected output and common
usage patterns. This change is compliant with the HTML5
specification, which allows `<summary>` to be treated as inline
content.
This PR proposes changing the content model for `<summary>` back
to inline, ensuring cleaner output and a more intuitive user
experience.
otegami
added a commit
to otegami/pgroonga.github.io
that referenced
this pull request
Dec 12, 2024
This PR fixed the details summary layout because the kramdown's parser regard the summary as a block and generates unpexpected HTML layout like the following. So we explicitly specified the summary is a inline block to solve it. After gettalong/kramdown#819 is solved, we can just add the parse-block-html option to handdle it.
kou
pushed a commit
to pgroonga/pgroonga.github.io
that referenced
this pull request
Dec 17, 2024
This PR fixed the details summary layout because the kramdown's parser regards the summary as a block and generates unexpected HTML layout like the following. So we explicitly specified the summary is a inline block to solve it. After gettalong/kramdown#819 is solved, we can just add the `parse-block-html` option to handle it. |Before|After| |---|---| |  |  | FYI: This PR doesn't add additional css to fix the layout of details and summary.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR proposes changing the content model for
<summary>back to inline, ensuring cleaner output and a more intuitive user experience.In HTML5, the
<summary>element can be treated as either block or inline (phrasing) content. Currently, it's set as a block element, which can lead to formatting issues in general usage scenarios like the following.How to reproduce
Consider the following markdown file (summary.md).
When processed with
bin/kramdown summary.mdwiththe
--parse-block-htmloption.Expected output
Suggestion
By treating
<summary>as an inline span element rather than a block element, we can align with the expected output and common usage patterns. This change is compliant with the HTML5 specification, which allows<summary>to be treated as inline content.