CSS Styles for cooler looking ascii-art | Hacker News Reader

CSS Styles for cooler looking ascii-art

briankhuu.com

32 pointsmofosyne12 comments

I don't have perfect vision, so these sort of glows kick in automatically, especially when I'm tired. I't problematic enough to make me switch to a lower contrast theme when I work at night. It would make sense to apply an effect like that only if it were _increasing_ legibility.

Take a look at this a demo pic: http://cl.ly/image/1i0x2X3W3G0x

Notice the rare case where the drop-shadow helps increase the contrast between foreground and background. You'll get props for doing that any time you pull it off.

Good point. But I may make the case, that ascii art is more about pictures, and less about text. So the reduced readability of text might not matter as much. I tried shadowless, and its less visually appealing.

             /\_/\
        ____/ o o \
      /~____  =-= /
     (______)__m_m)

But in the context of ascii-diagrams, then I can see you point of not including stylised drop shadows.

---

Btw, no shadow example is added now.

I suppose what you like about the effect most, is that it fills the gaps that are intrinsic to ASCII art. But our brains are already wired to do that: http://bit.ly/1xeEci5. The shadow blur eats away at the details that are in fact a quality of ASCII art (like which characters were chosen to emulate a shape). The demonstrated CSS drop-shadow effect is really easily toggled by squinting your eyes instead: http://bit.ly/1DNrkXK.

Guess you're right in stating that it looks "cooler" though. Try making the shadows dark grey instead of black: http://cl.ly/image/073a412z0f34.

I agree. Lighter black seems to do the trick. Page corrected.

text-shadow: 0 0 5px rgba(100,100,100,0.5);

Nice! The banner generator uses figlet fonts and there is a javascript parser out there, check out http://github.com/scottgonzalez/figlet-js

Also speaking of which I created a canvas breakout game that uses a modified version of that lib a month ago - https://github.com/jarv/ascii-breakout (http://ascii-breakout.com if you want to see it in action)

very cool! Impressed that you could get that working like that. Quite fun too.

On a side note. I wonder if you would like to somehow port http://ditaa.sourceforge.net/ to javascript.

Since many technical diagrams are done in ascii. It might actually be handy to auto convert to a Canvas image.

Not sure how one would deal with ascii-art to canvas however. But technical drawings is important.

It would be relatively simple to do, I'm surprised that http://asciiflow.com/ doesn't have an option for it, but now that I think about it a little more I think most people create these ascii diagrams because they just want ascii for embedding in a text doc and probably? don't need to convert them.

I'd prefer plain style without shadows.

That should work with just a removal of the "text-shadow" line.

    /*
    Diagram and ASCII ART styling for Jekyll 
    (and other markdown parser that appends a .language- prefix)
    */
    .language-ascii-art {
     display: inline-block; 
     font-family: "Lucida Console", Monaco, monospace;
     letter-spacing: -0.2em;
     line-height: 0.8em;
    }

Wouldn't it also work by just not having CSS on it at all? Except for maybe the font.

Well the point of this, is to ensure that stuff like dashed lines, appears as a solid line. So in the context of ascii-art, this reduces the screen door effect (At the cost of visibility of alphanumeric texts).

If you look at the style, it's essentially just moving text characters closer to each other.

---

Btw, no shadow example is added now.

Although, I like the Mona Lisa example, I have to think that the point of ASCII art is to look like ASCII art because if it doesn't, then it's just a shitty picture. Cool POC tho.

Reply on news.ycombinator.com