A novel manuscript CSS?
Dear Brett and friends,
I like Marked very much, and have been looking for ways to incorporate it into my fiction writing workflow. I tend to do a lot of first drafting in minimalistic apps like iA Writer, and often find Scrivener to be a bit much (although indispensable at the editing stage, fiddling with its many niceties can get in the way of getting words out). So being able to turn Markdown text files into the standard novel manuscript format (doublespaced, Courier 12pt, etc., see attached) would be extremely useful for me - at the moment, I do this via MultiMarkdown and LaTeX, but it's a bit of a pain.
Unfortunately, CSS is more of a foreign country for me than writing prose is, so I've been trying to find a suitable stylesheet for Marked that would produce a nice, doublespaced manuscript style output (see attached). To be honest, I was surprised to find that one was not included amongst the CSS defaults, given that Marked claims to be very writer-friendly. :-)
Has anybody here had the same problem? In any case, here's a request for a manuscript format CSS to be included as a default in the next version, I think it would win the app many writerly users.
best,
-- Hannu Rajaniemi
- ms.pdf 29.5 KB
Keyboard shortcuts
Generic
| ? | Show this help |
|---|---|
| ESC | Blurs the current field |
Comment Form
| r | Focus the comment reply box |
|---|---|
| ^ + ↩ | Submit the comment |
You can use Command ⌘ instead of Control ^ on Mac
Support Staff 1 Posted by Brett on 05 Nov, 2012 05:54 PM
I've helped a couple of people work out styles for this, but never anything that was distributable. I'll see what I can do.
2 Posted by Hannu Rajaniemi on 07 Nov, 2012 09:14 AM
Thanks, Brett.
Even a hacky version would be much appreciated and would certainly earn an acknowledgement in the Thanks section of my next book! :-)
best,
-- Hannu
Support Staff 3 Posted by Brett on 07 Nov, 2012 04:15 PM
Try out the attached and let me know how it works. I'm willing to work with you on any changes needed and will include the result in the next release.
Support Staff 4 Posted by Brett on 08 Nov, 2012 05:08 PM
Just realized you probably want the indentation as well. I'll upload a new version with that soon.
5 Posted by Hannu Rajaniemi on 12 Nov, 2012 04:11 PM
Dear Brett,
Many thanks for your efforts - this is an excellent starting point and already very useful.
Something else that would be useful in a novelistic context would be replacing sub-headings below a certain level (###'s, say) with a scene separation marker (usually #).
But this is much appreciated and it has already increased my Marked use.
best,
-- Hannu
Support Staff 6 Posted by Brett on 22 Nov, 2012 03:09 AM
Semantically, would it make more sense to turn horizontal rules into # breaks?
would become a centered #
What do you think? Do you use hr's anywhere else in a manuscript?
7 Posted by Hannu Rajaniemi on 22 Nov, 2012 09:27 AM
Dear Brett,
While that might be aesthetically pleasing, I'm not sure it makes sense from a structural point of view: at least for my purposes (and for ensuring compatibility with Scrivener etc.) it's quite important to keep scenes as structural elements of the document one can then move around and manipulate (e.g. in FoldingText). So I would prefer to have a level below which headings get converted into scene separators (#, or simply a space - # is standard in most manuscript submission formats).
Personally I don't find myself using horizontal lines an awful lot.
Thanks again for your help!
best,
-- Hannu
8 Posted by Stuart Allen on 09 Apr, 2013 02:28 AM
Sorry to revive an old topic, but I have started using this stylesheet too and it is a great start toward something that I would be surprised if many other people didn't want too. For me the only things missing are paragraph indent as you already mentioned, and perhaps bringing the left and right margins in slightly. This Wikipedia page gives a great summary of what is required: http://en.wikipedia.org/wiki/Manuscript_format
Thank you for your efforts so far,
Stuart
Support Staff 9 Posted by Brett on 09 Apr, 2013 03:10 AM
This is where it's at right now. It's being included in the next version of Marked, but I'm happy to share the CSS if you'd like. Feedback is welcome:
10 Posted by Stuart Allen on 09 Apr, 2013 03:56 AM
Thanks Brett, looking forward to your next release. :)
I've been playing around a bit myself with the CSS. I found that the iA Writer team had also produced some CSS specifically designed to be used with Marked (http://support.iawriter.com/help/discussions/mac-suggestions/381-li...)
The only real change that I can see is required now is (somehow!) not indenting the first paragraph of a chapter (possibly quite hard) and (presumably easier) removing the additional space between paragraphs so that all the lines are evenly spaced as you scan down the page -- part of the standard manuscript format ("No extra space between paragraphs").
Thanks for your prompt reply,
Stuart
Support Staff 11 Posted by Brett on 09 Apr, 2013 03:59 AM
Second part is definitely easier. It's possible to target the first paragraph after a header with CSS, so I might be able to make that work. I'd have to assume that a certain header level was always a chapter header, though… if h1 is a title, are h2 chapter headers for you?
-Brett
12 Posted by Stuart Allen on 09 Apr, 2013 04:01 AM
Yes, I always use h2 for chapter headers, so that would be perfect.
13 Posted by Stuart Allen on 09 Apr, 2013 05:03 AM
One other thing I noticed is that a paragraph doesn't appear on a printed page unless the whole paragraph can fit, otherwise it is pushed to the following page. I'm not sure if anything can be done about this. Also, I'm happy to work with you to get this refined for the next release. Feel free to email me directly if you want to bounce a few versions of the CSS back and forth.
Stuart
14 Posted by Stuart Allen on 10 Apr, 2013 01:03 AM
Hi again. Sorry to be a pain, just starting to see how this stylesheet could be a real asset to the novel writing community if we get it right. :) It seems to me that blockquotes probably shouldn't be indented either (like the first paragraph). I guess this could be achieved by using the special "first paragraph" styled
tag instead?
I'm happy to continue to have a play with the CSS and send you some versions to see what you think, but I presume some of this is going to require modifications to the code that produces the HTML. Is this something that is user editable or something you would need to do?
Regards,
Stuart
Support Staff 15 Posted by Brett on 10 Apr, 2013 01:13 AM
My goal is no modifications to the markup that can't be avoided. Pure CSS solutions are preferable, so we'll keep working in that direction. Feel free to send anything you come up with my way.
16 Posted by Stuart Allen on 10 Apr, 2013 01:44 AM
Apologies if this post turns up twice, I think the previous didn't succeed. I can understand not wanting to modify the markup, I'm just not sure how to change the style of the first paragraph using CSS only. Do you have any thoughts on how this could be achieved?
If you do change the markup engine, I was thinking that maybe a single checkbox with "Uniquely style first paragraph" could be added to Behaviour tab in preferences and then use
or something for those paragraphs so custom CSS could be created.
It would be good if blockquotes also used this
style but I can understand how that might clash with coders using Marked. I am of course speaking from my selfish perspective. ;)
I've attached my version of the CSS. It is really just your original with some inclusions from the iA Writer CSS and some minor additional tweaks (margins etc). I use H1 and H3 for Title and Author respectively so I have changed these to be centred.
Other than the page headers, this pretty much now matches the Wikipedia manuscript spec referenced earlier.
Regards,
Stuart
Support Staff 17 Posted by Brett on 10 Apr, 2013 01:53 AM
The thing is, an HTML document isn't structured data. I don't know from a Markdown file where the chapter breaks are or what the first paragraph of a chapter is when looking at a list of elements all in a row. Thus, it really has to be done via CSS, and anyone using it is going to have to know the rules: e.g. ## 2nd level header is a section, ### 3rd is a chapter, etc. CSS3 pseudo selectors allow me to find the first p element following an h3, for example, and apply a style to it. I think we can make that work.
I can also do it in jQuery by scanning the DOM, but that's much less portable when exporting documents.
To do it in CSS, assuming 3rd level headers lead each chapter:
h3+p {}
would target the first paragraph after the headline. This only works if there's nothing between the headline and the paragraph (no rules, lists, images, etc.).
-Brett
18 Posted by Stuart Allen on 10 Apr, 2013 01:56 AM
Hi Brett
That's fabulous, I didn't know about the h3+p syntax. I'll have a play and get a new version of the CSS back to you.
Thanks so much,
Stuart
19 Posted by Stuart on 10 Apr, 2013 02:06 AM
You're a genius Brett, the attached CSS works perfectly for me.
Thanks for bearing with me,
Stuart
20 Posted by Stuart Allen on 10 Apr, 2013 04:22 AM
Sorry, one last tweak. Changed the page-break section so that paragraphs can be split across multiple pages to avoid lots of whitespace and it looking like the reader had got to the end of a chapter when they hadn't.
img, pre, blockquote, table, figure { page-break-inside: avoid; }
p { page-break-inside: auto; }
Stuart
21 Posted by Stuart Allen on 10 Apr, 2013 04:42 AM
Hopefully final version...
This one has the 10px margin on the wrapper element removed that was being added to the 1 inch margins on the body and therefore making them oversized.
22 Posted by Stuart Allen on 10 Apr, 2013 07:15 AM
Okay, so I'll stop promising last change, I hope this isn't starting to seem spammy.
One last thing I noticed is that most novels use a blank line to designate a scene change within a chapter. To achieve this I have used the
tag. This may not be to everyone's taste because it prevents
s from being display, they just appear as three blank lines (due to the rest of the text being double spaced), but given that horizontal rules are mostly used for scene breaks anyway this probably isn't such a problem.
Anyway, code added is below, full stylesheet attached.
Stuart
hr {
margin-top: 3em; border: none; }
Support Staff 23 Posted by Brett on 10 Apr, 2013 02:18 PM
Ok, I think I got all of your changes incorporated into the version of Manuscript I want to include in the next release. Please try out the custom style and let me know if it looks right.
The style includes some embedded web fonts (Courier Prime), so it's a little big for editing. If you do want to make changes, feel free, just note that some editors with syntax highlighting will choke on it.
24 Posted by Stuart Allen on 11 Apr, 2013 01:00 AM
Hi Brett, thanks for that. The embedded fonts are really handy. Do these also get embedded in the PDF? I know that is a requirement for a lot of print on demand services.
I tested the new version and it looks pretty close. There are only two small things I noticed. The are getting the first line indented. I had added:
blockquote p {
text-indent: 0; font-style: italic; }
So that paragraphs inside blockquotes were treated like first paragraphs. I also had the first paragraph after a blockquote not being indented either using
blockquote+p {
margin: 0; text-indent: 0; }
The only other slight thing I noticed is that the test document I am using has grown by three pages, I believe due to oversized margins. I originally experienced this same result when I had a 1 inch margin on the body tag and a 10px margin on the #wrapper. I didn't notice the 10px margin in your version but it looks like some extra margin about the same size has crept in somewhere as it was exactly three pages that I lost when I removed that.
Thanks,
Stuart
Support Staff 25 Posted by Brett on 11 Apr, 2013 01:56 PM
I'm not sure how the Webkit PDF actually handles the fonts, but they do appear to be embedded. I'll do some more checking on that.
Fixed the blockquotes per your notes.
I tested on a document that rendered with 51 pages using the last version of your CSS, and got 51 pages with mine. Can you send me a test document that you're seeing grow 3 pages?
-Brett
26 Posted by Tristan yrof on 11 Apr, 2013 06:23 PM
27 Posted by Stuart Allen on 11 Apr, 2013 08:27 PM
Thanks Brett
It's embarrassing to admit, but I may have just added three more pages to the novel between rounds of testing...
Does that original download link you sent me now point to the updated version?
Regards,
STuar
Support Staff 28 Posted by Brett on 11 Apr, 2013 09:19 PM
Not yet, I'll post it for you tonight.
-Brett
29 Posted by Felix on 08 Jun, 2013 03:33 AM
Hi,
I'm looking too about a novel manuscript CSS; I gave a try to the file you provide...
maybe there is something i'm doing wrong, but the file Manuscript.CSS doesn't seem to work as expected. When choosing this style, its no even in courier, double space, 12px...
Regards
Félix
30 Posted by Ben Craib on 29 Jun, 2013 05:42 AM
Just a quick note- thanks so much for this! Looking for a novel template and learnt a lot from the css file!
Ben