HTML: Proposal to organize the attribute-wrapping settings
See original GitHub issueExtracted from #1297.
What we have
wrap_attributes
:
auto
- enables wrapping of attributes.force
- first attribute stays, others wrapped with “wrap_attributes_indent_size”force-aligned
- the first attribute stays, others wrapped and aligned with the first oneforce-expand-multiline
- If there are more than 1 atribute, ALL attributes are wrapped no matter what and indented with “wrap_attributes_indent_size”. AND: the closing ‘>’ of the opening tag is also on the new line. This mode is currently broken, produces wrongly indented files 😦
There are also multiple effort to provide some additional modes that deal with wrapping of long html elements with multiple attributes: #1285 and #1262.
I think that there are multiple (orthogonal) concerns here and putting them all into single value would create more confusion and weird option names explosion if we are to handle all cases.
So, let’s separate wrapping, aligning and number of attributes per line, etc.
Proposal
wrap_attributes_mode
:
none
- We just don’t wrap attributes, period. (needed?)auto
- Normal attribute wrapping, this should be the default, probably, as the most logical case. When the line is too big, we wrap. If all attributes can fit into a single line, they stay on the single line, no wrapping. (Default.)force
- We forcefully wrap if there are more than 1 attribute present, otherwise auto.
When the wrapping is in action, the following properties are in play. If no wrapping happens, they don’t play any role.
wrapped_attributes_per_line
:
multiple
- Soft wrapping, default. Fit as many attrs per line as allowed.single
- The first attribute stays on the first line, others are on separate lines.single-all
- All attributes, including the first one, placed on separate lines. So, every attribute is on a separate line, and the element/tag line has no attributes left.
wrapped_attributes_indent
:
- auto – Uses
wrap_attributes_indent_size
, default. - aligned – All attribute lines start aligned with the first attribute. If the first attribute is on a new line (“single-all” mode of
wrapped_attributes_per_line
), then we usewrap_attributes_indent_size
to calculate the indent.
wrapped_attributes_end
:
auto
- defaultmultiline
- the closing>
is on the separate line.
Examples
- DEFAULT case: We soft wrap and try to fit as many attributes per line as possible, but within the line length limit.
wrap_attributes_mode = auto
wrapped_attributes_per_line = multiple
wrapped_attributes_indent = auto
wrapped_attributes_end = auto
- #1285 case. Very similar to default case, but we align the wrapped attributes to be on the same indent level as the first attribute.
wrap_attributes_mode = auto
wrapped_attributes_per_line = multiple
wrapped_attributes_indent = aligned
wrapped_attributes_end = auto
- #1262 case. When we wrap, we want one attribute per line, aligned with the first one.
wrap_attributes_mode = auto
wrapped_attributes_per_line = single
wrapped_attributes_indent = aligned
wrapped_attributes_end = auto
- Current
force-expand-multiline
case: Force wrapping if there are more than 1 attribute, with one attribute per line, and with multi-line ending, placing the closing>
on the new line.
wrap_attributes_mode = force
wrapped_attributes_per_line = single-all
wrapped_attributes_indent = auto
wrapped_attributes_end = multiline
Issue Analytics
- State:
- Created 5 years ago
- Reactions:26
- Comments:12 (4 by maintainers)
Top Results From Across the Web
20 HTML Best Practices For Beginners - WebFX
Whether you're an HTML beginner or an expert looking for a refresher, we can help! Check out our 20 best practices for correct...
Read more >HTML wrap Attribute - W3Schools
The wrap attribute specifies how the text in a text area is to be wrapped when submitted in a form. Applies to. The...
Read more >HTML Standard
1 Introduction; 2 Common infrastructure; 3 Semantics, structure, and APIs of HTML documents; 4 The elements of HTML; 5 Microdata; 6 User interaction ......
Read more >CSS Toggles Explainer & Proposal
We propose generalizing the pattern so that it can be applied to any element using a declarative syntax in CSS, with built-in accessibility...
Read more >Applying color to HTML elements using CSS - MDN Web Docs
Every element is a box with some sort of content, and has a background and a border in addition to whatever contents the...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@notiv-nt @Drumstix42
With my limited available time, I’ve been fixing other bugs.
This is still worth doing, but requires someone to take the time to finish the design and implement it.
I’d like to use “aligned-multiple” if using <= 3 attributes, otherwise “force-aligned”. Is this possible at the moment?