left justifying text

michaeldejournett · michaeldejournett · commit f81c0f62643d · 2025-06-21T07:50:48.000-05:00
diff --git a/webcamstudy/src/components/textTask.html b/webcamstudy/src/components/textTask.html
@@ -17,11 +17,12 @@
         .formatted-text {
             display: flex;
             flex-wrap: wrap;
-            justify-content: center;
-            text-align: justify;
+            justify-content: flex-start; /* Align content left */
+            text-align: left; /* Left-justify text */
             margin: 40px auto;
             max-width: 33%;
             width: 100%;
+            line-height: 2; /* Double spacing */
         }
 
         .word-block {
@@ -30,7 +31,7 @@
         }
 
         .letter {
-            font-size: 18px;
+            font-size: 24px; /* Increased font size */
         }
 
         .space {
@@ -123,38 +124,5 @@ <h3>Please Read the following message</h3>
     </script>
 </body>
 </html>
-<style>
-    .textTask {
-        text-align: center;
-        font-family: Arial, sans-serif;
-    }
-
-    h3 {
-        margin: 40px 25% 0;
-    }
-
-    .formatted-text {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        text-align: justify;
-        margin: 40px auto;
-        max-width: 33%;
-        width: 100%;
-        line-height: 2; /* Double spacing */
-    }
-
-    .word-block {
-        display: inline-flex;
-        flex-wrap: nowrap;
-    }
-
-    .letter {
-        font-size: 24px; /* Increased font size */
-    }
-
-    .space {
-        width: 4px;
-    }
-</style>
+
 
diff --git a/webcamstudy/src/components/textTask2.html b/webcamstudy/src/components/textTask2.html
@@ -17,11 +17,12 @@
         .formatted-text {
             display: flex;
             flex-wrap: wrap;
-            justify-content: center;
-            text-align: justify;
+            justify-content: flex-start; /* Align content left */
+            text-align: left; /* Left-justify text */
             margin: 40px auto;
             max-width: 33%;
             width: 100%;
+            line-height: 2; /* Double spacing */
         }
 
         .word-block {
@@ -30,13 +31,14 @@
         }
 
         .letter {
-            font-size: 18px;
+            font-size: 24px; /* Increased font size */
         }
 
         .space {
             width: 4px;
         }
     </style>
+    
 </head>
 <body>
     <div class="textTask">
@@ -99,37 +101,3 @@ <h3>Please Read the following message</h3>
     </script>
 </body>
 </html>
-<style>
-    .textTask {
-        text-align: center;
-        font-family: Arial, sans-serif;
-    }
-
-    h3 {
-        margin: 40px 25% 0;
-    }
-
-    .formatted-text {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        text-align: justify;
-        margin: 40px auto;
-        max-width: 33%;
-        width: 100%;
-        line-height: 2; /* Double spacing */
-    }
-
-    .word-block {
-        display: inline-flex;
-        flex-wrap: nowrap;
-    }
-
-    .letter {
-        font-size: 24px; /* Increased font size */
-    }
-
-    .space {
-        width: 4px;
-    }
-</style>
diff --git a/webcamstudy/src/components/textTask3.html b/webcamstudy/src/components/textTask3.html
@@ -9,31 +9,31 @@
             text-align: center;
             font-family: Arial, sans-serif;
         }
-    
+
         h3 {
             margin: 40px 25% 0;
         }
-    
+
         .formatted-text {
             display: flex;
             flex-wrap: wrap;
-            justify-content: center;
-            text-align: justify;
+            justify-content: flex-start; /* Align content left */
+            text-align: left; /* Left-justify text */
             margin: 40px auto;
             max-width: 33%;
             width: 100%;
             line-height: 2; /* Double spacing */
         }
-    
+
         .word-block {
             display: inline-flex;
             flex-wrap: nowrap;
         }
-    
+
         .letter {
             font-size: 24px; /* Increased font size */
         }
-    
+
         .space {
             width: 4px;
         }
