From 2616929fb3121f6ccfbafbb8f43574a94ce95af9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Huertas?= Date: Sat, 9 Sep 2023 19:01:22 +0200 Subject: [PATCH 1/6] feat: add custom table borders and column alignment MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Allow some few customization options for table borders and column alignment. - For custom borders: adds classes `border-` and `heavy-border-`, being `position` one of the values, `top`, `right`, ´bottom´, `left`. - For custom column alignment: adds classes `l1-l12`, `c1-c12`, `r1-r12`. --- index.html | 164 +++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 96 ++++++++++++++++++++++++++++--- 2 files changed, 253 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 016b000..232d6e3 100644 --- a/index.html +++ b/index.html @@ -61,6 +61,12 @@

Contents

  • Paragraphs
    • +
  • Table classes +
      +
    1. Custom table borders
      2. +
    2. Table column alignment
      3. +
    +
  • Language Support
    • @@ -203,6 +209,43 @@

    Paragraphs

    To avoid first line indentation of some specific paragraph, the class no-indent can be used.

    <p class="no-indent">...</p>
    +

    Table classes

    +

    Custom table borders

    +

    + To add custom borders to the table, you should use the class + .custom-borders with <table> + tag, to begin with a table without any border. The classes + border-<position> and heavy-border-<position>, + are available, where <position> can take one of the values: + top, right, bottom, left. +

    + 
    <table class="custom-borders ...">
+  <tr class="border-bottom">
+    <td>...</td><td>...</td><td>...</td>
+  </tr>
+  <tr class="border-bottom">
+    <td>...</td><td>...</td><td>...</td>
+  </tr>
+  ...
    +

    See full examples in section about tables.

    +

    Table column alignment

    +

    + For each column of the table, there is one class for left, center or right + alignment, up to 12 columns: l1-l12, c1-c12, + r1-r12. For example, a table with 3 columns using the following + classes +

    + 
    <table class="l1 c2 r3">
+  <tr>
+    <td>...</td><td>...</td><td>...</td>
+  </tr>
+  ...
    +

    + aligns to the left the first column, centers the second one and aligns to the + right the third of the columns. +

    + +

    See full examples in section about tables.

    Language Support

    @@ -433,6 +476,127 @@

    Tables

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Example table with custom borders and aligment
    DeMorgan's Law
    $P$$Q$$\lnot P$$\lnot Q$$P \land Q$$\lnot P \lor \lnot Q$$\lnot (P \land Q)$$\lnot P \lor \lnot Q \iff \lnot (P \land Q)$
    TTFFTFFT
    FTFTTT
    FTTFFTTT
    FTFTTT
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Close approaches to the Earth by NEOs
    CA DateObject NameDiameterDist. Min. (LD)
    2023-Jul-102018 NW7.3m-16m0.287
    2023-Jul-102023 LN145m-00m17.813
    2023-Jul-112023 MD236m-80m5.570
    2023-Jul-112023 NE32m-70m11.253
    2023-Jul-112023 MQ128m-62m10.716
    2023-Jul-122023 OM20m-46m7.628
    2023-Jul-122018 UY190m-420m7.412
    +

    Images

    th[scope='col'] { +table:not(.custom-borders) tr > th[scope='col'] { border-bottom: 1.36px solid var(--table-border-color); } /* add right border on row table headings */ -table tr > th[scope='row'] { +table:not(.custom-borders) tr > th[scope='row'] { border-right: 1.36px solid var(--table-border-color); } -table > tbody > tr:first-child > td, -table > tbody > tr:first-child > th { +table:not(.custom-borders) > tbody > tr:first-child > td, +table:not(.custom-borders) > tbody > tr:first-child > th { border-top: 1.36px solid var(--table-border-color); } -table > tbody > tr:last-child > td, -table > tbody > tr:last-child > th { +table:not(.custom-borders) > tbody > tr:last-child > td, +table:not(.custom-borders) > tbody > tr:last-child > th { border-bottom: 1.36px solid var(--table-border-color); } @@ -357,6 +359,86 @@ caption::before { white-space: nowrap; } +/* Table custom borders */ +table.custom-borders { + border-collapse: collapse; + border-spacing: 0; + width: auto; + max-width: 100%; + overflow-x: auto; /* does not work because element is not block */ + counter-increment: caption; +} + +.heavy-border-top { + border-top: var(--heavy-rule-width) solid var(--table-border-color); +} +.heavy-border-right { + border-right: var(--heavy-rule-width) solid var(--table-border-color); +} +.heavy-border-bottom { + border-bottom: var(--heavy-rule-width) solid var(--table-border-color); +} +.heavy-border-left { + border-left: var(--heavy-rule-width) solid var(--table-border-color); +} + +.border-top { + border-top: var(--light-rule-width) solid var(--table-border-color); +} +.border-right { + border-right: var(--light-rule-width) solid var(--table-border-color); +} +.border-bottom { + border-bottom: var(--light-rule-width) solid var(--table-border-color); +} +.border-left { + border-left: var(--light-rule-width) solid var(--table-border-color); +} + +/* Table column alignment */ +.l1 tr > :nth-child(1), +.l2 tr > :nth-child(2), +.l3 tr > :nth-child(3), +.l4 tr > :nth-child(4), +.l5 tr > :nth-child(5), +.l6 tr > :nth-child(6), +.l7 tr > :nth-child(7), +.l8 tr > :nth-child(8), +.l9 tr > :nth-child(9), +.l10 tr > :nth-child(10), +.l11 tr > :nth-child(11), +.l12 tr > :nth-child(12) { + text-align: left; +} +.c1 tr > :nth-child(1), +.c2 tr > :nth-child(2), +.c3 tr > :nth-child(3), +.c4 tr > :nth-child(4), +.c5 tr > :nth-child(5), +.c6 tr > :nth-child(6), +.c7 tr > :nth-child(7), +.c8 tr > :nth-child(8), +.c9 tr > :nth-child(9), +.c10 tr > :nth-child(10), +.c11 tr > :nth-child(11), +.c12 tr > :nth-child(12) { + text-align: center; +} +.r1 tr > :nth-child(1), +.r2 tr > :nth-child(2), +.r3 tr > :nth-child(3), +.r4 tr > :nth-child(4), +.r5 tr > :nth-child(5), +.r6 tr > :nth-child(6), +.r7 tr > :nth-child(7), +.r8 tr > :nth-child(8), +.r9 tr > :nth-child(9), +.r10 tr > :nth-child(10), +.r11 tr > :nth-child(11), +.r12 tr > :nth-child(12) { + text-align: right; +} + /* Center align the title */ h1:first-child { text-align: center; From 5465bea344f85956c5e209372e171bdba217bc25 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Huertas?= Date: Mon, 18 Sep 2023 23:38:21 +0200 Subject: [PATCH 2/6] fix: rename class names following CSS conventions --- index.html | 38 +++++++++++++++++++------------------- style.css | 52 ++++++++++++++++++++++++++-------------------------- 2 files changed, 45 insertions(+), 45 deletions(-) diff --git a/index.html b/index.html index 232d6e3..1b4a9fd 100644 --- a/index.html +++ b/index.html @@ -213,17 +213,17 @@

    Table classes

    Custom table borders

    To add custom borders to the table, you should use the class - .custom-borders with <table> + borders-custom with <table> tag, to begin with a table without any border. The classes - border-<position> and heavy-border-<position>, + border-<position>-thin and border-<position>-thick, are available, where <position> can take one of the values: top, right, bottom, left.

    - 
    <table class="custom-borders ...">
-  <tr class="border-bottom">
+      
    <table class="borders-custom ...">
+  <tr class="border-bottom-thick">
     <td>...</td><td>...</td><td>...</td>
   </tr>
-  <tr class="border-bottom">
+  <tr class="border-bottom-thin">
     <td>...</td><td>...</td><td>...</td>
   </tr>
   ...
    
@@ -476,23 +476,23 @@ 
    Tables
    
         
       
 
-      
+      
    -          -          -          -          -          -          -          +          +          +          +          +          +          +          
-        
+        
@@ -502,7 +502,7 @@ 
    Tables
    
-        
+        
@@ -512,7 +512,7 @@ 
    Tables
    
-        
+        
@@ -520,7 +520,7 @@ 
    Tables
    
-        
+        
@@ -540,10 +540,10 @@ 
    Tables
    
         Example table with custom borders and aligment
         














           
         
         
    
           
           DeMorgan's Law
         
    
           $P$
           $Q$
           $\lnot P$
           $\lnot (P \land Q)$
           $\lnot P \lor \lnot Q \iff \lnot (P \land Q)$
         
    
           T
           T
           F
           F
           T
         
    
           F
           T
           F
           T
           T
         
    
           F
           T
           T
         
    
       
    
 
-      
+      
    
-          
+          
diff --git a/style.css b/style.css
index b26aad5..a7664e9 100644
--- a/style.css
+++ b/style.css
@@ -109,8 +109,8 @@
   --kbd-bg-color: hsl(210, 5%, 100%);
   --kbd-border-color: hsl(210, 5%, 70%);
   --table-border-color: black;
-  --light-rule-width: 1.36px;
-  --heavy-rule-width: 2.27px;
+  --border-width-thin: 1.36px;
+  --border-width-thick: 2.27px;
   --sidenote-target-border-color: hsl(55, 55%, 70%);
   --footnotes-border-color: hsl(0, 0%, 39%);
   --text-indent-size: 1.463rem; /* In 12pt [Latin Modern font] LaTeX article
@@ -298,7 +298,7 @@ kbd {
 }
 
 /* Better tables */
-table:not(.custom-borders) {
+table:not(.borders-custom) {
   border-collapse: collapse;
   border-spacing: 0;
   width: auto;
@@ -311,19 +311,19 @@ table:not(.custom-borders) {
   counter-increment: caption;
 }
 /* add bottom border on column table headings  */
-table:not(.custom-borders) tr > th[scope='col'] {
+table:not(.borders-custom) tr > th[scope='col'] {
   border-bottom: 1.36px solid var(--table-border-color);
 }
 /* add right border on row table headings  */
-table:not(.custom-borders) tr > th[scope='row'] {
+table:not(.borders-custom) tr > th[scope='row'] {
   border-right: 1.36px solid var(--table-border-color);
 }
-table:not(.custom-borders) > tbody > tr:first-child > td,
-table:not(.custom-borders) > tbody > tr:first-child > th {
+table:not(.borders-custom) > tbody > tr:first-child > td,
+table:not(.borders-custom) > tbody > tr:first-child > th {
   border-top: 1.36px solid var(--table-border-color);
 }
-table:not(.custom-borders) > tbody > tr:last-child > td,
-table:not(.custom-borders) > tbody > tr:last-child > th {
+table:not(.borders-custom) > tbody > tr:last-child > td,
+table:not(.borders-custom) > tbody > tr:last-child > th {
   border-bottom: 1.36px solid var(--table-border-color);
 }
 
@@ -360,7 +360,7 @@ caption::before {
 }
 
 /* Table custom borders */
-table.custom-borders {
+table.borders-custom {
   border-collapse: collapse;
   border-spacing: 0;
   width: auto;
@@ -369,30 +369,30 @@ table.custom-borders {
   counter-increment: caption;
 }
 
-.heavy-border-top {
-  border-top: var(--heavy-rule-width) solid var(--table-border-color);
+.border-top-thick {
+  border-top: var(--border-width-thick) solid var(--table-border-color);
 }
-.heavy-border-right {
-  border-right: var(--heavy-rule-width) solid var(--table-border-color);
+.border-right-thick {
+  border-right: var(--border-width-thick) solid var(--table-border-color);
 }
-.heavy-border-bottom {
-  border-bottom: var(--heavy-rule-width) solid var(--table-border-color);
+.border-bottom-thick {
+  border-bottom: var(--border-width-thick) solid var(--table-border-color);
 }
-.heavy-border-left {
-  border-left: var(--heavy-rule-width) solid var(--table-border-color);
+.border-left-thick {
+  border-left: var(--border-width-thick) solid var(--table-border-color);
 }
 
-.border-top {
-  border-top: var(--light-rule-width) solid var(--table-border-color);
+.border-top-thin {
+  border-top: var(--border-width-thin) solid var(--table-border-color);
 }
-.border-right {
-  border-right: var(--light-rule-width) solid var(--table-border-color);
+.border-right-thin {
+  border-right: var(--border-width-thin) solid var(--table-border-color);
 }
-.border-bottom {
-  border-bottom: var(--light-rule-width) solid var(--table-border-color);
+.border-bottom-thin {
+  border-bottom: var(--border-width-thin) solid var(--table-border-color);
 }
-.border-left {
-  border-left: var(--light-rule-width) solid var(--table-border-color);
+.border-left-thin {
+  border-left: var(--border-width-thin) solid var(--table-border-color);
 }
 
 /* Table column alignment */

From f48d789df396a2344d2fee75713088163d727ad5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Huertas?= 
Date: Mon, 18 Sep 2023 23:49:58 +0200
Subject: [PATCH 3/6] refactor: replace border width values with variables

---
 style.css | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/style.css b/style.css
index a7664e9..87b94bb 100644
--- a/style.css
+++ b/style.css
@@ -303,8 +303,8 @@ table:not(.borders-custom) {
   border-spacing: 0;
   width: auto;
   max-width: 100%;
-  border-top: 2.27px solid var(--table-border-color);
-  border-bottom: 2.27px solid var(--table-border-color);
+  border-top: var(--border-width-thick) solid var(--table-border-color);
+  border-bottom: var(--border-width-thick) solid var(--table-border-color);
   /* display: block; */
   overflow-x: auto; /* does not work because element is not block */
   /* white-space: nowrap; */
@@ -312,19 +312,19 @@ table:not(.borders-custom) {
 }
 /* add bottom border on column table headings  */
 table:not(.borders-custom) tr > th[scope='col'] {
-  border-bottom: 1.36px solid var(--table-border-color);
+  border-bottom: var(--border-width-thin) solid var(--table-border-color);
 }
 /* add right border on row table headings  */
 table:not(.borders-custom) tr > th[scope='row'] {
-  border-right: 1.36px solid var(--table-border-color);
+  border-right: var(--border-width-thin) solid var(--table-border-color);
 }
 table:not(.borders-custom) > tbody > tr:first-child > td,
 table:not(.borders-custom) > tbody > tr:first-child > th {
-  border-top: 1.36px solid var(--table-border-color);
+  border-top: var(--border-width-thin) solid var(--table-border-color);
 }
 table:not(.borders-custom) > tbody > tr:last-child > td,
 table:not(.borders-custom) > tbody > tr:last-child > th {
-  border-bottom: 1.36px solid var(--table-border-color);
+  border-bottom: var(--border-width-thin) solid var(--table-border-color);
 }
 
 th,

From 15cee77f6dde2ed8d953b46f99efa4ddd75bc9ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Huertas?= 
Date: Tue, 19 Sep 2023 00:05:43 +0200
Subject: [PATCH 4/6] fix: corrects formatting, clean up comments

---
 index.html | 89 +++++++++++++++++++++++++++---------------------------
 style.css  |  2 +-
 2 files changed, 45 insertions(+), 46 deletions(-)

diff --git a/index.html b/index.html
index 1b4a9fd..6aac0f8 100644
--- a/index.html
+++ b/index.html
@@ -550,51 +550,50 @@ 
    Tables
    
                 
-          
-            
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-            
-          
-        
+        
+          
+            
+            
+            
+            
+          
+          
+            
+            
+            
+            
+          
+          
+            
+            
+            
+            
+          
+          
+            
+            
+            
+            
+          
+          
+            
+            
+            
+            
+          
+          
+            
+            
+            
+            
+          
+          
+            
+            
+            
+            
+          
+        
    
         Close approaches to the Earth by NEOs
         
    
             CA Date
             Object Name
             DiameterDist. Min. (LD)
           
    
         
    2023-Jul-102018 NW7.3m-16m0.287
    2023-Jul-102023 LN145m-00m17.813
    2023-Jul-112023 MD236m-80m5.570
    2023-Jul-112023 NE32m-70m11.253
    2023-Jul-112023 MQ128m-62m10.716
    2023-Jul-122023 OM20m-46m7.628
    2023-Jul-122018 UY190m-420m7.412
    2023-Jul-102018 NW7.3m-16m0.287
    2023-Jul-102023 LN145m-00m17.813
    2023-Jul-112023 MD236m-80m5.570
    2023-Jul-112023 NE32m-70m11.253
    2023-Jul-112023 MQ128m-62m10.716
    2023-Jul-122023 OM20m-46m7.628
    2023-Jul-122018 UY190m-420m7.412
    
       
    
 
       
    Images
    
diff --git a/style.css b/style.css
index 87b94bb..bac032b 100644
--- a/style.css
+++ b/style.css
@@ -365,7 +365,7 @@ table.borders-custom {
   border-spacing: 0;
   width: auto;
   max-width: 100%;
-  overflow-x: auto; /* does not work because element is not block */
+  overflow-x: auto;
   counter-increment: caption;
 }
 

From d9cb53dc6a10e521c4d7ff37235da9a77a4a7927 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Huertas?= 
Date: Wed, 20 Sep 2023 22:53:44 +0200
Subject: [PATCH 5/6] fix: rename column aligment CSS classes for tables

---
 index.html | 13 +++++-----
 style.css  | 72 +++++++++++++++++++++++++++---------------------------
 2 files changed, 43 insertions(+), 42 deletions(-)

diff --git a/index.html b/index.html
index 6aac0f8..f8b4765 100644
--- a/index.html
+++ b/index.html
@@ -231,11 +231,11 @@ 
    Custom table borders
    
       
    Table column alignment
    
       
    
         For each column of the table, there is one class for left, center or right
-        alignment, up to 12 columns: l1-l12, c1-c12,
-        r1-r12. For example, a table with 3 columns using the following
-        classes
+        alignment, up to 12 columns: col-n-l, col-n-c,
+        col-n-r, n=1, ...,12. For example, a table with 3 columns
+        using the following classes
       
    
-      
    <table class="l1 c2 r3">
+      
    <table class="col-1-l col-2-c col-3-r">
   <tr>
     <td>...</td><td>...</td><td>...</td>
   </tr>
@@ -476,7 +476,8 @@ 
    Tables
    
         
       
 
-      
+      
    @@ -540,7 +541,7 @@ 
    Tables
    
         Example table with custom borders and aligment
         
           

         
       
    
 
-      
+      
    
diff --git a/style.css b/style.css
index bac032b..39b159e 100644
--- a/style.css
+++ b/style.css
@@ -396,46 +396,46 @@ table.borders-custom {
 }
 
 /* Table column alignment */
-.l1 tr > :nth-child(1),
-.l2 tr > :nth-child(2),
-.l3 tr > :nth-child(3),
-.l4 tr > :nth-child(4),
-.l5 tr > :nth-child(5),
-.l6 tr > :nth-child(6),
-.l7 tr > :nth-child(7),
-.l8 tr > :nth-child(8),
-.l9 tr > :nth-child(9),
-.l10 tr > :nth-child(10),
-.l11 tr > :nth-child(11),
-.l12 tr > :nth-child(12) {
+.col-1-l tr > :nth-child(1),
+.col-2-l tr > :nth-child(2),
+.col-3-l tr > :nth-child(3),
+.col-4-l tr > :nth-child(4),
+.col-5-l tr > :nth-child(5),
+.col-6-l tr > :nth-child(6),
+.col-7-l tr > :nth-child(7),
+.col-8-l tr > :nth-child(8),
+.col-9-l tr > :nth-child(9),
+.col-10-l tr > :nth-child(10),
+.col-11-l tr > :nth-child(11),
+.col-12-l tr > :nth-child(12) {
   text-align: left;
 }
-.c1 tr > :nth-child(1),
-.c2 tr > :nth-child(2),
-.c3 tr > :nth-child(3),
-.c4 tr > :nth-child(4),
-.c5 tr > :nth-child(5),
-.c6 tr > :nth-child(6),
-.c7 tr > :nth-child(7),
-.c8 tr > :nth-child(8),
-.c9 tr > :nth-child(9),
-.c10 tr > :nth-child(10),
-.c11 tr > :nth-child(11),
-.c12 tr > :nth-child(12) {
+.col-1-c tr > :nth-child(1),
+.col-2-c tr > :nth-child(2),
+.col-3-c tr > :nth-child(3),
+.col-4-c tr > :nth-child(4),
+.col-5-c tr > :nth-child(5),
+.col-6-c tr > :nth-child(6),
+.col-7-c tr > :nth-child(7),
+.col-8-c tr > :nth-child(8),
+.col-9-c tr > :nth-child(9),
+.col-10-c tr > :nth-child(10),
+.col-11-c tr > :nth-child(11),
+.col-12-c tr > :nth-child(12) {
   text-align: center;
 }
-.r1 tr > :nth-child(1),
-.r2 tr > :nth-child(2),
-.r3 tr > :nth-child(3),
-.r4 tr > :nth-child(4),
-.r5 tr > :nth-child(5),
-.r6 tr > :nth-child(6),
-.r7 tr > :nth-child(7),
-.r8 tr > :nth-child(8),
-.r9 tr > :nth-child(9),
-.r10 tr > :nth-child(10),
-.r11 tr > :nth-child(11),
-.r12 tr > :nth-child(12) {
+.col-1-r tr > :nth-child(1),
+.col-2-r tr > :nth-child(2),
+.col-3-r tr > :nth-child(3),
+.col-4-r tr > :nth-child(4),
+.col-5-r tr > :nth-child(5),
+.col-6-r tr > :nth-child(6),
+.col-7-r tr > :nth-child(7),
+.col-8-r tr > :nth-child(8),
+.col-9-r tr > :nth-child(9),
+.col-10-r tr > :nth-child(10),
+.col-11-r tr > :nth-child(11),
+.col-12-r tr > :nth-child(12) {
   text-align: right;
 }
 

From 0e72d64e552a8ce5d6a43b485ffaee1136ab442f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Huertas?= 
Date: Wed, 20 Sep 2023 23:52:52 +0200
Subject: [PATCH 6/6] fix: reformat De Morgan's truth table

---
 index.html | 34 +++++++++++++++-------------------
 1 file changed, 15 insertions(+), 19 deletions(-)

diff --git a/index.html b/index.html
index f8b4765..e72f5dc 100644
--- a/index.html
+++ b/index.html
@@ -480,18 +480,19 @@ 
    Tables
    
         col-7-c col-8-c">
             +          +          -          -          -          
+        
+          
+        
-          
-          
+          
@@ -501,7 +502,6 @@ 
    Tables
    
-          
@@ -509,17 +509,15 @@ 
    Tables
    
-          
-          
-          
+          
+          
-          
-          
-          
+          
+          
@@ -527,17 +525,15 @@ 
    Tables
    
-          
-          
-          
+          
+          
-        
+        
-          
-          
-          
+          
+          
    
         Close approaches to the Earth by NEOs
         
           
    Example table with custom borders and aligment
         

           
           
           

           
           



         
    De Morgan's Law: $\lnot P \lor \lnot Q \iff \lnot (P \land Q)$
    
         
    DeMorgan's LawTRUTH TABLE
         
    
         
    
           $P$
           $P \land Q$
           $\lnot P \lor \lnot Q$
           $\lnot (P \land Q)$$\lnot P \lor \lnot Q \iff \lnot (P \land Q)$
         
    
         
    
           T
           F
           F
           TFFTFF
         
    
         
    
           F
           T
           FTTTTT
         
    
         
    
           F
           T
           F
           FTTTTT
         
    
           F
           T
           FTTTTT