P.S. This isn't meant to be a how-to post but in case anyone is interested I'll talk a bit about how we did it.
We use OBS but I think there are equivalent ways to do it in other software. The chat is displayed with the CLR Browser Source plug-in and uses NightDev's OBS Chat as a base, with custom CSS on top.
The OBS chat has a 'clear' theme that you're supposed to use this purpose but the project required about eight times more CSS than I'd ever done in my life up to that point I started with the 'light' theme and tweaked that with the browser source plug-in. For brevity I'll only list the code I changed.
After a little fiddling to determine the line width I'd need I made a paper image and set it as the background.
body { background-image: url("http://i.imgur.com/ML1pIeJ.png"); background-repeat: no-repeat; }
Then tweak the chat box position and size so it's sitting over the lines. Change the font size to fit said lines.
font-size: 12px; /* border-radius: 4px; */ width: 296px; height: 355px; margin-left: 18px; margin-top: 39px; }
Set the chat line height wide enough to fit lines with tags, emotes, etc (more on that later). Chat_lines encompass a message and one div can wind up occupying multiple lines if the message is long. The padding properties here puts and extra space between each new message. Setting them to zero makes sure all visual lines are of uniform width whether it's a new message or a continuation of the previous one.
.chat_line { padding-top: 0px; padding-bottom: 0px; line-height: 17px; }
Make a small change to the message class so words don't get split in awkward places if the message has to be broken into multiple lines.
.chat_line .message { word-break: normal; }
This last part was the most frustrating. Emotes and tags (mod, broadcaster, etc) can make lines wider than the specified width. To make lines with these elements the same width I had to open up the chat page in Chrome and tweak the CSS until they were small enough. I also messed with the positions to they rendered in the middle of the lines on the paper
.emoticon { margin-bottom: -1px; height: 12px; }
.tag { vertical-align: text-top; height: 11px; min-width: 11px; /* padding: 0; */ padding-top: 1px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; }
There are probably better ways to do some of these tweaks but I don't really know CSS. Check out the website for OBS Chat for more details on how to setup and modify the chat page. I hope to see some other streams try this out.
