question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

HTML: Proposal to organize the attribute-wrapping settings

See original GitHub issue

Extracted 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 one
  • force-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:

  1. auto – Uses wrap_attributes_indent_size, default.
  2. 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 use wrap_attributes_indent_size to calculate the indent.

wrapped_attributes_end:

  • auto - default
  • multiline - the closing > is on the separate line.

Examples

  1. 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
  1. #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
  1. #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
  1. 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:open
  • Created 5 years ago
  • Reactions:26
  • Comments:12 (4 by maintainers)

github_iconTop GitHub Comments

3reactions
bitwisemancommented, Apr 9, 2020

@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.

3reactions
otonielguajardocommented, Dec 7, 2018

I’d like to use “aligned-multiple” if using <= 3 attributes, otherwise “force-aligned”. Is this possible at the moment?

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found