So I've been tinkering away slowly at a Twine project, and one of the things I've been going back and forth on is text + image formatting. I've been leaning towards CSS to make images and text look good together for a while. Here's an example of what it looks like:
I like the functionality of having stats misc stats tracking on screen when it's needed (right side), and it generally looks better than not having a "UI" when the text is limited in size like here and all fits neatly on screen. However, I find when I have big blocks of text that the readability in a bordered CSS element like that starts to suffer. Not in the sense that you can't read it (it's fine), but that it sort of puts a strain on you. It's a little distracting to read large blocks of text inside a bordered element as opposed to simply on the page.
I guess the easiest solution would be to just always chunk every passage into a small enough block of text it fits into the UI element without scrolling, but that seems needlessly restrictive.
As an example, here's a passage without the UI enabled:
Anyone have any thoughts on this? What have you settled on for your projects? I'm interested in hearing any comments from people who have tinkered with this sort of thing, either with CSS or their own scripting.