FountainSharp icon indicating copy to clipboard operation
FountainSharp copied to clipboard

HTML output does not wrap correctly on some browsers including Android

Open BenBtg opened this issue 6 years ago • 3 comments

Transform any Fountain content to HTML using the HTMLFormatter. View the document in Safari and content honours the break-word word wrap style set on all divs so only vertical scrolling is required. View in Firefox or on an Android device and word wrapping is not honoured so horizontal and vertical scrolling is required. I've looked at ways to force word wrap on the parent control or apply some css but it looks like ideally the generated html should be more explicit so it works as expected on all modern browsers.

BenBtg avatar Feb 01 '19 17:02 BenBtg

Looks like the reason wrap is "broken" is due to the white-space: pre styling. As per the link below the solution is to update span style as follows white-space: pre-wrap; word-break: keep-all; https://stackoverflow.com/questions/248011/how-do-i-wrap-text-in-a-pre-tag/248013#248013

BenBtg avatar Feb 01 '19 17:02 BenBtg

I'm working on a PR. Will push it shortly.

BenBtg avatar Feb 01 '19 18:02 BenBtg

@BenBtg Is this still an issue?

CartBlanche avatar Nov 05 '19 18:11 CartBlanche