5 ms·

Markdown.css: let's make the Web prettier

88 points by kevinburke 15y ago

jrnkntl 15y ago
"For the markdown to parse correctly, you need to add the closing <link> tag. This is not technically correct HTML, but it will parse in any browser." Why would that be?
- deleted 15y ago
  [deleted]
- kevinburke 15y ago
  From the W3Schools reference (http://www.w3schools.com/tags/tag_link.asp http://www.w3schools.com/tags/tag_link.asp): In HTML the <link> tag has no end tag. However, if you try to add just <link href="#" rel="stylesheet" /> to the .markdown file, the Markdown preprocessor (at least the one I am using) would not process the rest of the file. I think it only recognizes a subset of HTML tags. You can try it for yourself.
Martijn 15y ago
Is it just me or should the bullets and numbers of the lists be indented?
- jacobolus 15y ago
  Many typographers prefer to set lists with the text aligned on the left, and the bullets and numerals pushing into the margin, because it integrates the list better with the text and is less visually distracting. See e.g. http://www.iamdavedawson.com/articles/hanging-discussing/ http://www.iamdavedawson.com/articles/hanging-discussing/
  - cabalamat 15y ago
    > Many typographers prefer to set lists with the text aligned on the left, and the bullets and numerals pushing into the margin. I don't think this would work very well if you have multiple levels of bullets.
    - jacobolus 15y ago
      If you have multiple levels of bullets, there’s usually something going wrong. Hierarchical bullet lists which use nested indents are in my experience an absolutely terrible device for conveying complicated ideas.
      - ojilles 15y ago
        To each his own opinion. For me mutliple levels of bullets approach a mind map [1], rather than a list of things. And those can be really handy. [1] http://en.wikipedia.org/wiki/Mind_map http://en.wikipedia.org/wiki/Mind_map
      - moe 15y ago
        If you have multiple levels of bullets, there’s usually something going wrong. Nonsense. There are many situations where 2 or even more levels of hierarchy are exactly what you want. Screwing up such a common need in favor to a questionable typographic preference is not a good idea. And yes, in theory you can "fake" the hierarchy with headlines. In practice that tends to look rather odd and make it hard to actually recognize the hierarchy. Especially in a whitespace-heavy stylesheet like this one.
      - yoklov 15y ago
        You're often right, however, the markdown spec supports nested lists, so just throwing them out (or making them far, far more difficult to understand) under the pretense that you're organizing your data poorly and should do it differently is somewhat unreasonable in this case.
  - peng 15y ago
    It just looks messy here, since there's not enough padding on the left side of the page to account for the hanging bullets.
- russross 15y ago
  I agree. Nested lists seem to be completely flattened, making them almost unusable.
saibotd 15y ago
Am I missing something, or is this really just a simple css file that's not really got anything to do with markdown itself? Because the title makes it sound like it is a CSS file that is somehow able to render markdown directly.
- deleted 15y ago
  [deleted]
- Rauchg 15y ago
  This is meant to make the output of the Markdown > HTML conversion look good. Even though there are other CSS projects that try to make default browser stylesheets look nice (many of which have been featured on HN), I particularly like this one since there are certain Markdown elements that the aforementeioned projects might not tackle (for example, indented code, `inline code`, etc).
telemachos 15y ago
The look is clean and very readable, but I'm trying to figure out the use-cases. Why use Markdown + this idiosyncratic CSS link to produce a partial page, rather than render the Markdown into a full (valid) HTML page and then style it normally with CSS (this or some other CSS)? As far as I can tell, that page (1) doesn't validate at all and (2) throws your browser into quirks mode. Why is that a good outcome? (Edited for clarity after StavrosK's question.)
- StavrosK 15y ago
  Check the actual source of the page you're viewing. It's HTML, generated from the markdown file.
  - telemachos 15y ago
    I did look at the source, and I see that's it's HTML. (I hate trying to enter code on HN, so here's a gist with the full source of that page: https://gist.github.com/1116746 https://gist.github.com/1116746) But it's only a partial page. There's no doctype, no head, no formal declaration of body. There's HTML and CSS for the browser to render, but it's guaranteed to be in quirks mode (unless I'm confused). That's why I said "full HTML page" above. (Edit: I see now where my first post was unclear. I edited it to make my complaint clearer. Thanks.) I'm not quite sure where this is useful - I may not be understanding what it's for. I would hate the idea of lots and lots of sites serving this kind of partial page.
    - StavrosK 15y ago
      It looks to be just a css file to make Markdown files pretty when straight-compiling to HTML. It's better than keeping them with the browser's default stylesheet, but I don't know anyone who serves Markdown files straight up after a conversion...
      - telemachos 15y ago
        > but I don't know anyone who serves Markdown files straight up after a conversion... Exactly. This is why I don't see the use-case for this.
podperson 15y ago
Let’s stop using “'” when we mean “’” and we're trying to pose as designers.
scrrr 15y ago
I like that layout, its readable. But why not make the default text-color #000 instead of #444 for maximum contrast and readability?
- fredoliveira 15y ago
  You're actually right about maximum contrast, but wrong about that meaning maximum readability (the two things don't go hand in hand even though one might think they do). Solid black versus solid white reads well, but is more tiring on the eyes than something lighter on solid white (which is what the author is doing by using dark grey), particularly for long passages of text.

88 points by kevinburke 15y ago

"For the markdown to parse correctly, you need to add the closing <link> tag. This is not technically correct HTML, but it will parse in any browser." Why would that be?

deleted 15y ago
[deleted]
kevinburke 15y ago
From the W3Schools reference (http://www.w3schools.com/tags/tag_link.asp http://www.w3schools.com/tags/tag_link.asp): In HTML the <link> tag has no end tag. However, if you try to add just <link href="#" rel="stylesheet" /> to the .markdown file, the Markdown preprocessor (at least the one I am using) would not process the rest of the file. I think it only recognizes a subset of HTML tags. You can try it for yourself.

Martijn 15y ago

Is it just me or should the bullets and numbers of the lists be indented?

jacobolus 15y ago
Many typographers prefer to set lists with the text aligned on the left, and the bullets and numerals pushing into the margin, because it integrates the list better with the text and is less visually distracting. See e.g. http://www.iamdavedawson.com/articles/hanging-discussing/ http://www.iamdavedawson.com/articles/hanging-discussing/
- cabalamat 15y ago
  > Many typographers prefer to set lists with the text aligned on the left, and the bullets and numerals pushing into the margin. I don't think this would work very well if you have multiple levels of bullets.
  - jacobolus 15y ago
    If you have multiple levels of bullets, there’s usually something going wrong. Hierarchical bullet lists which use nested indents are in my experience an absolutely terrible device for conveying complicated ideas.
    - ojilles 15y ago
      To each his own opinion. For me mutliple levels of bullets approach a mind map [1], rather than a list of things. And those can be really handy. [1] http://en.wikipedia.org/wiki/Mind_map http://en.wikipedia.org/wiki/Mind_map
    - moe 15y ago
      If you have multiple levels of bullets, there’s usually something going wrong. Nonsense. There are many situations where 2 or even more levels of hierarchy are exactly what you want. Screwing up such a common need in favor to a questionable typographic preference is not a good idea. And yes, in theory you can "fake" the hierarchy with headlines. In practice that tends to look rather odd and make it hard to actually recognize the hierarchy. Especially in a whitespace-heavy stylesheet like this one.
    - yoklov 15y ago
      You're often right, however, the markdown spec supports nested lists, so just throwing them out (or making them far, far more difficult to understand) under the pretense that you're organizing your data poorly and should do it differently is somewhat unreasonable in this case.
- peng 15y ago
  It just looks messy here, since there's not enough padding on the left side of the page to account for the hanging bullets.
russross 15y ago
I agree. Nested lists seem to be completely flattened, making them almost unusable.

saibotd 15y ago

Am I missing something, or is this really just a simple css file that's not really got anything to do with markdown itself? Because the title makes it sound like it is a CSS file that is somehow able to render markdown directly.

deleted 15y ago
[deleted]
Rauchg 15y ago
This is meant to make the output of the Markdown > HTML conversion look good. Even though there are other CSS projects that try to make default browser stylesheets look nice (many of which have been featured on HN), I particularly like this one since there are certain Markdown elements that the aforementeioned projects might not tackle (for example, indented code, `inline code`, etc).

telemachos 15y ago

The look is clean and very readable, but I'm trying to figure out the use-cases. Why use Markdown + this idiosyncratic CSS link to produce a partial page, rather than render the Markdown into a full (valid) HTML page and then style it normally with CSS (this or some other CSS)? As far as I can tell, that page (1) doesn't validate at all and (2) throws your browser into quirks mode. Why is that a good outcome? (Edited for clarity after StavrosK's question.)

StavrosK 15y ago
Check the actual source of the page you're viewing. It's HTML, generated from the markdown file.
- telemachos 15y ago
  I did look at the source, and I see that's it's HTML. (I hate trying to enter code on HN, so here's a gist with the full source of that page: https://gist.github.com/1116746 https://gist.github.com/1116746) But it's only a partial page. There's no doctype, no head, no formal declaration of body. There's HTML and CSS for the browser to render, but it's guaranteed to be in quirks mode (unless I'm confused). That's why I said "full HTML page" above. (Edit: I see now where my first post was unclear. I edited it to make my complaint clearer. Thanks.) I'm not quite sure where this is useful - I may not be understanding what it's for. I would hate the idea of lots and lots of sites serving this kind of partial page.
  - StavrosK 15y ago
    It looks to be just a css file to make Markdown files pretty when straight-compiling to HTML. It's better than keeping them with the browser's default stylesheet, but I don't know anyone who serves Markdown files straight up after a conversion...
    - telemachos 15y ago
      > but I don't know anyone who serves Markdown files straight up after a conversion... Exactly. This is why I don't see the use-case for this.

podperson 15y ago

Let’s stop using “'” when we mean “’” and we're trying to pose as designers.

scrrr 15y ago

I like that layout, its readable. But why not make the default text-color #000 instead of #444 for maximum contrast and readability?

fredoliveira 15y ago
You're actually right about maximum contrast, but wrong about that meaning maximum readability (the two things don't go hand in hand even though one might think they do). Solid black versus solid white reads well, but is more tiring on the eyes than something lighter on solid white (which is what the author is doing by using dark grey), particularly for long passages of text.