Home → Problems →

A professional writer's requirement: How to preserve double line breaks in output html/word as "empty space"

• Edit

priyatam

05 Nov, 2011 02:42 PM

As a professional writer, it's important for me to keep the line breaks AS IS. For prose or poetry this matters. In markdown (or Byword that I use) you enter two lines breaks and it's supposed to represent "empty space" however all the css templates built in Marked doesn't preserve the extra line break and as such, displays the text in the immediate line.

I tried to hack the CSS and noticed that each element is preserved in a

no matter how many line breaks my original content had. What I need is a

inserted for each extra space I create in my markdown file.

Please suggest how I can implement this without having to look at complex processors (I don't think my requirement validates I start looking into Kramdown or Maruku yet, it's an overkill)

Thanks

1. 1 Posted by priyatam on 05 Nov, 2011 02:51 PM

   

   Retyping the missed html syntax:

   I tried to hack the CSS and noticed that each element is preserved in a <p></p>
   no matter how many line breaks my original content had. What I need is <br></br> inserted if I have double line breaks in markdown file.

   This is the spec of markdown so breaking it concerns me.

   • Edit

2. Support Staff 2 Posted by Brett on 05 Nov, 2011 03:57 PM

   

   In plain text mode, Byword has the exact same behavior as Markdown. I see it adding paragraph tags as soon as there's a blank line.

   Adding an extra blank line in Markdown is a challenge. 2 spaces at the end of a line will hard break (one <br>), but spaces on a blank line are just treated as a blank line and compressed. If you read Gruber's spec that you linked to a little more closely, you'll see that this behavior actually is spec.

   The implication of the “one or more consecutive lines of text” rule is that Markdown supports “hard-wrapped” text paragraphs. This differs significantly from most other text-to-HTML formatters (including Movable Type’s “Convert Line Breaks” option) which translate every line break character in a paragraph into a
   tag. --- John Gruber

   The best way to preserve whitespace is to use a <pre> tag, which is easily accomplished by indenting the entire block of text with extra line breaks in by 4 or more spaces. There's an option in Marked Preferences to display these blocks as poetry instead of code, providing different styling. It does not, however, process any Markdown within the block; the content is displayed exactly as it's typed.

   If you're looking for double line breaks after every paragraph, you can adjust the margin-top for p tags in a custom CSS. If you need to only include space at certain points, there's also the option of using a horizontal rule (- - -) and then styling it in the CSS to be invisible but add whatever space you need in the layout.

   Let me know if any of those solutions help. I'm mostly prey to whatever way the MultiMarkdown processor handles markup, I don't develop a separate branch of the processor. This behavior, though, is standard and expected; it has to be worked around in other ways.

   • Edit

3. Support Staff 3 Posted by Brett on 05 Nov, 2011 04:02 PM

   

   I see upon closer inspection that I read the quoted paragraph wrong, sorry about that. That section I quoted is actually irrelevant to the issue, as it pertains to breaks within a paragraph. But that's for wrapping, it doesn't affect blank lines. Blank lines are always compressed, to the best of my knowledge.

   • Edit

4. 4 Posted by priyatam on 05 Nov, 2011 08:35 PM

   

   What's the css element to style "---"

   Currently, a thin stroke brushed as a line (cool, but still, I'd like an empty space).

   Thank you.

   • Edit

5. Support Staff 5 Posted by Brett on 05 Nov, 2011 09:49 PM

   

   hr {
   margin=10px 0;
   border=none;
   }

   Should do it.

   -Brett

   • Edit

6. 6 Posted by priyatam on 05 Nov, 2011 10:24 PM

   

   I use Byword.css, where div#wrapper replaces a <hr> with, I think, whatever's in the css element. removed that and put your style (the css should refresh since i checked the option).

   I still get the --- line.

   Thoughts?

   • Edit

7. Support Staff 7 Posted by Brett on 05 Nov, 2011 10:36 PM

   

   In the Byword.css file, around line 72 I think, replace the "#wrapper hr" rule with the following:

   #wrapper hr {
      width: 100%;
   margin: 3em auto;
   border: 0;
   border: none;
   height: 0;
   }

   Just tested it, should work fine.

   -Brett

   • Edit

8. 8 Posted by priyatam on 05 Nov, 2011 11:53 PM

   

   You are awesome.

   • Edit

9. 9 Posted by priyatam on 05 Nov, 2011 11:57 PM

   

   If anyone wants a hacked CSS that generates a standard short-story format (12 point, double spaced, Times New Roman, Tab indented paragraphs), please mail me, I'll be happy to share.

   This is really good stuff, you guys here are brilliant. I was thinking about a similar app ever since I got hooked to Markdown six months back. I come from the Java/JVM world, sorry, not as sharp as you design folks.

   Again, thanks guys.

   • Edit

10. Support Staff 10 Posted by Brett on 06 Nov, 2011 12:08 AM

    

    I am collecting custom css files for distribution. Right now I only have a couple and they're at <http://markedapp.com/extras>. If you want to share yours, please attach it here and I'll add it (and attribution) to the page. Once I collect enough to make it worthwhile, I'll put together a better way to display them with screenshots and info.

    I'm actually working on a theming system that allows you to just double click a file to install and apply it, with author info embedded so I can display it in the app.

    > Again, thanks guys.

    And--just for the record--it's just "guy." I'm flying solo on this one :).

    • Edit

11. 11 Posted by priyatam on 06 Nov, 2011 12:24 AM

    

    I'm flying solo on this one :). Nice. I admire men who do their own thing.

    Might need some 'cleanup' but works for me since I need to export docs to my thesis advisors.

    The css, 'short-story' is attached. Let me know when you get a chance to make it public.

    • Edit

12. 12 Posted by priyatam on 06 Nov, 2011 12:32 AM

    

    Attached now.

    • ShortStory.css 6.26 KB
    • Edit

13. Support Staff 13 Posted by Brett on 06 Nov, 2011 03:26 PM

    

    Awesome, thanks! I'll keep you posted.

    • Edit

14. 14 Posted by Warner on 26 Jan, 2013 11:10 PM

    

    Yeah. I've got this gripe. I like doing all my writing in markdown, but I'm also one of those poets who really likes to work with spacing a lot. There's another solution to getting markdown to respect spacing, and that's utilizing the <pre> tag. You just need to add a block to your CSS for <pre> that changes the default font to a non-mono-spaced font like Times.

    pre { font: 12pt "Times New Roman", serif" }

    That's it. I've tested it in the Marked app and it works as long as you surround your poetry with <pre></pre> (Alternatively, you can use the <code> tag.) Oddly though, Marked appears to ignore the typical back-tick substitution. I suppose that's really for inline code (like I've used hear in this message. But at any rate, I'm not bothered much by putting a simple tag like <pre> into my markdown.

    • Edit

15. 15 Posted by Michael Morriso... on 19 May, 2013 04:27 PM

    

    Hello,

    For times when one wants a double, or triple, line break in a particular location, but a change to the CSS is not called for, simply adding a
    <br></br>
    at the desired location will add another line break. For two line breaks, use
    <br></br>
    <br></br>
    etc.

    Best,

    Michael

    • Edit

16. Brett closed this discussion on 31 May, 2013 12:29 PM.