Tentatively add vertlabel[] support.

Currently you have to load a formspec containing a vertlabel[] element 
to make use of this feature.

index.lua

@@ -352,7 +352,7 @@ local function show_load_save_dialog()
         local res, err = renderer.export(tree, load_save_opts)
         element_dialog.innerHTML = ''
         local fs = 'formspec_version[2]size[6,9.5]button[0,0;1,0.6;back;←]' ..
-            'label[1.25,0.3;Save formspec]textarea[0.25,1.25;5.5,8;;'
+            'label[1.25,0.3;Save formspec]textarea[0.25,1.25;5.5,8;result;'
         if res then
             fs = fs ..
                 'Formspec exported successfully.;' .. formspec_escape(res)

renderer.lua

@@ -70,6 +70,14 @@ function elems.label(node)
     })
 end
 
+function elems.vertlabel(node)
+    return make('span', {
+        textContent = node.label:gsub('', '\n'):sub(2, -2),
+    }, {
+        data_text = node.label,
+    })
+end
+
 function elems.button(node)
     return make('div', {
         textContent = node.label,
@@ -425,7 +433,7 @@ function renderer.export(tree, opts)
     local fs, err = formspec_ast.unparse(tree)
     if not fs then return nil, err end
     if opts.format then
-        fs = ('%q'):format(fs)
+        fs = ('%q'):format(fs):gsub('\\\n', '\\n')
         local ok, msg = true, ''
         fs = fs:gsub('${([^}]*)}', function(code)
             code = assert(deserialize('"' .. code .. '"')):gsub('\\(.)', '%1')

style.css

@@ -37,6 +37,12 @@
   .formspec_ast-base .formspec_ast-label[data-text=""]::after {
     content: "(empty label)";
     font-style: italic; }
+.formspec_ast-base .formspec_ast-vertlabel {
+  margin-left: -0.3em;
+  line-height: 1; }
+  .formspec_ast-base .formspec_ast-vertlabel[data-text=""]::after {
+    content: "(\a e\am\ap\at\ay\a \al\a a\a b\a e\al\a)";
+    font-style: italic; }
 .formspec_ast-base .formspec_ast-box {
   background-color: #f002; }
 .formspec_ast-base .formspec_ast-button, .formspec_ast-base .formspec_ast-button_exit,
@@ -50,7 +56,8 @@
   text-align: center;
   display: flex;
   align-items: center;
-  justify-content: center; }
+  justify-content: center;
+  overflow: hidden; }
   .formspec_ast-base .formspec_ast-button:hover, .formspec_ast-base .formspec_ast-button_exit:hover,
   .formspec_ast-base .formspec_ast-image_button[data-drawborder="true"]:hover,
   .formspec_ast-base .formspec_ast-image_button_exit[data-drawborder="true"]:hover,
@@ -62,6 +69,7 @@
   .formspec_ast-base .formspec_ast-dropdown > div:active {
     background: linear-gradient(180deg, #464646 0%, #272727 100%); }
 .formspec_ast-base .formspec_ast-image_button[data-drawborder="false"], .formspec_ast-base .formspec_ast-image_button_exit[data-drawborder="false"] {
+  overflow: hidden;
   background: none;
   border: none; }
 .formspec_ast-base .formspec_ast-image_button img, .formspec_ast-base .formspec_ast-image_button_exit img {
@@ -90,6 +98,9 @@
     background: #608631; }
 .formspec_ast-base .formspec_ast-field textarea, .formspec_ast-base .formspec_ast-pwdfield textarea, .formspec_ast-base .formspec_ast-textarea textarea {
   resize: none; }
+.formspec_ast-base .formspec_ast-textarea[data-formspec_ast-name=""] textarea {
+  border-color: transparent;
+  background: transparent; }
 .formspec_ast-base .formspec_ast-checkbox {
   margin-top: -0.6em; }
   .formspec_ast-base .formspec_ast-checkbox > div {

style.scss

@@ -73,6 +73,16 @@ img {
     }
 }
 
+.formspec_ast-vertlabel {
+    margin-left: -0.3em;
+    line-height: 1;
+
+    &[data-text=""]::after {
+        content: "(\a e\am\ap\at\ay\a \al\a a\a b\a e\al\a)";
+        font-style: italic;
+    }
+}
+
 // Make boxes partially visible
 .formspec_ast-box {
     background-color: #f002;
@@ -91,6 +101,7 @@ img {
     display: flex;
     align-items: center;
     justify-content: center;
+    overflow: hidden;
 
     &:hover {
         background: linear-gradient(180deg, #656565 0%, #383838 100%);
@@ -102,6 +113,7 @@ img {
 
 .formspec_ast-image_button, .formspec_ast-image_button_exit {
     &[data-drawborder="false"] {
+        overflow: hidden;
         background: none;
         border: none;
     }
@@ -143,6 +155,11 @@ img {
     }
 }
 
+.formspec_ast-textarea[data-formspec_ast-name=""] textarea {
+    border-color: transparent;
+    background: transparent;
+}
+
 .formspec_ast-checkbox {
     margin-top: -0.6em;
     & > div {