Home → Questions →

Indentation and Line Spacing in Marked

• Edit

Dan Paradise

04 Sep, 2012 06:01 PM

Hello, I am an absolute layman in CSS and coding in general so I apologize in advance if this question is overly simplistic. What I am looking to do is have Marked apply automatic indentation and line spacing to my MultiMarkDown document (which as far as I know, has no syntax for indentation). For instance, I write long form notes and letters, and having the first word indented properly, and the line spacing set to a more comfortable level for my finished product would be nice. Currently, I write my notes in Byword, then open the final draft in Marked, then copy the text as RTF into Scrivener, then use Scrivener's ruler and line spacing formatting tools to rearrange the text to my standards. If I am not mistaken, could Marked do the last step (those things which I do in Scrivener) automatically with custome CSS? Thank you for reading and I hope to hear back from you soon.

1. Support Staff 1 Posted by Brett on 04 Sep, 2012 06:15 PM

   

   Hi Dan,

   You'll want to take one of the original CSS files and add rules for text-indent and line-height, probably just on p elements. If you tell me which style you want to base this on, I can help you out.

   • Edit

2. 2 Posted by Dan Paradise on 04 Sep, 2012 06:57 PM

   

   Thanks, Brett, that was really fast!

   So, I will apologize again if my repsonse is utter gibberish. I do not know CSS and feel like an aged grandfather trying to keep up with his grandson about computers these days. Anyway, all I can say about what I am looking for is what I do to modify the text in Scrivener. I have attached a screenshot of the basic editing that I do but I will summarize it below:

   • First word of paragraph is indented 0.25 inches
   • Line height is set to 1.2 times
   • Paragraph spacing is 0.00 points before and 10.0 points after

   Once this is done I have a nice looking piece of text that I can send out.

   So now to the part where I might cease making sense. I downloaded TextWrangler and took a look at Marked’s Custom CSS Example. Now, if I am not totally mistaken, in order to do what I am looking to accomplish, I need to edit the section that goes:

       body,p,td,div
       {
           color:#111;
           font-family:"Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
           word-wrap:break-word
       }
   

   So, I tried adding the parameter:

       text-indent:50px;
   

   Then saved as a seperate CSS sheet, then added it to Marked, then loaded the style and... the text shifted around a bit, but there were no indents. Any help in this matter is of course greatly appreciated!

   • Screen_Shot_2012-09-04_at_2.33.51_PM.png 81.9 KB
   • Edit

3. Support Staff 3 Posted by Brett on 04 Sep, 2012 07:05 PM

   

   You'll want to create a new rule at the end of the stylesheet with something like this:

   p {
   text-indent: 50px;
   line-height: 1.2;
   margin: 0 0 15px
   }

   • Edit

4. 4 Posted by Dan Paradise on 04 Sep, 2012 09:10 PM

   

   Boy Howdy, Brett, you done did good.

   Thank you very much, not only do I now have properly formatted text, I have dipped a toe into the world of CSS and found it enjoyable. I have signed up for some lynda.com courses, so hopefully I will not be asking basic level questions from here out. Here’s what my end product ended up being:

       H1 {
          font-size:36px;
          margin-top:-10px;
          margin-bottom:15px;
          text-decoration: underline
           }
   
       p {
         text-indent: 1.5em;
         line-height: 150%;
         margin:12.5px 0px 12.5px 0px;
          }
   

   I tacked this on to a copy of the upstanding citizen style that I made in the custom CSS folder (hope that is OK). It makes for a great final layout when going to Scrivener or for emailing out directly.

   I took a lot of time fiddling with each value to see what it does, as this is the best way for me to learn, so that is why I am a bit late in responding. My heartfelt thanks go out to you sir, you went above and beyond.

   With my Sincere Thanks,

   Dan Paradise

   • Edit

5. Support Staff 5 Posted by Brett on 05 Sep, 2012 06:12 PM

   

   Now that this has come up, I think I should add a box where you can just put universal CSS additions in and have it apply them to whatever theme is loaded. That would be handy, I'll look into it.

   • Edit

6. 6 Posted by Michael on 06 Sep, 2012 04:39 PM

   

   Brett,

   That would really be helpful. I've been looking for a simpler way of converting text from html/markdown to a format more closely resembling text in a novel, with first line indents and no blank lines between paragraphs. In fact, I was going to fiddle around with a style sheet that might output something in alignment with the standard fiction manuscript format (first line indentation, Courier 12 pt, double spacing, etc.) that most publishers (especially print publishers) request.

   Thanks for the nice piece of software,
   Michael

   • Edit

7. Brett closed this discussion on 24 Sep, 2012 11:53 PM.