Ransom-Headlessnesss-in-the-Design-unisign

Use unicode characters as a visual and intuitive representation of the designed elements

Width of blocks based on grid
▌half of the page (1/2 column)
▎one fourth of the page (1/4 column)
▝ one fourth of the page (top right corner)
etc.

Position in page
◰ align to left top corner of page
◱ align to bottom left corner of page
◲ align to bottom right corner of page
◳ align to right top corner of page

Crosshatched elements for a bitmap like background pattern (cf: illustrator’s default
▤ .stripes-horizontal
▥ .stripes-vertical
▦ .grid
▧ .stripes-slanted-left
▨ .stripes-slanted-right
▩ .stripes-grid-waffle

level of transparency
░ .transparent25
▒ .transparent50
▓ .transparent75

?
⇱
⇲

Drawing shapes
▭ .rectangle
△ .triangle
□ .rectangle
○ .circle

Box drawing ???
╀┤┠─┐
╀╀╀╀╀╮
┠─┐┼
┆┆┆┆

EXAMPLES (???) BELOW

▌◰ ▨
In this book, Alessandro Ludovico re-reads the history of the avantgarde arts as a prehistory of cutting through these dichotomies. He shows how contemporary forms of networked publishing – using whichever medium or technology – were in fact prefigured by 20th and 21st century artists and their media experiments.

/// script

var fs = require("fs");

var output = '<html><head><link rel="stylesheet" type="text/css" href="style.css"></head><body>';
var input = fs.readFileSync('input.txt', 'utf8');
var lines = input.split("\n");

var state = false;

var charmap = [
        ["░", "transparent25"],
        ["▒", "transparent50"],
        ["▓", "transparent75"],
];

for(var i in lines){
        var line = lines[i];
        var chars = line.split("");

        if(chars[0]===">"){
                if(state === true){
                        output += "\n</div>";
                }
                state = true;
                var classnames = "";
                for(var i=1; i<chars.length; i++){
                        var char = chars[i];
                        classnames += char+" ";
                        //for(var j in charmap){
                        //        if(char === charmap[j][0]){
                        //                classnames += charmap[j][1];
                        //        }
                        //}
                        //classnames += " ";
                }

                output += '<div class="'+classnames+'">\n';
        } else {
                output += line;
        }
}

if(state === true){
        output += "\n</div>";
}
output += "<div></body></html>";

fs.writeFileSync('output.html', output, 'utf8');
console.log(output);

///// input

>░
sadfsdaf

.░{
opacity: 0.25;
}

////triangle

.btn:after {
    content: "";
    position: absolute;
    top:50px; left: 0;
    background-color:inherit;
    padding-bottom:50%; width:57.7%;
    z-index:-1;

    -webkit-transform-origin:0 0;
    -ms-transform-origin:0 0;
    transform-origin:0 0;

    -webkit-transform: rotate(-30deg) skewX(30deg);;
    -ms-transform: rotate(-30deg) skewX(30deg);
    transform: rotate(-30deg) skewX(30deg);
}