examples for visual formatting

jsnkuhn · Oct 4, 2019 · bb9373e · bb9373e
1 parent 6560109
commit bb9373e
Show file tree

Hide file tree

Showing 3 changed files with 356 additions and 0 deletions.
diff --git a/visual-formatting/anonymous-block.html b/visual-formatting/anonymous-block.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Anonymous Block Box</title>
+
+    <style>
+      body {
+        font: 1.2em Helvetica, Arial, sans-serif;
+        margin: 20px;
+        padding: 0;
+      }
+
+      textarea {
+        font-family: monospace;
+        display: block;
+        margin-bottom: 10px;
+        background-color: #f4f7f8;
+        border: none;
+        border-left: 6px solid #558abb;
+        color: #4d4e53;
+        width: 90%;
+        max-width: 700px;
+        padding: 10px 10px 0px;
+        font-size: 90%;
+      }
+
+      textarea:nth-of-type(1) {
+        height: 120px;
+      }
+
+      textarea:nth-of-type(2) {
+        height: 160px;
+      }
+
+      .playable-buttons {
+        text-align: right;
+        width: 90%;
+        max-width: 700px;
+        padding: 5px 10px 5px 26px;
+        font-size: 100%;
+      }
+
+      section {
+        width: 90%;
+        max-width: 700px;
+        border: 1px solid #4d4e53;
+        border-radius: 2px;
+        padding: 10px 14px 10px 10px;
+        margin-bottom: 10px;
+      }
+
+      section input {
+        display: block;
+        margin: 5px;
+      }
+    </style>
+
+    <style class="editable">
+      .example > * {
+        background-color: rebeccapurple;
+        color: white;
+      }
+    </style>
+  </head>
+
+  <body>
+    <section>
+      <div class="example">
+        I am wrapped in an anonymous box 
+        <p>I am in the paragraph</p>
+        I am wrapped in an anonymous box.
+      </div>
+    </section>
+    <textarea class="playable-css">.example > * {
+  background-color: rebeccapurple;
+  color: white;
+}</textarea>
+
+    <textarea id="code" class="playable-html"><div class="example">
+I am wrapped in an anonymous box 
+<p>I am in the paragraph</p>
+I am wrapped in an anonymous box.
+</div></textarea>
+    <div class="playable-buttons">
+      <input id="reset" type="button" value="Reset" />
+    </div>
+  </body>
+  <script>
+    var section = document.querySelector("section");
+    var editable = document.querySelector(".editable");
+    var textareaHTML = document.querySelector(".playable-html");
+    var textareaCSS = document.querySelector(".playable-css");
+    var reset = document.getElementById("reset");
+    var htmlCode = textareaHTML.value;
+    var cssCode = textareaCSS.value;
+
+    function fillCode() {
+      editable.innerHTML = textareaCSS.value;
+      section.innerHTML = textareaHTML.value;
+    }
+
+    reset.addEventListener("click", function() {
+      textareaHTML.value = htmlCode;
+      textareaCSS.value = cssCode;
+      fillCode();
+    });
+
+    textareaHTML.addEventListener("input", fillCode);
+    textareaCSS.addEventListener("input", fillCode);
+    window.addEventListener("load", fillCode);
+  </script>
+</html>
diff --git a/visual-formatting/anonymous-flex.html b/visual-formatting/anonymous-flex.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Anonymous flex items</title>
+
+    <style>
+      body {
+        font: 1.2em Helvetica, Arial, sans-serif;
+        margin: 20px;
+        padding: 0;
+      }
+
+      textarea {
+        font-family: monospace;
+        display: block;
+        margin-bottom: 10px;
+        background-color: #f4f7f8;
+        border: none;
+        border-left: 6px solid #558abb;
+        color: #4d4e53;
+        width: 90%;
+        max-width: 700px;
+        padding: 10px 10px 0px;
+        font-size: 90%;
+      }
+
+      textarea:nth-of-type(1) {
+        height: 120px;
+      }
+
+      textarea:nth-of-type(2) {
+        height: 160px;
+      }
+
+      .playable-buttons {
+        text-align: right;
+        width: 90%;
+        max-width: 700px;
+        padding: 5px 10px 5px 26px;
+        font-size: 100%;
+      }
+
+      section {
+        width: 90%;
+        max-width: 700px;
+        border: 1px solid #4d4e53;
+        border-radius: 2px;
+        padding: 10px 14px 10px 10px;
+        margin-bottom: 10px;
+      }
+
+      section input {
+        display: block;
+        margin: 5px;
+      }
+    </style>
+
+    <style class="editable">
+      .flex {
+        display: flex;
+      }
+
+      .flex > * {
+        background-color: rebeccapurple;
+        color: white;
+      }
+    </style>
+  </head>
+
+  <body>
+    <section>
+      <div class="flex">
+        I am wrapped in an anonymous box 
+        <p>I am in the paragraph</p>
+        I am wrapped in an anonymous box.
+      </div>
+    </section>
+    <textarea class="playable-css">.flex {
+  display: flex;
+}
+
+.flex > * {
+  background-color: rebeccapurple;
+  color: white;
+}</textarea>
+
+    <textarea id="code" class="playable-html"><div class="flex">
+I am wrapped in an anonymous box 
+<p>I am in the paragraph</p>
+I am wrapped in an anonymous box.
+</div></textarea>
+    <div class="playable-buttons">
+      <input id="reset" type="button" value="Reset" />
+    </div>
+  </body>
+  <script>
+    var section = document.querySelector("section");
+    var editable = document.querySelector(".editable");
+    var textareaHTML = document.querySelector(".playable-html");
+    var textareaCSS = document.querySelector(".playable-css");
+    var reset = document.getElementById("reset");
+    var htmlCode = textareaHTML.value;
+    var cssCode = textareaCSS.value;
+
+    function fillCode() {
+      editable.innerHTML = textareaCSS.value;
+      section.innerHTML = textareaHTML.value;
+    }
+
+    reset.addEventListener("click", function() {
+      textareaHTML.value = htmlCode;
+      textareaCSS.value = cssCode;
+      fillCode();
+    });
+
+    textareaHTML.addEventListener("input", fillCode);
+    textareaCSS.addEventListener("input", fillCode);
+    window.addEventListener("load", fillCode);
+  </script>
+</html>
diff --git a/visual-formatting/line-boxes.html b/visual-formatting/line-boxes.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Line boxes</title>
+
+    <style>
+      body {
+        font: 1.2em Helvetica, Arial, sans-serif;
+        margin: 20px;
+        padding: 0;
+      }
+
+      textarea {
+        font-family: monospace;
+        display: block;
+        margin-bottom: 10px;
+        background-color: #f4f7f8;
+        border: none;
+        border-left: 6px solid #558abb;
+        color: #4d4e53;
+        width: 90%;
+        max-width: 700px;
+        padding: 10px 10px 0px;
+        font-size: 90%;
+      }
+
+      textarea:nth-of-type(1) {
+        height: 120px;
+      }
+
+      textarea:nth-of-type(2) {
+        height: 160px;
+      }
+
+      .playable-buttons {
+        text-align: right;
+        width: 90%;
+        max-width: 700px;
+        padding: 5px 10px 5px 26px;
+        font-size: 100%;
+      }
+
+      section {
+        width: 90%;
+        max-width: 700px;
+        border: 1px solid #4d4e53;
+        border-radius: 2px;
+        padding: 10px 14px 10px 10px;
+        margin-bottom: 10px;
+        display: flow-root;
+      }
+
+      section input {
+        display: block;
+        margin: 5px;
+      }
+    </style>
+
+    <style class="editable">
+      .float {
+        float: left;
+        width: 200px;
+        height: 200px;
+        background-color: rebeccapurple;
+        margin: 20px;
+      }
+
+      .following {
+        background-color: #ccc;
+      }
+    </style>
+  </head>
+
+  <body>
+    <section>
+      <div class="float"></div>
+      <p class="following">This text is following the float, the line boxes are shortened to make room for the float but the box of the element still takes position in normal flow.</p>
+    </section>
+    <textarea class="playable-css">.float {
+  float: left;
+  width: 200px;
+  height: 200px;
+  background-color: rebeccapurple;
+  margin: 20px;
+}
+
+.following {
+  background-color: #ccc;
+}</textarea>
+
+    <textarea id="code" class="playable-html"><div class="float"></div>
+      <p class="following">This text is following the float, the line boxes are shortened to make room for the float but the box of the element still takes position in normal flow.</p></textarea>
+    <div class="playable-buttons">
+      <input id="reset" type="button" value="Reset" />
+    </div>
+  </body>
+  <script>
+    var section = document.querySelector("section");
+    var editable = document.querySelector(".editable");
+    var textareaHTML = document.querySelector(".playable-html");
+    var textareaCSS = document.querySelector(".playable-css");
+    var reset = document.getElementById("reset");
+    var htmlCode = textareaHTML.value;
+    var cssCode = textareaCSS.value;
+
+    function fillCode() {
+      editable.innerHTML = textareaCSS.value;
+      section.innerHTML = textareaHTML.value;
+    }
+
+    reset.addEventListener("click", function() {
+      textareaHTML.value = htmlCode;
+      textareaCSS.value = cssCode;
+      fillCode();
+    });
+
+    textareaHTML.addEventListener("input", fillCode);
+    textareaCSS.addEventListener("input", fillCode);
+    window.addEventListener("load", fillCode);
+  </script>
+</html>