\nDer Javascript-Compiler ist fertig, HTML kann ich aus dem Lisp auch generieren. Um eine halbwegs komplette Webseitenlösung zu bauen braucht jedoch eine weitere “Sprache”: CSS. Natürlich ist CSS keineswegs irgendwie kompatibel mit dem Rest, was die Syntax angeht. Und der Emacs-Mode, den ich finden konnte, passt mir überhaupt nicht. Was bleibt einem also übrig, als ein LISP nach CSS Formattierer zu bauen? Kann sein, dass ich an dem NIH-Syndrom leide, aber ich kann ziemlich gut damit leben \ud83d\ude42\n<\/p>\n
\nZum Glück ist CSS “einfach”, was die Syntax und Struktur einer Datei angeht. Mittels “Selektoren” werden Knoten aus dem HTML Dokument ausgewählt, und ihnen werden dann “Properties”, die jeweils einen Namen und einen Wert haben, zugewiesen. Zum Beispiel:\n<\/p>\n
\n* {
\n
background-color: black;
\n
}\n<\/p>\n
\nDieses CSS Konstrukt weist allen Knoten (der Selektor “*” selektiert alles) die Property “background-color” mit dem Wert “black” zu. Es gibt eine ganze Reihe an Properties, die von dem CSS 1 Standard festgelegt werden (es gibt auch CSS 2, aber das kenn ich jetzt nicht so wirklich). Viele von diesen Properties haben auch eine feste Anzahl an möglichen Werten. Das ist so ein bisschen wie eine Enumeration in C. Zum Beispiel unterstützt die Property “font-style” die Werte “normal”, “italic” oder “oblique”. Andere Properties unterstützen numerische Werte, unter Umständen gefolgt von einer Einheit. Grössen kann man z.B. in Pixel angeben (z.B. “10px”), oder als grössen von einem “m” (z.B. “10em”). Man kann sie auch als Prozentangaben der übergeordneten Element angeben (z.B. “10%”). Andere Werte, wie Farben, können entweder Farbnamen oder hexadecimal-Darstellungen der Farben in RGB annehmen. Also ein recht unübersichtliches Gewächs.\n<\/p>\n
\nDie Frage stellt sich, wie man diese CSS-Struktur jetzt in Lisp darstellen soll. Dafür bin ich dem selben Ansatz gefolgt wie bei meinem Javascript-Compiler: im Zweifelsfall alles lasch handeln, der Programmierer wird schon wissen, was er tut. Ein Selektor kann also ein Symbol sein, ein String, oder eine Liste. Wenn es eine Liste ist, dann werden die einzelnen Element mit “,” zusammengebunden, es ist also eine Oder-Verknüpfung. Es gibt aber bei Selektoren auch die Möglichkeit, eine Hierarchie anzugeben. Wenn man z.B. die Kinder von dem Element P mit Id “foobar ansprechen will: “p#foobar *”. Diese hierarchischen Selektoren muss man in meinem CSS Generator ausschreiben. Ist nicht so ganz schick, aber fürs erste tut. Jetzt als erstes ein Beispiel, damit ich nicht ins Leere blogge, und damit ihr euch vorstellen könnt, was ich meine.\n<\/p>\n
\nUnser CSS:\n<\/p>\n
\nbody,td,p {
\n
font-family:Verdana, “Trebuchet MS”, Trebuchet, Arial, sans-serif;
\n
font-size:11px;
\n
line-height:16px;
\n
color:#666666;
\n
}\n<\/p>\n
\nli {
\n
margin:3px 0px;
\n
padding:0px 0px;
\n
}\n<\/p>\n
\na:link,a:visited {
\n
color:#989833;
\n
text-decoration:none;
\n
}\n<\/p>\n
\na:hover,a:active {
\n
text-decoration:underline;
\n
}\n<\/p>\n
\nJetzt die LISP-Darstellung:\n<\/p>\n
\n(css-file
\n
;; general tags
\n
((:body :td :p)
\n
:font-family “Verdana, \\”Trebuchet MS\\”, Trebuchet, Arial, sans-serif”
\n
:font-size “11px”
\n
:line-height “16px”
\n
:color “#666666”)<\/p>\n
(:li
\n
:margin “3px 0px”
\n
:padding “0px 0px”)
\n
((“a:link” “a:visited”)
\n
:color “#989833”
\n
:text-decoration :none)
\n
((“a:hover” “a:active”)
\n
:text-decoration :underline))\n<\/p>\n
\nDie CSS-Regeln sind jetzt also… Listen (!). Das erste Element einer CSS-Regel-Liste ist der Selektor. Der Rest sind dann die Properties. Die Namen der Properties sind eigentlich im CSS Standard festgelegt, und bestehen alle aus lowercase-Strings. Man kann sie also durch Keyword-Symbole darstellen. Damit ergibt sich für die CSS-Regel auch eine Struktur, die Lisp-Programmierern geheuer ist. Man kann z.B. auf die Property einer CSS-Regel mit (GETF (CDR RULE) PROPERTY) zurückgreifen. In bestimmten Fällen (Browserspezifische Extensions z.B.) will man auch “komisch” geformte Properties angeben wollen, Strings gehen also immer noch. Hier sind alle Property-Werte Strings, es gehen aber auch wieder Symbole (die nach lowercase-Strings konvertiert werden) oder Nummern.\n<\/p>\n
\nIn dem obigen Beispiel sieht man auch, was für Selektoren möglich sind. Um Tags zu selektieren kann man einfach das Keyword verwenden. Das ist dann ein bisschen so wie bei dem HTML-Generator. Man kann aber auch Strings angeben. Z.B. kann man nicht A:HOVER als Symbol hinschreiben, weil der LISP-Reader das als “das Symbol HOVER im Package A” interpretiert. Deswegen also “a:hover”. Die erste CSS-Regel soll auf BODY, TD und P Elemente zugleich angewendet werden, ich hab daraus also eine Liste gemacht.\n<\/p>\n
\nJetzt aber genug an dem Beispiel rumerklärt, hier der Lisp Code. Als erstes brauchen wir eine Funktion, die aus unseren Werten (Symbol, String oder Wasauchimmer) ein String generiert. Diese Funktion wird dann sowohl auf die Selektoren als auch auf die Propertynamen als auch auf die Propertywerte losgelassen.\n<\/p>\n
(defun val-to-string (val)\n (cond ((stringp val) val)\n\t((symbolp val) (string-downcase (symbol-name val)))\n\t(t (princ-to-string val))))\n<\/pre>\nDie Funktion ist weitgehend selbsterklärend. Interessant ist, dass die meistens Funktionen die wir jetzt geschrieben haben sind stark ähneln. Sie laufen sozusagen einen Baum ab, und machen auf dem Baum Pattern-Matching. Wenn der Wert hier ein String ist, wird er als solcher zurückgegeben. Das gibt dem Programmier alle Freiheiten, die er braucht, um das Output zu tweaken. Wenn ihm Lustig ist kann er hier komplette CSS-Regeln auch übergeben, oder CSS-Kommentare. Der CSS-Generator ist also “Zukunftssicher” (*hust* *hust*).<\/p>\n
Als nächstes brauchen wir einen Datentyp für unsere CSS-Rules (als interne Darstellung). Natürlich verwenden wir dazu auch wieder Listen, und bauen die passenden Funktionen als Abstraktionen dazu.<\/p>\n
(defun make-css-rule (selectors properties)\n (list (mapcar #'val-to-string\n\t\t(if (atom selectors)\n\t\t (list selectors)\n\t\t selectors))\n\tproperties))\n\n(defun css-rule-selectors (css-rule)\n (first css-rule))\n\n(defun css-rule-properties (css-rule)\n (second css-rule))\n\n(defmacro css-rule (selectors &rest properties)\n `(make-css-rule ',selectors ',properties))\n<\/pre>\nMAKE-CSS-RULE erleichtert uns schon die Arbeit, indem es die Selektoren schon zu Strings konvertiert. Es konvertiert auch einen einzelnen Selektor zu einem OR-Ausdruck mit einem Element (also eine Liste mit einem Element). Dadurch haben wir später weniger Spezialfälle zu berücksichtigen. Das Makro CSS-RULE ist nur da, weil ich faul bin, und nicht immer quoten will.<\/p>\n
CSS kann man auch inline als Attribut eines HTML Elements angeben. Da werden aber keine Selektoren mehr angegeben, weil der Knoten ja schon ausgewählt wurde. Für diesen Minimalfall brauchen wir also eine Funktion, die eine Property nach String konvertiert. Diese ist erstaunlich kompliziert:<\/p>\n
(defun propval-to-string (propval)\n (format nil \"~A:~A\" (val-to-string (first propval))\n\t (val-to-string (second propval))))\n<\/pre>\nDas passende Makro zum Einsetzen in dem HTML Generator ist auch nicht wesentlich schwieriger:<\/p>\n
(defmacro css-inline (&rest propvals)\n `(concatenate 'string ,@(loop for propval on propvals by #'cddr\n\t\t\t\tcollect (propval-to-string propval))))\n<\/pre>\nMit diesem Grundbaustein können wir jetzt die Funktion CSS-RULE-TO-STRING bauen, die noch die Selektoren davor packt:<\/p>\n
(defun css-rule-to-string (css-rule)\n (format nil \"~A {~%~{~A;~%~}}~%~%\"\n\t (string-join (css-rule-selectors css-rule) \",\")\n\t (loop for propval on (css-rule-properties css-rule) by #'cddr\n\t\t collect (concatenate 'string \" \" (propval-to-string propval)))))\n<\/pre>\nDas ist wie immer Hack-Code, deswegen auch die vielen Loops (ich kann damit besser Prototypen). Wo wir jetzt eine Regel zu einem String konvertieren können ist der Rest nur noch formalkrams:<\/p>\n
(defmacro css (&rest rules)\n `((:style :type \"text\/css\")\n (:princ #\\Newline \"<!--\" #\\Newline)\n (:princ ,@(mapcar #'(lambda (rule) `(css-rule-to-string (css-rule ,@rule))) rules))\n (:princ \"-->\" #\\Newline)))\n\n(defmacro css-file (&rest rules)\n `(html\n (:princ\n ,@(mapcar #'(lambda (rule) `(css-rule-to-string (css-rule ,@rule))) rules))))\n<\/pre>\nZum Schluss ein paar Anwendungsbeispiele:<\/p>\n
;;; generate a CSS file\n#+nil\n(html-stream *standard-output* \n (css-file (* :border \"1px solid black\")\n\t (div.bl0rg :font-family \"serif\")\n\t ((\"a:active\" \"a:hoover\") :color \"black\" :size \"200%\")))\n\n\n;;; generate an inline CSS spec in a HTML head element\n#+nil\n(html-stream *standard-output* \n (html\n (:html\n (:head\n (css (* :border \"1px solid black\")\n\t (div.bl0rg :font-family \"serif\")\n\t ((\"a:active\" \"a:hoover\") :color \"black\" :size \"200%\"))))))\n\n;;; generate a style attribute for a DIV element\n#+nil\n(html-stream *standard-output* \n (html (:html (:body ((:div :style (css-inline :border \"1px solid black\"))\n\t\t\t \"foobar\")))))\n<\/pre>\nDas wars, jetzt haben wir alle Werkzeuge, um Webseiten kompletten aus dem Lisp zu generieren.<\/p>\n","protected":false},"excerpt":{"rendered":"
Der Javascript-Compiler ist fertig, HTML kann ich aus dem Lisp auch generieren. Um eine halbwegs komplette Webseitenlösung zu bauen braucht jedoch eine weitere “Sprache”: CSS. Natürlich ist CSS keineswegs irgendwie kompatibel mit dem Rest, was die Syntax angeht. Und der … Continue reading