html Native support for indents

I would like to propose that HTML natively supports indents. Although I'm thinking that it could be used in tags like headings or paragraphs, an important point of the suggestion is that they could be used in li tags without requiring ul or ol wrapping.

This would simplify browsers' implementation of the execCommand API, as well as text editors.

But there are other reasons:

Nested lists are problematic. The execCommand API outputs incorrect HTML when indenting.[1] Fixing that would not be possible even by changing the API, at least satisfactorily, since it would make it so that if one wanted to indent a li two or more times against its parent, the prefixes for nested lists (1.1, 1.2 [...] ) would be incorrect.[2]

The concept of nesting may make sense when considering that each nesting always increases a single level of depth, but what happens in real life is that an item can be 2 or more levels deep compared to the previous item; in which case it makes more sense to use a flat model.

Related discussions: [1] https://github.com/whatwg/html/issues/5567 [2] https://github.com/facebook/lexical/issues/2951

Jan 19 '23 22:01 GermanJablo

execCommand API, as well as text editors.

The execCommand API is very historical and is known to be not a very good API. Due to it's age though is a good chance changes to it would be a breaking change (even in spite of the quirks).

There is a proposal for improving editing behaviour although no browsers seem to have indicated an intent to take on the proposal yet. Though with such an API you could just generate <ul> nesting yourself by responding to the appropriate edit events.

Jan 20 '23 11:01 Jamesernator

Though with such an API you could just generate <ul> nesting yourself by responding to the appropriate edit events.

The problem is that the the HTML spec itself doesn't provide a canonical way to represent list items that are indented multiple levels. So even if you were to generate ul nesting yourself, you couldn't do it in a way that would be semantically correct and function in sane way in modern browsers.

Jan 25 '23 23:01 acywatson

https://github.com/whatwg/html/issues/8751#issue-1550024105

Rationale

@GermanJablo, I've wanted this for a long time, because:

It would allow me to stop wrapping my <h[1-6]>s in <li>s to demonstrate hierarchy using indentation, since that method breaks list-style: outside;. ^1
That method renders multi-line CommonMark unreadable (due to it not supporting source indentation inside HTML tags).

Examples

`application/YAML`

I think of it like YAML – specifically, HTML currently supports:

```
Heading:
Content
Heading:
Content
```

Heading:
- Heading:
  Content
- Heading:
  Content

Adding what this issue proposes would also provide the undermentioned:

Heading:
Content
  Heading:
  Content
  Heading:
  Content
Heading:
Content

Example

This matters when you have a situation like:

Heading:
Content
- Heading:
  Content
  - Heading:
    Content
- Content
- Content

...because it can be replaced with:

Heading:
  Content
  Heading:
    Content
    Heading:
      Content
  - Content
  - Content

...ensuring that headings remain separate from lists that are unrelated.

text/plain

We've always had this functionality available to us in text/plain files. It's a real regression that something as versatile as HTML doesn't provide this without the user having to create an unsemantic div class in CSS3 that inherently can't gracefully regress to pure HTML.
text/HTML

I've seen ol and ul used as a replacement, due to most default stylesheets indenting them if they have list-style: outside; set (since they should solely ever contain lis).

`application/vnd.OASIS.OpenDocument.text`

Utilising the undermentioned context.xml in an ODT file causes it to be rendered with an indentation. Specifically, it adds a margin-left property:

Rendered Screenshot

Source `application/XML`

<?xml version="1.0" encoding="UTF-8"?>
<office:document-content
	xmlns:css3t="http://www.w3.org/TR/css3-text/"
	xmlns:grddl="http://www.w3.org/2003/g/data-view#"
	xmlns:xhtml="http://www.w3.org/1999/xhtml"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:xsd="http://www.w3.org/2001/XMLSchema"
	xmlns:xforms="http://www.w3.org/2002/xforms"
	xmlns:dom="http://www.w3.org/2001/xml-events"
	xmlns:script="urn:oasis:names:tc:opendocument:xmlns:script:1.0"
	xmlns:form="urn:oasis:names:tc:opendocument:xmlns:form:1.0"
	xmlns:math="http://www.w3.org/1998/Math/MathML"
	xmlns:office="urn:oasis:names:tc:opendocument:xmlns:office:1.0"
	xmlns:ooo="http://openoffice.org/2004/office"
	xmlns:fo="urn:oasis:names:tc:opendocument:xmlns:xsl-fo-compatible:1.0"
	xmlns:ooow="http://openoffice.org/2004/writer"
	xmlns:xlink="http://www.w3.org/1999/xlink"
	xmlns:drawooo="http://openoffice.org/2010/draw"
	xmlns:oooc="http://openoffice.org/2004/calc"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:calcext="urn:org:documentfoundation:names:experimental:calc:xmlns:calcext:1.0"
	xmlns:style="urn:oasis:names:tc:opendocument:xmlns:style:1.0"
	xmlns:text="urn:oasis:names:tc:opendocument:xmlns:text:1.0"
	xmlns:of="urn:oasis:names:tc:opendocument:xmlns:of:1.2"
	xmlns:tableooo="http://openoffice.org/2009/table"
	xmlns:draw="urn:oasis:names:tc:opendocument:xmlns:drawing:1.0"
	xmlns:dr3d="urn:oasis:names:tc:opendocument:xmlns:dr3d:1.0"
	xmlns:rpt="http://openoffice.org/2005/report"
	xmlns:formx="urn:openoffice:names:experimental:ooxml-odf-interop:xmlns:form:1.0"
	xmlns:svg="urn:oasis:names:tc:opendocument:xmlns:svg-compatible:1.0"
	xmlns:chart="urn:oasis:names:tc:opendocument:xmlns:chart:1.0"
	xmlns:officeooo="http://openoffice.org/2009/office"
	xmlns:table="urn:oasis:names:tc:opendocument:xmlns:table:1.0"
	xmlns:meta="urn:oasis:names:tc:opendocument:xmlns:meta:1.0"
	xmlns:loext="urn:org:documentfoundation:names:experimental:office:xmlns:loext:1.0"
	xmlns:number="urn:oasis:names:tc:opendocument:xmlns:datastyle:1.0"
	xmlns:field="urn:openoffice:names:experimental:ooo-ms-interop:xmlns:field:1.0"
	office:version="1.3"
>
	<office:scripts/>
	<office:font-face-decls>
		<style:font-face
			style:name="Liberation Sans"
			svg:font-family="&apos;Liberation Sans&apos;"
			style:font-family-generic="swiss"
			style:font-pitch="variable"
		/>
		<style:font-face
			style:name="Liberation Serif"
			svg:font-family="&apos;Liberation Serif&apos;"
			style:font-family-generic="roman"
			style:font-pitch="variable"
		/>
		<style:font-face
			style:name="Noto Sans CJK SC"
			svg:font-family="&apos;Noto Sans CJK SC&apos;"
			style:font-family-generic="system"
			style:font-pitch="variable"
		/>
		<style:font-face
			style:name="Noto Sans Devanagari"
			svg:font-family="&apos;Noto Sans Devanagari&apos;"
			style:font-family-generic="swiss"
		/>
		<style:font-face
			style:name="Noto Sans Devanagari1"
			svg:font-family="&apos;Noto Sans Devanagari&apos;"
			style:font-family-generic="system"
			style:font-pitch="variable"
		/>
		<style:font-face
			style:name="Noto Serif CJK SC"
			svg:font-family="&apos;Noto Serif CJK SC&apos;"
			style:font-family-generic="system"
			style:font-pitch="variable"
		/>
	</office:font-face-decls>
	<office:automatic-styles>
		<style:style
			style:name="P1"
			style:family="paragraph"
			style:parent-style-name="Standard"
		>
			<style:text-properties
				officeooo:rsid="000cbeb8"
				officeooo:paragraph-rsid="000cbeb8"
			/>
		</style:style>
		<style:style
			style:name="P2"
			style:family="paragraph"
			style:parent-style-name="Standard"
		>
			<style:paragraph-properties
				fo:margin-left="1.251cm"
				fo:text-indent="0cm"
				style:auto-text-indent="false"
			/>
			<style:text-properties
				officeooo:rsid="000cbeb8"
				officeooo:paragraph-rsid="000cbeb8"
			/>
		</style:style>
	</office:automatic-styles>
	<office:body>
		<office:text>
			<text:sequence-decls>
				<text:sequence-decl
					text:display-outline-level="0"
					text:name="Illustration"
				/>
				<text:sequence-decl
					text:display-outline-level="0"
					text:name="Table"
				/>
				<text:sequence-decl
					text:display-outline-level="0"
					text:name="Text"
				/>
				<text:sequence-decl
					text:display-outline-level="0"
					text:name="Drawing"
				/>
				<text:sequence-decl
					text:display-outline-level="0"
					text:name="Figure"
				/>
			</text:sequence-decls>
			<text:p text:style-name="P1">Not Indented</text:p>
			<text:p text:style-name="P2">Indented</text:p>
		</office:text>
	</office:body>
</office:document-content>

Implementation

Would you propose that this be implemented with an <indent> tag (or another mechanism)?

Feb 22 '25 15:02 RokeJulianLockhart

Native support for indents

Rationale

Examples

`application/YAML`

Example

`text/plain`

`text/HTML`

`application/vnd.OASIS.OpenDocument.text`

Rendered Screenshot

Source `application/XML`

Implementation

Native support for indents

Rationale

Examples

application/YAML

Example

text/plain

text/HTML

application/vnd.OASIS.OpenDocument.text

Rendered Screenshot

Source application/XML

Implementation

`application/YAML`

`text/plain`

`text/HTML`

`application/vnd.OASIS.OpenDocument.text`

Source `application/XML`