In order to make ascii art nicer to look at, I was experimenting with some CSS. While I thought to make a dedicated generator in javascript, I luckly found that there is an easier way to do so in CSS. Originally I did the css styling for reddit as can be seen in this post. Since it works well there, I decided to try it out for my site.

__ __ _____ ____ _____ ___ _ _ _ _ ____ ( \/ )( _ )( ___)( _ )/ __)( \/ )( \( )( ___) ) ( )(_)( )__) )(_)( \__ \ \ / ) ( )__) (_/\/\_)(_____)(__) (_____)(___/ (__) (_)\_)(____)

Above banner ascii text “mofosyne” was generated from this banner generator

To get this style, just read on.

While it looks very nice for many ascii-arts, it really does mess up any textual data within the art, and make it much harder to read. So best practice is to just restrict this style to ascii-arts only, and to exclude any “ascii-diagrams”.

Here is an example of an ascii-diagrams that is messed up when this style is applied.

_________________________________________________________________ | __________ | | | | | | | | EEPROM | (RX) (VCC) | | |___ |________| | | ____| | _________________ (GPIO0) (RESET) | | |___ | | | | | ____| | | ESP8266 | (GPIO2) (CH_PD) | | |___ | | Wifi+ARM_MCU | | | ____| | |_______________| (GND) (TX) | | |_______|__ | |_______________________________________________________________| RX : UART Receive Pin (Connects to TX of other device) VCC : 3.3V Upper Power rail (Input power) GPIO0 : General Purpose Input Output (0) RESET : Reset Device CH_P2 : General Purpose Input Output (2) CH_PD : Chip Enable Pin (pull high) GND : 0V Power Ground TX : UART Transmit Pin (Connects to RX of other device)

Installing in Jekyll

Here is the CSS style to place in your css file.

/* 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; text-shadow: 0 0 5px rgba(100,100,100,0.5); } .language-ascii-noshadows { display: inline-block; font-family: "Lucida Console", Monaco, monospace; letter-spacing: -0.2em; line-height: 0.8em; }

So now when you type in a fenced block that specifies “ascii-art” as the syntax highlighting option, it will be styled. This code will have “.language-ascii-art” as it’s class name. And thus will be styled as an ascii-art.

```ascii-art /\_/\ ____/ o o \ /~____ =-= / (______)__m_m) ``` ```ascii-art-noshadows /\_/\ ____/ o o \ /~____ =-= / (______)__m_m) ```

Will turn into

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

and if you don’t like drop shadows (as requested by tom4000 from hackernews ):

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

This ascii-art CSS styling snippet is public domain. Just use it how you wish.

Reddit Style

Need to use one for subreddit? Use this style:

/* CSS for nicer looking ascii art in reddit Demo: http://www.reddit.com/r/textfiles/comments/2s9ybk/random_ascii_art/ */ code { display:inline-block; font-family:"Lucida Console", Monaco, monospace ; letter-spacing: -0.2em; line-height: 0.8em; text-shadow: 0 0 5px rgba(100,100,100,0.5); }

Demo

This ascii-art CSS styling snippet is public domain. Just use it how you wish.

Bit of experiment (blurred, no text)

.language-ascii-art-blur { color: transparent; /*hide the text this time*/ display: inline-block; font-family: "Lucida Console", Monaco, monospace; letter-spacing: -0.3em; line-height: 0.6em; text-shadow: 0 0 4px #000000; }

Thus:

i`it)v|[[[[(//s+)`(-\\/JJgbdd@@@@@@@dmKK(c!(/-[2=/cct/!-v\!_L\)| ]-!/(!-)\L\)v|c5(!,!Ldd@@@@@@@@@@@@@@@@@@@dK/]!c\\\v|i\/cT\v((c- ]!`/v\//(-|t\VvcL!m@@@@@M@@@@@@@@@@@@@@@@@@@@bLt\\|)c/2-vv)/it\. --/-,\,\v\,|)/v/m@@@@@@K@@@@@@@@@@@@@@@@@@@@@@@bK!v!-( )-!.[/cT //.\--'--|-/c(e@@@@@@@DD@@@@@@@@@@@@@@@@@@@@@@@@@@s\\\\-||/v!c\. -,-|\`||\-\/id@@@@@@@@N@@@@@@@@@@@@@@@@@@@@@@@@@@@@b.),`-,-/c-`i !,\!-!-!'!-!d@@@@@@@P[+~**AAA@@@@@@@@@@@@@@@@@@@@@@@b/./`c-/.\7- --'.-- -/,id@@@*P!` \'Z8@@@@@@@@@@@@@@@@@@@@@i.\\'.\.c ',`,`\'-,-J@@5`- -- `-iYA@@@@@@@@@@b@@@@@@@@@_\-|-\c- '. -.,`/.G@@K- ` - )7KM@@@@@@@@@@@@@@@@@@@c-----/ - `- --i@@Ai -!ZZ@@@@@@@@@@@@@@@@@@@b! \`|-` `-,'- G@@@[, '.D8K@@@@@@@@@@@@@@@@@@@[/-,-/. -` .-/v@@@A) -)ZdMd@@@@@@@@@@@@@@@@@@\' _\ - ` ,iVJ@@@! '-!(K5K@@@@@@@@@@@@@@@@@@[(/s[. - i\G@@@Z- ' ! -i55ZZ@@@@@@@@@@@@@@@@@)(4)` , -|b@@@@!\ ' ` |-tYG@@@@@@@@@@@@@@@@XNYZ- tt@@@@A-, ' `)(d@@@@@@@@@@@@@@@@D)8A[ )8@@@@@\ ,-'-/Kd@@@@@@@@@@@@@@@@@KD@[ ]]Z@@@@d|- ,ii.c,, -.icLZKK@@@@@@8@K@@@@@@@@@(@8[ KN8@@@@@( .i!vGG_ J4Kb8ZKb@bbK@d@88@@@@@@@b@@@@@@@@@@dK@- )/8K@@@K@b@dP~~~T4( Jd@@7`___s@M@@@@MM8d@@@d@@@@@@@@@@@@LM8[ \!48@K@@@@8@@d*@@@bVi bAKLY~~@@@@@@*ff/\NM8@@@@@@@@@@@@@@@db@[ ,\\Kb@@@d@.~t` !*~!`. -MA) '~'.).` `,'K@@@@@@@@@@@@@@@@@AKb[ ,`8M@@@@@@ -`,,gvZ`` A//- ..c\+\` i]d@@@@@@M@@@@@@@@@@@8[ i\@8@K@@@D \!' !iZ8@@@8A@@@@@8d@b@@@8M[ e8d5@@@@@@ '!- '-)8@@@@@@@@@@@@@@@@@@M8i 8dZ8@M@@@@- v , ,\tK@@@@@@@@@@@@A@@@@@@Z2| @b@AK@@@b@[ // cctbA@@@AK@@d@@d@@@K@@@bmi @@8@M@8@@@P- -=/. /iD8d@@@@@@@@@@@@@@A@@@d@@[ @8@@@MA@@@@\- . _)g2i -((dKK@@@@@d@@@@d@@K@@@@@@K[ @@@bAK@@K@@)i 'c,,Kb@@bK )X)Kb@M@@d@@@Mb@@A@d@@@@@@8@[ @K@b@@@@A@AA/i- ~M@@@@Mc .,\c=)D8d@@b@@@d@@@@@@@@@@8d@@A[ @@@@Mb@@@@@@('c\` PPK((,i]v|-\-v)8XNAdMK@@@@@@@b@@MK@A@@@@@[ @@8@@MK@d@A@L!--c)s_, ,(ZsbLb@\`- .-N]/KM@@@@@@@d@@@A@@@@@@@@d@[ @@Kb@@@K@b@@@/- !''~~Vff*N5f -` -,\))KK@@@@@@@MK@@d@@@M8d@b@@@[ @b@@@KAK@@@@@@2-- ,,_JJ/i)/- |/v)NK@8d@@@@@@@@@@8@@@@@@@@M@K[ @@8d@K@@@b@@@@@d!, 'VV\)\\)\7(-)4Jb@8@A@@@K@d@@@@@@@8@@@@@@@@[ M@@@@8@@K@Kb@@@d@v. `-\\/v)88b@M@A@K@@M@@@A@@M@8@@A@d@8@M[ Zb@d@M@K@@@@@@@@@@m -)!/stbb@b@@A@b@@@@@Kb@@@@@@@b@@@K@@@[ K@@d@@@@@d@M@8@@@@@Ks ,-/vJD@@8d@K@@@@@@8@@@@@@@@@@MK@@@b@@M@[ tN@b@@d@d@M@@@@@@@@@@LL4JKd@A@@d@@K@@@@MK@@@@8@@@@@@@@@@@b@@@@@[ )NM@8b@@A@@@A@@@@@@@@@@@@@@A@@A@@8@@K@d@@@@M@@K@@K@A@@@8@@M@@@@[ (tMM@@@d@@M8@@@@A@@@@A@@@A@@@@@@@@@A@@@@8b@@8d@@@@@@@@@@@@@@@@M[ tNZ@@K@@@d@@@@A@@@@@8@@@/4N@@8@b@@d@@M@8@MK@M8@K@@@@@@d@@@@@@@@[ M/KA8@@@MA@@@M@@@@@@@@@@[|t*Z@N@@@@8@@M8ZAZZ@M@@@A@d@@@@@K@@@d@[ bYJ4M@@@@@@A@@@@@@@@@@@@D.\'(YKKZD@8dK@5A84YZ@dM@@@@@@@@@@@@d@@[ K5dM8@8d@d@@@@@@@@8@@@@@@..-!/))ZK5AK4)AY(/XY/Z@@@A@@@d@@@M@@@@[ Y8dNA@@AK@@d@@@b@@@@@@@@@L,-,\!]]\X(5)Z/7c\\t5/K@@@@@@@@b@@@@@@[ 8M8@@@A@@@A@@8@@@@@@@@@KDLt! !,-|t'(-\\!,\/,\!ZJG@@@d@Md@@@G@@@[

source: http://www.chris.com/ascii/index.php?art=art%20and%20design/mona%20lisa

Another experiment ( CRT glow )

This preserves the look of ASCII text. But with the additional retro benifit of replicating the “bleed-in” effect that larger characters has (which ASCII artist in the past probbly exploited in CRT screens to give the image a “filled in” look).

For Jekyll (using “ascii-art-glow”)

.language-ascii-art-glow { font-family: monospace; text-shadow: 0 0 20px , 0 0 40px, 0 0 80px , 0 0 100px; }

For subreddit in reddit:

code { font-family: monospace; text-shadow: 0 0 20px , 0 0 40px, 0 0 80px , 0 0 100px; }

ASCII image source

Pros: More faithful to the original effect in CRT monitors that artist in the old days exploited. Normal non art text embedded within the ASCII-art is readable.

Cons: Is not as pretty as the previous suggestion in here . Also it requires a dark background on light text to work best.

╔═ comhack@Cerberus 10:49 PM ╚═══ ~-> ssh -p xxxx comhack@xx.xxx.xxx.xxx ^[[H^[[2J _____ .__ .____ .__ / _ \_______ ____ | |__ | | |__| ____ __ _____ ___ / /_\ \_ __ \_/ ___\| | \ | | | |/ \| | \ \/ / / | \ | \/\ \___| Y \ | |___| | | \ | /> < \____|__ /__| \___ >___| / |_______ \__|___| /____//__/\_ \ \/ \/ \/ \/ \/ \/ OS: Archlinux \s Kernel: \r Processor: \m Terminal: \l Users: \u comhack@xx.xxx.xxx.xxx's password:

ASCII image source

For more information about how artist and game makers exploted the glow effect of CRT, an interesting article here can be read:

What a Wonder is a Terrible Monitor — December 4, 2012 ( http://ascii.textfiles.com/archives/3786 )

Ascii art tests