CKEditor styles and formatted text

Every element the theme styles inside CKEditor 5 -- quotations, bulleted and nested lists, horizontal rules, tables, to-do lists and inline code, with headings two to six and a description list beside them -- in an editor rendered as a text format field, then the same markup in a text-formatted container, as a formatted text field prints it. Under each, the stylesheets whose rules reach an element of it, worked out in the browser from the page as loaded. At the bottom, the computed values that differ between the editor and the formatted text, element by element. Nothing typed here is saved: the editor belongs to no form, and its text format exists only on this page.

Elements styled in CKEditor

Every element the theme gives a rule of its own inside the editing area -- quotations, bulleted lists and the bullet of a nested one, horizontal rules, tables, to-do lists open and done, and inline code -- with headings two to six and a description list beside them, which have no rule of their own in the editor. The textarea is rendered as the one of a text format field, so whatever class the theme puts around the editor on a node form is around it here. Embedded media is styled as well but left out, because embedding media asks the site for it.

Try

Put the cursor in the inline code: the selected state is a rule of its own.
Check a task of the to-do list, and clear it again.
Edit the text, then Count again under the editor.

<h2>Heading two</h2>
<h3>Heading three</h3>
<h4>Heading four</h4>
<h5>Heading five</h5>
<h6>Heading six</h6>
<p>A paragraph with <strong>bold</strong>, <em>italic</em> and <code>inline code</code>, the last of which has a rule of its own.</p>
<blockquote><p>A quotation. Its padding, margin, border and font style come from custom properties of the theme.</p></blockquote>
<ul><li>A bulleted list, with disc markers.<ul><li>A nested list, with circles.</li><li>A second nested item.</li></ul></li><li>A second item.</li></ul>
<ol><li>A numbered list, for comparison: the theme does not style it in the editor.</li><li>A second item.</li></ol>
<ul class="todo-list"><li><label class="todo-list__label"><input type="checkbox" disabled="disabled"><span class="todo-list__label__description">An open task.</span></label></li><li><label class="todo-list__label"><input type="checkbox" disabled="disabled" checked="checked"><span class="todo-list__label__description">A task that is done.</span></label></li></ul>
<dl><dt>A term</dt><dd>Its description. No plugin of the editor offers a description list, and General HTML Support keeps it because the format of the page allows any HTML.</dd><dt>A second term</dt><dd>A second description.</dd></dl>
<hr>
<table><thead><tr><th>Element</th><th>Rule</th></tr></thead><tbody><tr><td>Table</td><td>No auto margin in the editor</td></tr><tr><td>Horizontal rule</td><td>Two pixels, black</td></tr></tbody></table>

Nothing typed here is saved or sent anywhere: the editor belongs to no form, and its text format exists only on this page.

Stylesheets in the editing area

Listed by JavaScript once the page has loaded.

The same elements as formatted text

The markup the editor starts with, printed in a container with the text-formatted class, as a formatted text field prints it. Nothing filters it: it is a constant of this page.

Heading two

Heading three

Heading four

Heading five

Heading six

A paragraph with bold, italic and inline code, the last of which has a rule of its own.

A quotation. Its padding, margin, border and font style come from custom properties of the theme.

A bulleted list, with disc markers.
- A nested list, with circles.
- A second nested item.
A second item.

A numbered list, for comparison: the theme does not style it in the editor.
A second item.

An open task.
A task that is done.

A term: Its description. No plugin of the editor offers a description list, and General HTML Support keeps it because the format of the page allows any HTML.
A second term: A second description.

Element	Rule
Table	No auto margin in the editor
Horizontal rule	Two pixels, black

Stylesheets in the formatted text

Listed by JavaScript once the page has loaded.

Discrepancies

Where the same element looks different in the editor and in formatted text. The first element of each kind in one area is compared with the first in the other, computed value by computed value. An inherited value is reported where the difference starts, not on every element below it. Widths and heights are left out -- the editing area is narrower than the page by its own padding, and a height follows from what is compared already -- except the thickness of a rule. Listed by JavaScript, and again by Count again.

Listed by JavaScript once the editor has started.