5 ms·

Does anyone know of an easy way to improve the readability of raw text files in the browser? I'm writing a novel using github and the raw text file output looks

Does anyone know of an easy way to improve the readability of raw text files in the browser? I'm writing a novel using github and the raw text file output looks very ugly in the browser, even using things like readability [1]. It's easy to convert a static text file into something more readable, but I can't seem to find a solution for a dynamic text file at a static address. [1] http://readability.com/ http://readability.com/

weinzierl 13y ago
Make sure your text files are readable in the first place (line length, paragraph length, etc.). Chose a readable font. Text files are shown with the browser default monospace font, but you change it to whatever you like best. I think there is not much else you can do with raw text files in the browser. The next level would be to write in something like markdown and view the processed text, I think.
- gabemart 13y ago
 I've been trying to avoid adding manual line breaks to the text file because in prose, unlike code or poetry, line breaks are presentation, not content. I suppose I could try to write something that scrapes the text file, adds tags around paragraphs and presents it with some really basic CSS. I don't know how to code, but I might try cobbling something together.
 - pioul 13y ago
 You could alternatively use an online markdown editor (such as http://markdown.pioul.fr/ http://markdown.pioul.fr/). It'll wrap your paragraphs in tags. Additionally, since it uses the Markdown syntax, it might give you more than paragraphs if you use more than line breaks. (Have a look at the quick reference for more about the syntax.) Edit: Didn't see your answer to @kybernetikos. I still think this could help you out. Also note that in HTML (what you'll get by adding tags to your text), whitespace is collapsed (except inside <pre> tags)
 - weinzierl 13y ago
 Good point. Instead of writing a converter yourself you could try to use Markdown on your files without modification and see how well it does. The design goal of Markdown is: Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML). There is also AsciiDoc and some others.
maxerickson 13y ago
Firefox styles plain text as 'pre' elements, so you can apply CSS using javascript, like as a bookmarklet: https://gist.github.com/anonymous/5844581 https://gist.github.com/anonymous/5844581 The styling applied there really clashes with the explicit breaks in the story text. Anyway, that gets you down to one click each time you want to review the text file, which is maybe still more than you want.
- gabemart 13y ago
  Interesting, thanks.
kybernetikos 13y ago
Create a gh-pages branch for your content, and make an _layouts folder. Then put something like this inside it: https://github.com/Shikaga/story/blob/gh-pages/_layouts/main.html https://github.com/Shikaga/story/blob/gh-pages/_layouts/main... Now write your novel in markdown in an index.md file. Every time you check in github will render a nice html file for you that's easy to read, but your source remains easy to write and diff since it's just markdown.
- gabemart 13y ago
  This is an interesting approach, but markdown strips whitespace which could be problematic with some forms of indentation (for dialogue, etc.) Might still be worth it though. Thanks.
  - asdfaoeu 13y ago
    What sort of indentation do you want? Markdown allows pre-formatted text for code and the like. http://daringfireball.net/projects/markdown/syntax#precode http://daringfireball.net/projects/markdown/syntax#precode
  - kybernetikos 13y ago
    I had exactly that problem, although use of text-indent in the css meant that every paragraph starts indented, so you just make each line of dialogue a new paragraph and it works out ok. So yes, it's not ideal, but it's still pretty good.
vanderZwan 13y ago
1: http://readable.tastefulwords.com/ http://readable.tastefulwords.com/ 2: Replace the monospace font with a non-monospace font one 3: Tweak other settings until you have the typesetting you prefer 4: save as bookmarklet specifically for formatting raw text Done!

weinzierl 13y ago

Make sure your text files are readable in the first place (line length, paragraph length, etc.). Chose a readable font. Text files are shown with the browser default monospace font, but you change it to whatever you like best. I think there is not much else you can do with raw text files in the browser. The next level would be to write in something like markdown and view the processed text, I think.

gabemart 13y ago
I've been trying to avoid adding manual line breaks to the text file because in prose, unlike code or poetry, line breaks are presentation, not content. I suppose I could try to write something that scrapes the text file, adds tags around paragraphs and presents it with some really basic CSS. I don't know how to code, but I might try cobbling something together.
- pioul 13y ago
 You could alternatively use an online markdown editor (such as http://markdown.pioul.fr/ http://markdown.pioul.fr/). It'll wrap your paragraphs in tags. Additionally, since it uses the Markdown syntax, it might give you more than paragraphs if you use more than line breaks. (Have a look at the quick reference for more about the syntax.) Edit: Didn't see your answer to @kybernetikos. I still think this could help you out. Also note that in HTML (what you'll get by adding tags to your text), whitespace is collapsed (except inside <pre> tags)
- weinzierl 13y ago
 Good point. Instead of writing a converter yourself you could try to use Markdown on your files without modification and see how well it does. The design goal of Markdown is: Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML). There is also AsciiDoc and some others.

maxerickson 13y ago

Firefox styles plain text as 'pre' elements, so you can apply CSS using javascript, like as a bookmarklet: https://gist.github.com/anonymous/5844581 https://gist.github.com/anonymous/5844581 The styling applied there really clashes with the explicit breaks in the story text. Anyway, that gets you down to one click each time you want to review the text file, which is maybe still more than you want.

gabemart 13y ago
Interesting, thanks.

kybernetikos 13y ago

Create a gh-pages branch for your content, and make an _layouts folder. Then put something like this inside it: https://github.com/Shikaga/story/blob/gh-pages/_layouts/main.html https://github.com/Shikaga/story/blob/gh-pages/_layouts/main... Now write your novel in markdown in an index.md file. Every time you check in github will render a nice html file for you that's easy to read, but your source remains easy to write and diff since it's just markdown.

gabemart 13y ago
This is an interesting approach, but markdown strips whitespace which could be problematic with some forms of indentation (for dialogue, etc.) Might still be worth it though. Thanks.
- asdfaoeu 13y ago
  What sort of indentation do you want? Markdown allows pre-formatted text for code and the like. http://daringfireball.net/projects/markdown/syntax#precode http://daringfireball.net/projects/markdown/syntax#precode
- kybernetikos 13y ago
  I had exactly that problem, although use of text-indent in the css meant that every paragraph starts indented, so you just make each line of dialogue a new paragraph and it works out ok. So yes, it's not ideal, but it's still pretty good.

vanderZwan 13y ago

1: http://readable.tastefulwords.com/ http://readable.tastefulwords.com/ 2: Replace the monospace font with a non-monospace font one 3: Tweak other settings until you have the typesetting you prefer 4: save as bookmarklet specifically for formatting raw text Done!