Use flexbox for input element instead of calculating width manually

[juhana]

The same as erkyrath/quixe#40, now in the right place hopefully

[erkyrath]

The report from IFComp is that this fix caused problems in some games. (Change iftechfoundation/ifcomp#181 was reverted at iftechfoundation/ifcomp@c3eb8b8 .)

Comment from chat:

The problem is visible when applied to Steph Cherrywell’s game

[erkyrath]

Screenshot of problem with long paragraphs.

[juhana]

Oops, if flexbox is applied to every line then all spans inside the paragraph (whenever the style changes) act as a flexbox. I've amended the commit so that only the line with the input field is a flexbox.

In theory this would still break if there's a long prompt that doesn't fit on one line and it has different styles inside it, but I don't think that would happen in real life.

[erkyrath]

thanks, I will take another look.

[curiousdannii]

Okay, this fix looks like it works. Good work Juhana! I'll send this for the IFComp site.

But... I'm not sure I'm happy with the limitation that the line with input can't have multiple styles. That's sure to happen eventually.

I think I've found one solution which should handle that. With flex-wrap we can handle multi-line multi-span input paragraphs, with the input taking up the rest of the line. The complication is that we'd have to split up the existing spans by words into their own separate spans in order for flex-wrap to work. What do you think of that for a more reliable solution?

[juhana]

I'm personally not very enthusiastic about anything that requires a lot of JavaScript setup – might just as well use the old width calculation then. But it can't think of a much better option here. It might be possible to use a contenteditable span instead of an input element, which would also allow the input to wrap to a new line, but that would also need quite a bit of JS to get it right.

[erkyrath]

Filling in history: this is the cursor positioning bug discussed at https://intfiction.org/t/quixe-chrome-cursor-position/42413 , which derives from this chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1001438

[curiousdannii]

They say they've fixed the bug, so it would be worth checking if this patch is still needed.

[erkyrath]

I've just been checking, and I don't think it's needed. (Chrome 80.0.3987.149 on Mac.)

Also, the flexbox solution has problems when the prompt is very long, even if it's a single style span. I added a quick test case to sample-demo-full.html in the glkote repository -- enter "longprompt". The current code puts the input line in the right place, but the flexbox code doesn't.

I'm still interested in a pure-CSS solution to this, but I don't think it exists at present.

So, with all of that, I think this patch adds up to a "not needed". I apologize for the long delay in looking at it.

[erkyrath]

Closing (see comment above).