diff --git a/logical/border-longhands.html b/logical/border-longhands.html
new file mode 100644
index 00000000..bac0a7f5
--- /dev/null
+++ b/logical/border-longhands.html
@@ -0,0 +1,105 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>Border Properties</title>
+    <link rel="stylesheet" href="../css-cookbook/styles.css">
+    <style>
+
+        .container {
+            display: flex;
+        }
+        .box {
+            border-radius: 5px;
+            background-color: rgba(96, 139, 168, .2);
+            margin: 10px;
+            width: 220px;
+            height:220px;
+        }
+      
+    </style>
+
+    <style class="editable">
+        .box {
+            writing-mode: horizontal-tb;
+            direction: ltr;
+        }
+
+        .physical {
+            border-top: 2px solid hotpink;
+            border-right-style: dotted;
+            border-right-color: goldenrod;
+            border-right-width: 5px;
+            border-bottom: 4px double black;
+            border-left: none;
+        }
+
+        .logical {
+            border-block-start: 2px solid hotpink;
+            border-inline-end-style: dotted;
+            border-inline-end-color: goldenrod;
+            border-inline-end-width: 5px;
+            border-block-end: 4px double black;
+            border-inline-start: none;
+        }
+    </style>
+</head>
+
+<body>
+    <section class="preview">
+        <div class="container">
+            <div class="physical box">
+                Borders use physical properties.
+            </div>
+
+            <div class="logical box">
+                Borders use logical properties.
+            </div>
+        </div>
+    </section>
+
+    <textarea class="playable playable-css" style="height: 30px;">
+.box {
+    writing-mode: horizontal-tb;
+    direction: ltr;
+}
+
+.physical {
+    border-top: 2px solid hotpink;
+    border-right-style: dotted;
+    border-right-color: goldenrod;
+    border-right-width: 5px;
+    border-bottom: 4px double black;
+    border-left: none;
+}
+
+.logical {
+    border-block-start: 2px solid hotpink;
+    border-inline-end-style: dotted;
+    border-inline-end-color: goldenrod;
+    border-inline-end-width: 5px;
+    border-block-end: 4px double black;
+    border-inline-start: none;
+}</textarea>
+
+    <textarea class="playable playable-html" style="height: 180px;">
+<div class="container">
+    <div class="physical box">
+        Borders use physical properties.
+    </div>
+    
+    <div class="logical box">
+        Borders use logical properties.
+    </div>
+</div>
+    </textarea>
+
+
+    <div class="playable-buttons">
+        <input id="reset" type="button" value="Reset">
+    </div>
+</body>
+<script src="../css-cookbook/playable.js"></script>
+
+</html>
\ No newline at end of file
diff --git a/logical/float.html b/logical/float.html
new file mode 100644
index 00000000..805dda45
--- /dev/null
+++ b/logical/float.html
@@ -0,0 +1,91 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>logical values for float</title>
+    <link rel="stylesheet" href="../css-cookbook/styles.css">
+    <style>
+
+        .container {
+            display: flex;
+        }
+
+        .box {
+            border: 2px solid rgb(96, 139, 168);
+            border-radius: 5px;
+            background-color: rgba(96, 139, 168, .2);
+            padding: 10px;
+            margin: 10px;
+            width: 100px;
+            height: 100px;
+        }
+
+      
+    </style>
+
+    <style class="editable">
+        .inner {
+            writing-mode: horizontal-tb;
+        }
+
+        .physical {
+        float: left;
+        }
+
+        .logical {
+            float: inline-start;
+        }
+    </style>
+</head>
+
+<body>
+    <section class="preview">
+        <div class="container">
+            <div class="inner">
+                <div class="physical box"></div>
+                Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach
+                avocado daikon napa cabbage asparagus winter purslane kale.
+                <div class="inner">
+                    <div class="logical box"></div>
+                    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water
+                    spinach
+                    avocado daikon napa cabbage asparagus winter purslane kale.
+                </div>
+            </div>
+    </section>
+
+    <textarea class="playable playable-css" style="height: 240px;">
+.inner {
+    writing-mode: horizontal-tb;
+}
+
+.physical {
+    float: left;
+}
+
+.logical {
+    float: inline-start;
+}</textarea>
+
+    <textarea class="playable playable-html" style="height: 180px;">
+<div class="container">
+    <div class="inner">
+        <div class="physical box"></div>
+        Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale.  
+    </div>
+    <div class="inner">
+        <div class="logical box"></div>
+        Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale.  
+    </div>
+</div>
+    </textarea>
+
+
+    <div class="playable-buttons">
+        <input id="reset" type="button" value="Reset">
+    </div>
+</body>
+<script src="../css-cookbook/playable.js"></script>
+
+</html>
\ No newline at end of file
diff --git a/logical/margin-longhands.html b/logical/margin-longhands.html
new file mode 100644
index 00000000..1c99d615
--- /dev/null
+++ b/logical/margin-longhands.html
@@ -0,0 +1,120 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>Margin Longhands</title>
+    <link rel="stylesheet" href="../css-cookbook/styles.css">
+    <style>
+
+        .container {
+            display: flex;
+        }
+        .inner {
+            border: 2px dotted grey;
+        }
+        .box {
+            border: 2px solid rgb(96, 139, 168);
+            border-radius: 5px;
+            background-color: rgba(96, 139, 168, .2);
+            padding: 10px;
+            width: 220px;
+            height:220px;
+        }
+
+      
+    </style>
+
+    <style class="editable">
+        .box {
+            writing-mode: horizontal-tb;
+            direction: ltr;
+        }
+
+        .physical {
+            margin-top: 5px;
+            margin-right: 0;
+            margin-bottom: 2em;
+            margin-left: 50px;
+        }
+
+        .logical {
+            margin-block-start: 5px;
+            margin-inline-end: 0;
+            margin-block-end: 2em;
+            margin-inline-start: 50px;
+        }
+    </style>
+</head>
+
+<body>
+    <section class="preview">
+        <div class="container">
+            <div class="inner">
+                <div class="physical box">
+                    margin-top: 5px<br>
+                    margin-right: 0<br>
+                    margin-bottom: 2em<br>
+                    margin-left: 50px
+                </div>
+            </div>
+            <div class="inner">
+                <div class="logical box">
+                    margin-block-start: 5px<br>
+                    margin-inline-end: 0<br>
+                    margin-block-end: 2em<br>
+                    margin-inline-start: 50px
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <textarea class="playable playable-css" style="height: 320px;">
+.box {
+    writing-mode: horizontal-tb;
+    direction: ltr;
+}
+
+.physical {
+    margin-top: 5px;
+    margin-right: 0;
+    margin-bottom: 2em;
+    margin-left: 50px;
+}
+
+.logical {
+    margin-block-start: 5px;
+    margin-inline-end: 0;
+    margin-block-end: 2em;
+    margin-inline-start: 50px;
+}</textarea>
+
+    <textarea class="playable playable-html" style="height: 340px;">
+<div class="container">
+    <div class="inner">
+        <div class="physical box">
+            margin-top: 5px<br>
+            margin-right: 0<br>
+            margin-bottom: 2em<br>
+            margin-left: 50px
+        </div>
+    </div>
+    <div class="inner">
+        <div class="logical box">
+            margin-block-start: 5px<br>
+            margin-inline-end: 0<br>
+            margin-block-end: 2em<br>
+            margin-inline-start: 50px
+        </div>
+    </div>
+</div>
+    </textarea>
+
+
+    <div class="playable-buttons">
+        <input id="reset" type="button" value="Reset">
+    </div>
+</body>
+<script src="../css-cookbook/playable.js"></script>
+
+</html>
\ No newline at end of file
diff --git a/logical/padding-longhands.html b/logical/padding-longhands.html
new file mode 100644
index 00000000..e098691e
--- /dev/null
+++ b/logical/padding-longhands.html
@@ -0,0 +1,111 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>Padding Longhands</title>
+    <link rel="stylesheet" href="../css-cookbook/styles.css">
+    <style>
+
+        .container {
+            display: flex;
+        }
+        .box {
+            border: 2px solid rgb(96, 139, 168);
+            border-radius: 5px;
+            background-color: rgba(96, 139, 168, .2);
+            margin: 10px;
+            width: 220px;
+            height:220px;
+        }
+
+      
+    </style>
+
+    <style class="editable">
+        .box {
+            writing-mode: horizontal-tb;
+            direction: ltr;
+        }
+
+        .physical {
+            padding-top: 5px;
+            padding-right: 0;
+            padding-bottom: 2em;
+            padding-left: 50px;
+        }
+
+        .logical {
+            padding-block-start: 5px;
+            padding-inline-end: 0;
+            padding-block-end: 2em;
+            padding-inline-start: 50px;
+        }
+    </style>
+</head>
+
+<body>
+    <section class="preview">
+        <div class="container">
+            <div class="physical box">
+                padding-top: 5px<br>
+                padding-right: 0<br>
+                padding-bottom: 2em<br>
+                padding-left: 50px
+            </div>
+
+            <div class="logical box">
+                padding-block-start: 5px<br>
+                padding-inline-end: 0<br>
+                padding-block-end: 2em<br>
+                padding-inline-start: 50px
+            </div>
+        </div>
+    </section>
+
+    <textarea class="playable playable-css" style="height: 320px;">
+.box {
+    writing-mode: horizontal-tb;
+    direction: ltr;
+}
+
+.physical {
+    padding-top: 5px;
+    padding-right: 0;
+    padding-bottom: 2em;
+    padding-left: 50px;
+}
+
+.logical {
+    padding-block-start: 5px;
+    padding-inline-end: 0;
+    padding-block-end: 2em;
+    padding-inline-start: 50px;
+}</textarea>
+
+    <textarea class="playable playable-html" style="height: 340px;">
+<div class="container">
+    <div class="physical box">
+        padding-top: 5px<br>
+        padding-right: 0<br>
+        padding-bottom: 2em<br>
+        padding-left: 50px
+    </div>
+    
+    <div class="logical box">
+        padding-block-start: 5px<br>
+        padding-inline-end: 0<br>
+        padding-block-end: 2em<br>
+        padding-inline-start: 50px
+    </div>
+</div>
+    </textarea>
+
+
+    <div class="playable-buttons">
+        <input id="reset" type="button" value="Reset">
+    </div>
+</body>
+<script src="../css-cookbook/playable.js"></script>
+
+</html>
\ No newline at end of file
diff --git a/logical/positioning-inset.html b/logical/positioning-inset.html
new file mode 100644
index 00000000..fb421158
--- /dev/null
+++ b/logical/positioning-inset.html
@@ -0,0 +1,99 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>inset properties for positioning</title>
+    <link rel="stylesheet" href="../css-cookbook/styles.css">
+    <style>
+
+        .container {
+            display: flex;
+        }
+
+        .inner {
+            width: 200px;
+            height: 200px;
+            position: relative;
+            border: 2px dotted grey;
+        }
+
+        .box {
+            border: 2px solid rgb(96, 139, 168);
+            border-radius: 5px;
+            background-color: rgba(96, 139, 168, .2);
+            padding: 10px;
+            width: 100px;
+            height: 100px;
+        }
+
+      
+    </style>
+
+    <style class="editable">
+        .inner {
+            writing-mode: horizontal-tb;
+            
+        }
+
+        .physical {
+        position: absolute;
+        top: 20px;
+        right: 0;
+        }
+
+        .logical {
+            position: absolute;
+            inset-block-start: 20px;
+            inset-inline-end: 0;
+        }
+    </style>
+</head>
+
+<body>
+    <section class="preview">
+        <div class="container">
+            <div class="inner">
+                <div class="physical box"></div>
+                <div class="inner">
+                    <div class="logical box"></div>
+                </div>
+            </div>
+    </section>
+
+    <textarea class="playable playable-css" style="height: 240px;">
+.inner {
+    writing-mode: horizontal-tb;
+}
+
+.physical {
+    position: absolute;
+    top: 20px;
+    right: 0;
+}
+
+.logical {
+    position: absolute;
+    inset-block-start: 20px;
+    inset-inline-end: 0;
+}</textarea>
+
+    <textarea class="playable playable-html" style="height: 180px;">
+<div class="container">
+    <div class="inner">
+        <div class="physical box"></div> 
+    </div>
+    <div class="inner">
+        <div class="logical box"></div>
+    </div>
+</div>
+    </textarea>
+
+
+    <div class="playable-buttons">
+        <input id="reset" type="button" value="Reset">
+    </div>
+</body>
+<script src="../css-cookbook/playable.js"></script>
+
+</html>
\ No newline at end of file
diff --git a/logical/text-align.html b/logical/text-align.html
new file mode 100644
index 00000000..c6d017da
--- /dev/null
+++ b/logical/text-align.html
@@ -0,0 +1,80 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>text-align logical values</title>
+    <link rel="stylesheet" href="../css-cookbook/styles.css">
+    <style>
+
+        .container {
+            display: flex;
+        }
+
+        .inner {
+            width: 200px;
+            border: 2px dotted grey;
+            padding: 10px;
+        }     
+    </style>
+
+    <style class="editable">
+        .inner {
+            direction: ltr;
+            
+        }
+
+        .physical {
+            text-align:right;
+        }
+
+        .logical {
+            text-align: end;
+        }
+    </style>
+</head>
+
+<body>
+    <section class="preview">
+        <div class="container">
+            <div class="inner physical">
+                Aligned text
+            </div>
+            <div class="inner logical">
+                Aligned text
+            </div>
+        </div>
+    </section>
+
+    <textarea class="playable playable-css" style="height: 240px;">
+.inner {
+    direction: ltr;
+}
+
+.physical {
+    text-align:right;
+}
+
+.logical {
+    text-align: end;
+}</textarea>
+
+    <textarea class="playable playable-html" style="height: 180px;">
+<div class="container">
+    <div class="inner physical">
+        Aligned text
+    </div>
+    <div class="inner logical">
+        Aligned text
+    </div>
+</div>
+    </textarea>
+
+
+    <div class="playable-buttons">
+        <input id="reset" type="button" value="Reset">
+    </div>
+</body>
+<script src="../css-cookbook/playable.js"></script>
+
+</html>
\ No newline at end of file
