The Markdown Mark by Dustin Curtis | Hacker News Reader

The Markdown Mark by Dustin Curtis

dcurt.is

193 pointsjohns73 comments

Open articleView on HN

Took a crack at making a CSS version:

http://potch.me/markdown-mark.html

Created a SVG version: http://jsfiddle.net/mofle/9am5u/

Works in firefox, but it's broken in Safari and Chrome

missed a negative sign- all better!

Working fine in Chrome.

Interesting that we could see a unified Markdown mark long before we can ever hope to see a unified Markdown specification.

(Most implementors feel Markdown could use some expansion — see MultiMarkDown, PHP Markdown Extra, Python Markdown — but Gruber is having none of it and stopped moderating the group, and no consensus has been reached about how to unify the various flavors, except that it can’t be done without significant time investment and a rough consensus.)

Looks like the TextMate 1 document icon for Markdown! :-) http://www.hcs.harvard.edu/~jrus/site/tm-icon-selection.png

At some point several years ago, I was naming all my markdown files like foo.m↓, but after a while I decided that foo.mdown probably plays nicer w/ typical software. :-)

It's also similar to the solution I went with for the icon of my markdown editor, Macchiato:

http://getmacchiato.com/

I actually much prefer your logo, the arrow being part of the 'M' is (for me) more aseptically pleasing, too bad you didn't put yours forward as universal mark down symbol.

Edit: Having said that, I think Dustin's is probably easier to understand without explanation.

Beautiful app and site!

For anyone else that didn't know what this guy was talking about, its the middle icon on the bottom row.

Awesome idea, but this one is better: http://dribbble.com/shots/424152-Markdown

It just looks like an arrow pointing down. Seems to general to me.

The top of the arrow is an M.

I get that. Doesn't change a thing: It looks just like an arrow if you are not looking for the M. It’s cute, doesn’t help, though.

I disagree. It's looks cool but it's too easy to confuse with a fancy down-pointing arrow. Unless you know you're looking for the 'M', you probably won't notice it.

The problem with this one is that once you make more general by removing embedded effect and make it black and white only, it does not look that good any more.

Personally I like this one the most http://dribbble.com/shots/424394-Markdown - as the dashes are really reminding me Markdown.

improved: more M-ness to balance the arrow-ness and make it more distinctive, and -- more importantly -- made bolder to work at small sizes:

https://plus.google.com/102359018718464872517/posts/LKJA5Uua...

It feels like an action button, like I'm going to download something. Something like http://imgur.com/T2muH seems simpler (forgive the crude 2 minute execution)

For README's :)

      _ _ 
     | V | ||
     |_v_| \/
     MARKDOWN

Or maybe just: M↓

Better: Markdown.

Better: name the file README.md

Nice one. But we're I think we're talking about referring to Markdown from README (e.g. "our comments system supports Markdown"), not that the content of README is written in Markdown.

That's not ASCII.

EDIT: Is it? Text files should be readable by everyone, which rules out special characters like "" (I can't even write it).

That's very nice. I do wonder if the downward pointing arrow might cause some confusion, since it could be misinterpreted as meaning "download".

There's been some talk recently about somewhat ridiculous symbols representing attribution. Sometimes, a good icon or symbol works really well; other times less so. I think this is a nice idea and looks well-executed.

I don't think a concise symbol is needed. A Markdown area, when activated, should have some sort of sidebar hint to give basic examples of the syntax, and that takes enough space that Markdown can be used as a word. Recognition might be speedier for the spelled-out word, too. Before the user decides to input something, advertising Markdown support isn't very important.

He's very particular about how this symbol should and shouldn't be displayed. Don't think that's a bad thing, but it's interesting.

I'd say he's almost too particular for an M with a down arrow in a rounded rectangle.

However, what's the corner radius? What's the width of the stroke on the M? The depth of the point of the arrow or the width of its sweep?

It seems like he's got the spacing and sizing of line-width elements specified to a 'T' (or an 'X' as the case may be), but can we typeset the M in, say, Times? Can the down arrow be a chevron instead?

Particular, but if he's going for particular he's taking it nearly far enough. :P

Thanks, I was confused by the strange mix of very clear specs and no specs while referencing the absent specs, too.

Bullet points 1 and 2, for instance:

    1. Do not change the aspect ratio of the rounded box enclosure. 
    2. Do not change the border radius of the rounded box enclosure.

Neither of these properties were defined as far as I could see. Perhaps it's one of those cases where you're expected to "see" it from the graphics; I typically don't operate well that way. :)

also there's at least two more measurements missing from the spec graphic--the distance between the M and the arrow and the distance between the arrow and the right edge. i assume those are both X, but it doesn't actually say....

Like any good branding, it's particular.

Exactly. Logos, wordmarks, etc. come with strict standards for appropriate and inappropriate use.

If he really wanted to enforce those conditions, all of which have to do with not changing the mark, he could have just used a Creative Commons NoDerivative license (with some exceptions if desired) instead of BSD. Software licenses are better suited to software, whereas this is more like artwork (although the boundary between software and artwork is kinda blurry nowadays).

He's trying to set his fingerprint, and codifying the layout, attempting to formalize it, would be just such a method.

Personally -- and apologies if this sounds brash as I don't think we need empty back patting here -- I think his proposed logo is ugly and amateurish. The M already has an arrow in it if one really needs to make such a literal indicator.

It's hard to get a clearer, simpler symbol than that, and it's the creation of an 'open' symbol like this that I predict will play a big role in driving adoption of the Markdown format on a wider scale than is seen today.

I propose this unicode version:【M↓】(graphics aren't always appropriate)

Those brackets render fine on Mobile Safari, but not on Firefox on my desktop.

It's because your desktop system lacks an appropriate font.

The GNU Unifont, which is GPL licensed, support all the basic unicode characters (that's 65,536 characters!) and can be downloaded from here: http://unifoundry.com/unifont.html

If you use Debian (and possibly in other Linux distros), you can just install the ttf-unifont package.

[pedantic^2]: They do not claim 65536 characters, but 65536 code points. That range contains room for 2K surrogate pairs, 6k or so of private use area, some control characters, and I think there still are some small unassigned regions (http://unicode.org/roadmaps/bmp/).

Another font with (I think) more or less equal character support is http://en.wikipedia.org/wiki/Code2000

While this may be true, people can't be expected to go tracking down and installing a font just to see the characters that don't happen to be rendering in your site / app. Another solution is required, such as normal ascii brackets.

Or you can use webfonts.

In any case, I agree, but the proper solution should be for OSs to come with fonts to cover that Unicode spectrum. It eliminates much of the utility of having Unicode in the first place if you can't safely use them.

This would be really great as an addition to the icons that already ship with Twitter Bootstrap, something like that would really speed up the adoption of this as a standard.

I guess design things happen on dribbble before HN.

http://dribbble.com/shots/423934-This-Means-Markdown

In fact, I only made this a more serious project because of the response I received on Dribbble.

Project looks really exciting, Dcurtis.

My question is on the adoption on text based interfaces, like HN input. Using html entities … ...

Html entities save a better explicit defination in web. Image rendering will get you there, building another context will definitely ease adoption. What do you think?

Perhaps more interesting:

http://dribbble.com/shots/423934-This-Means-Markdown/rebound...

I like many of these much more than the submitted version in the original article.

I wonder though, shouldn't any serious effort to do this try to get Gruber on board? He seems to have some design sense and declaring "this is the markdown logo" without his approval just seems a bit.. disrespectful?

"M" could stand for almost anything, and the bold style reminds me more of a "Metro is that way" than "Markdown below". On the other hand this one http://dribbble.com/shots/424394-Markdown looks much more self-explaining.

I don't understand it as "Markdown bellow", but rather "M(ark) down".

If anybody else had trouble finding the license, it's at https://github.com/dcurtis/markdown-mark/blob/master/LICENSE (as dcurtis has been kind enough to tell me on twitter).

If this is an icon for Markdown, then I suppose this must be an icon for Markup: http://cl.ly/1I0N0s2a0d3x0D1k0523

:-D

I guess all jokes eventually come around.

I saw this on Dribbble a few weeks ago:

http://dribbble.com/shots/423934-This-Means-Markdown

Another nice one:

http://dribbble.com/shots/424152-Markdown

bringing in the meaning literally to the face. I would keep http://dribbble.com/ shots/423934-This-Means- Markdown

Embedding the context doesn't help with the second one.

encoding with the first one solves them. Dustin, how would this keep the context in application and web?

The second one is much nicer than Dustin's

At first glance, the second one might appear to be a better mark. However, if you don't know what it stands for, or that the top part of it is an M, the graphic is just an ordinary arrow. It doesn't accomplish the primary goal of the design.

It definitely looks nice, though.

I didn't even notice that the top formed an M until you mentioned it, so there you go.

Good logos don't beat you over the head with what they mean. The original version is pretty amateur in that respect IMO, it is almost the first thing anybody would come up with.

Having a bit of delight and 'aha!' in a logo is a good thing.

Serious question - do a lot of apps still use markdown? Haven't encountered it in a while.

I've noticed quite a few Mac and iOS apps using Markdown lately. If anything it seems to be gaining adoption. Of course this isn't based on any actual data just my own observations. Perhaps a Windows user can chime in and comment about it's growth from their perspective.

I'd love to see it being used in more blog commenting systems.

Perhaps not a lot, but certainly a few heavily-used apps and sites use something resembling Markdown. Namely, Github, HN, and reddit.

The original Perl script gets very little use, but the formatting conventions established by Markdown have become enormously popular the past few years, displacing older conventions like BBCode.

Some implementations (like the one here on HN) support only a couple of features. It's more of an archetype than a proper standard.

Now imagine a fancy logo for HTM↑

Perfect. What is there more to say, really? You made the world a little better today.

Is the "something using Markdown" Dustin's blogging engine?

Anyways, it's great to see this come from concept (Dribble) to a detailed mark/brand. What other languages have their own mark?

I am having trouble with the specification: it is defined in terms of "the M glyph", but a glyph is not a graphic. Does the specification fix a particular font?

The M icon in the Markdown Mark was created out of a modified version of the M from Gill Sans Bold (you probably should not try to recreate the mark using Gill Sans because of the modifications to the crotch on the M).

Thanks. I'd like to approximate this mark using Metapost.

That would be very cool. If you do, please add it to the repository and submit a pull request.

Interestingly, this resembles the Gmail logo to me.

A slight mod from Nicola Armellini's

http://i.imgur.com/pQzzk.png

Thought it would look better like a button or badge.

Reply on news.ycombinator.com