[css-text] Indent-preserving wrapping

[jakearchibald]

Taking some preformated content like:

<div>
  <p>
    This is a really long paragraph so you'd expect some form of wrapping
    <span>
      but there are lots of different ways of handling that.
    </span>
  </p>
</div>

Currently, white-space: pre-wrap lets you wrap it like this:

<div>                                  |
  <p>                                  |
    This is a really long paragraph so |
you'd expect some form of wrapping     |
    <span>                             |
      but there are lots of different  |
ways of handling that.                 |
    </span>                            |
  </p>                                 |
</div>                                 |

But, with code and markup, wrapping like this is much better:

<div>                                  |
  <p>                                  |
    This is a really long paragraph so |
    you'd expect some form of wrapping |
    <span>                             |
      but there are lots of different  |
      ways of handling that.           |
    </span>                            |
  </p>                                 |
</div>                                 |

…where the indenting of each line is preserved. Here's a demo of the behaviour.

This behaves as if each soft wrap repeats the whitespace from the start of the line (although this wouldn't appear in copied text).

It'd be nice if CSS could enable this.

[rauschma]

I’d love to have this! The current workaround by many sites is to scroll horizontally. This would be much better.

I simulated it like this a while ago: https://codepen.io/rauschma/pen/dyqbrPW

[jakearchibald]

@rauschma Nice! Take a look at https://output.jsbin.com/jovavaq/4/quiet. It requires JS, but it works along with things like tab-size.

[LeaVerou]

This is a common pain point for presenting code, so I'm glad to see a proposal around it! However, usually when code is wrapped in that way, there is some kind of symbol (e.g. something like ↩️) to indicate that the line was wrapped, and distinguish it from an actual line break. I wonder if we could have some kind of optional pseudo-element for this.

[bramus]

In addition to the pseudo to style the thing I think we also need an easy way to set that character to be used. Similar to text-overflow which also accepts a <string>{1,2} (only supported in Firefox though – demo), I am thinking of something like text-wrap-character: "⮐";.

Side question: can an element have more than one occurrence of a pseudo? Because when a line wraps across 3 lines, you’d have 2 wrapping pseudos.

[kizu]

I wonder if the “showing the automatic line breaks” could be a part #8874 — while it is talking about showing the existing invisible characters, showing the automatic wrap character feels very close to it.

Otherwise, yes, we'd need for every line to have this symbol, as there might be a lot of lines wrapping (showing the “wrapped line gets an additional indentation” case, as something that can also be desirable, and which is better for this particular demonstration):

And another issue to think about: how should this pseudo-element be placed? If it would be placed as an actual element, it could lead to the issue where the same length of text could look different based on if it was resized or not: if it fits on a line, there is no pseudo-element added. Let's say one symbol wraps, and there is not enough space for adding the pseudo-element — that would mean that an additional symbol (or more) would wrap. Now, let's resize the container so that all except for one symbol would get back on the previous line: we'd need to resize to a larger width in order to have enough space that the wrapped symbol would get onto the original line.

This is something I did encounter in my practice multiple times when implementing the “showing the overflow menu” pattern, and I feel that it also applies to this case.

[jakearchibald]

Which editors/software add a symbol for soft wrapping? I've seen it done for hard wrapping ("hidden characters").

Adding a symbol for soft wrapping seems like a separate feature, as you may want it for other kinds of soft wrapping. It might also be a hard problem to solve due to circular stuff, where the existence of the character pseudo itself changes the wrapping.

[kizu]

Which editors/software add a symbol for soft wrapping? I've seen it done for hard wrapping ("hidden characters").

That is a good question, and I didn't manage to find anything with a quick search, though I think I saw it somewhere at some point. Maybe.

That said, thinking about it a bit more — if we'd have an ability to show the invisible symbols including the hard wraps, won't this be enough to make the hard wrap distinguishable from the soft wrap?

[LeaVerou]

Which editors/software add a symbol for soft wrapping? I've seen it done for hard wrapping ("hidden characters").

I've primarily seen it in books and other read-only texts.

Adding a symbol for soft wrapping seems like a separate feature, as you may want it for other kinds of soft wrapping. It might also be a hard problem to solve due to circular stuff, where the existence of the character pseudo itself changes the wrapping.

Yes, I wonder if we could work around that by forcing absolute positioning or something.

[SebastianZ]

It might also be a hard problem to solve due to circular stuff, where the existence of the character pseudo itself changes the wrapping.

That's something that needs to be avoided. It should be defined in a way to not affect the layout.

Sebastian

[Loirooriol]

This can look better when there is enough of available space, but otherwise it can become more problematic to read.

Current:

Proposed:

Should this be left up to the authors to use a media/container query, or maybe the indent should automatically only be preserved up to a certain point?

[frivoal]

I wonder if this could be a variant of the feature requested in #1853.

text-indent: previous-line would give you the results wanted in that issue, where text-indent: previous-line hanging would do what is being discussed here.

Maybe that doesn't work, because while they are both taking the previous line into account, they are doing so in a different way: #1853 feature would track the end of the previous line, while this one would track the end of a line-initial sequence of spaces. So it's different. But then again, this one does fit the hanging keyword in terms of which lines it applies to, and a version without hanging does not make sense if the thing we're tracking is line-initial spaces, and #1853 one does fit the absence of the hanging keyword in terms of which lines it applies to, and a version with hanging does not make sense if the thing we're tracking is the end of the line.

So, possibly, we could add a previous-line value of text-ident which bases the indent on the previous line, using a different measure (end of line or length of leading preserved tabs/spaces) depending on whether handing is specified.

If that sounds plausible, I can try to sketch the details.