css style for ascii-art
posts ascii artIn 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);
}
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;
}
-
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: 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
.--. /\ ____
'--' /__\ (^._.^)~ <(o.o )>
.g@8g. db
'Y8@P' d88b
:$#$: "4b. ':.
:$#$: "4b. ':.