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

Update CSS user agent default style sheet #1128

Closed
MurakamiShinyu opened this issue Feb 20, 2023 · 3 comments
Closed

Update CSS user agent default style sheet #1128

MurakamiShinyu opened this issue Feb 20, 2023 · 3 comments
Labels
feature request spec conformance

Comments

@MurakamiShinyu
Copy link
Member

MurakamiShinyu commented Feb 20, 2023 •
edited
Loading

We would consider updating the CSS user agent default stylesheet in Vivliostyle.js to conform to the latest web standards.

The current Vivliostyle.js's UA default stylesheet "user-agent-base.css" is in https://github.com/vivliostyle/vivliostyle.js/blob/master/packages/core/src/vivliostyle/assets.ts#L982.
It was originally derived from https://github.com/sorotokin/adaptive-layout/blob/master/js/adapt/user-agent-base.css.

It seemed to have been made based on CSS2.1 Appendix D. Default style sheet for HTML 4 with some modifications. That was outdated.

Today, modern browsers have nearly common default style sheets (Chromium, WebKit, Firefox) that conform to the "CSS user agent style sheet and presentational hints" defined in HTML Living Standard §15 Rendering.

Some notable differences between the old (current Vivliostyle.js's) and new (HTML Living Standard) default style sheets are as follows:

element/property Old New
h2 margin-block 0.75em 0.83em
h3 margin-block 0.83em 1em
h4,h5,h6 margin-block 1em 1.33em, 1.67em, 2.33em
h6 font-size 0.75em 0.67em
h1 in nested sections -- same as h2-h6 (see comment below)
blockquote margin-block 0px 1em
ol,ul,dir,menu margin-block 0px 1em
[dir=ltr],[dir=rtl] unicode-bidi embed isolate
@MurakamiShinyu
Copy link
Member Author

On "h1 in nested sections -- same as h2-h6", we should keep the current behavior, because the all-<h1> approach is not encouraged in the current HTML standard, so changing h1 font-size in nested sections has no benefit.

See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements

Note: Nesting multiple <h1> elements in nested sectioning elements was allowed in older versions of the HTML standard. However, this was never considered a best practice and is now non-conforming. Read more in There Is No Document Outline Algorithm.

MurakamiShinyu added a commit that referenced this issue Jan 29, 2024
@MurakamiShinyu
feat: Update CSS user agent default style sheet
4e9a2d9 
This updates the CSS user agent default stylesheet in Vivliostyle.js to conform to the latest web standards. (Issue: #1128)

Summary of changes:

| Elements                | Property     | Old    | New     |
|-------------------------|--------------|--------|---------|
| h2                      | margin-block | 0.75em | 0.83em  |
| h3                      | margin-block | 0.83em | 1em     |
| h4                      | margin-block | 1em    | 1.33em  |
| h5                      | margin-block | 1em    | 1.67em  |
| h6                      | margin-block | 1em    | 2.33em  |
| h6                      | font-size    | 0.75em | 0.67em  |
| blockquote, ol, ul, dir, menu | margin-block | 0 | 1em    |
| [dir=ltr], [dir=rtl]    | unicode-bidi | embed  | isolate |
| h1, h2, h3, h4, h5, h6  | font-weight  | bolder | bold    |
| dfn                     | font-style   | --     | italic  |
| listing, plaintext, xmp | white-space  | --     | pre     |
| pre[wrap]               | white-space  | --     | pre-wrap|
| details, dialog, legend, listing, optgroup, option, plaintext, search, xmp | display | -- | block |
| table                   | box-sizing   | --     | border-box |
| table                   | border-collapse | --  | separate |
| table                   | text-indent  | --     | initial  |
| tr                      | vertical-align | --   | inherit  |
| hr                      | margin-block | --     | 0.5em    |
| hr[color], hr[noshade]  | border-style | --     | solid    |
@MurakamiShinyu MurakamiShinyu mentioned this issue Jan 29, 2024
Merged
MurakamiShinyu added a commit that referenced this issue Jan 29, 2024
@MurakamiShinyu
feat: Update CSS user agent default style sheet
5f2001e 
This updates the CSS user agent default stylesheet in Vivliostyle.js to conform to the latest web standards. (Issue: #1128)

Summary of changes:

| Elements                | Property     | Old    | New     |
|-------------------------|--------------|--------|---------|
| h2                      | margin-block | 0.75em | 0.83em  |
| h3                      | margin-block | 0.83em | 1em     |
| h4                      | margin-block | 1em    | 1.33em  |
| h5                      | margin-block | 1em    | 1.67em  |
| h6                      | margin-block | 1em    | 2.33em  |
| h6                      | font-size    | 0.75em | 0.67em  |
| h1, h2, h3, h4, h5, h6  | font-weight  | bolder | bold    |
| blockquote, figure, ol, ul, dir, menu | margin-block | 0 | 1em |
| figure                  | margin-inline| --     | 40px    |
| [dir=ltr], [dir=rtl]    | unicode-bidi | embed  | isolate |
| dfn                     | font-style   | --     | italic  |
| listing, plaintext, xmp | white-space  | --     | pre     |
| pre[wrap]               | white-space  | --     | pre-wrap|
| details, dialog, legend, listing, optgroup, option, plaintext, search, xmp | display | -- | block |
| table                   | box-sizing   | --     | border-box |
| table                   | border-collapse | --  | separate |
| table                   | text-indent  | --     | initial  |
| tr                      | vertical-align | --   | inherit  |
| hr                      | margin-block | --     | 0.5em    |
| hr[color], hr[noshade]  | border-style | --     | solid    |

Also this removes the following styles that have no effect or should be leave to the browser's default.

- `html, address, blockquote, … { unicode-bidi: normal; }`
- `audio, video { break-inside: avoid; }`
- `rtc, rt { font-variant-east-asian: ruby; }`
- `rtc:lang(zh), rt:lang(zh) { ruby-align: center; }`
MurakamiShinyu added a commit that referenced this issue Jan 29, 2024
@MurakamiShinyu
feat: Update CSS user agent default style sheet
230a291 
This updates the CSS user agent default stylesheet in Vivliostyle.js to conform to the latest web standards. (Issue: #1128)

Summary of changes:

| Elements                | Property     | Old    | New     |
|-------------------------|--------------|--------|---------|
| h2                      | margin-block | 0.75em | 0.83em  |
| h3                      | margin-block | 0.83em | 1em     |
| h4                      | margin-block | 1em    | 1.33em  |
| h5                      | margin-block | 1em    | 1.67em  |
| h6                      | margin-block | 1em    | 2.33em  |
| h6                      | font-size    | 0.75em | 0.67em  |
| h1, h2, h3, h4, h5, h6  | font-weight  | bolder | bold    |
| blockquote, ol, ul, dir, menu | margin-block | 0 | 1em    |
| [dir=ltr], [dir=rtl]    | unicode-bidi | embed  | isolate |
| figure                  | margin-block | --     | 1em     |
| figure                  | margin-inline| --     | 40px    |
| hr                      | margin-block | --     | 0.5em   |
| hr[color], hr[noshade]  | border-style | --     | solid   |
| dfn                     | font-style   | --     | italic  |
| listing, plaintext, xmp | white-space  | --     | pre     |
| pre[wrap]               | white-space  | --     | pre-wrap|
| details, dialog, legend, listing, optgroup, option, plaintext, search, xmp | display | -- | block |
| table                   | box-sizing   | --     | border-box |
| table                   | border-collapse | --  | separate |
| table                   | text-indent  | --     | initial  |
| tr                      | vertical-align | --   | inherit  |

Also this removes the following styles that have no effect or should be leave to the browser's default:

- `html, address, blockquote, … { unicode-bidi: normal; }`
- `audio, video { break-inside: avoid; }`
- `rtc, rt { font-variant-east-asian: ruby; }`
- `rtc:lang(zh), rt:lang(zh) { ruby-align: center; }`
MurakamiShinyu added a commit that referenced this issue Jan 29, 2024
@MurakamiShinyu
feat: Update CSS user agent default style sheet
b0993a0 
This updates the CSS user agent default stylesheet in Vivliostyle.js to conform to the latest web standards. (Issue: #1128)

Summary of changes:

| Elements                | Property     | Old    | New     |
|-------------------------|--------------|--------|---------|
| h2                      | margin-block | 0.75em | 0.83em  |
| h3                      | margin-block | 0.83em | 1em     |
| h4                      | margin-block | 1em    | 1.33em  |
| h5                      | margin-block | 1em    | 1.67em  |
| h6                      | margin-block | 1em    | 2.33em  |
| h6                      | font-size    | 0.75em | 0.67em  |
| h1, h2, h3, h4, h5, h6  | font-weight  | bolder | bold    |
| blockquote, ol, ul, dir, menu | margin-block | 0 | 1em    |
| [dir=ltr], [dir=rtl]    | unicode-bidi | embed  | isolate |
| figure                  | margin-block | --     | 1em     |
| figure                  | margin-inline| --     | 40px    |
| hr                      | margin-block | --     | 0.5em   |
| hr[color], hr[noshade]  | border-style | --     | solid   |
| dfn                     | font-style   | --     | italic  |
| listing, plaintext, xmp | white-space  | --     | pre     |
| pre[wrap]               | white-space  | --     | pre-wrap|
| details, dialog, legend, listing, optgroup, option, plaintext, search, xmp | display | -- | block |
| table                   | box-sizing   | --     | border-box |
| table                   | border-collapse | --  | separate |
| table                   | text-indent  | --     | initial  |
| tr                      | vertical-align | --   | inherit  |

Also this removes the following styles that have no effect or should be leave to the browser's default:

- `html, address, blockquote, body, dd, div, dl, dt, fieldset, form, … { unicode-bidi: normal; }`
- `h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dir, menu, fieldset, form { margin-inline: 0; }`
- `fieldset, form { margin-block: 1em; }`
- `audio, video { break-inside: avoid; }`
- `rtc, rt { font-variant-east-asian: ruby; }`
- `rtc:lang(zh), rt:lang(zh) { ruby-align: center; }`
@MurakamiShinyu
Copy link
Member Author

Implemented in PR #1255. See this PR for details of the changes and test results.

@MurakamiShinyu
Copy link
Member Author

This change is available in v2.27.0

@ogwata ogwata mentioned this issue Feb 13, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feature request spec conformance
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@MurakamiShinyu