update text layer CSS

app/src/main/assets/viewer.css

@@ -10,16 +10,18 @@ body, canvas, #padding {
 
 .textLayer {
     position: absolute;
+    text-align: initial;
     left: 0;
     top: 0;
     right: 0;
     bottom: 0;
     overflow: hidden;
     opacity: 0.2;
-    line-height: 1.0;
+    line-height: 1;
 }
 
-.textLayer > span {
+.textLayer span,
+.textLayer br {
     color: transparent;
     position: absolute;
     white-space: pre;
@@ -30,41 +32,46 @@ body, canvas, #padding {
 .textLayer .highlight {
     margin: -1px;
     padding: 1px;
-
-    background-color: rgb(180, 0, 170);
+    background-color: rgba(180, 0, 170, 1);
     border-radius: 4px;
 }
 
+.textLayer .highlight.appended {
+    position: initial;
+}
+
 .textLayer .highlight.begin {
-    border-radius: 4px 0px 0px 4px;
+    border-radius: 4px 0 0 4px;
 }
 
 .textLayer .highlight.end {
-    border-radius: 0px 4px 4px 0px;
+    border-radius: 0 4px 4px 0;
 }
 
 .textLayer .highlight.middle {
-    border-radius: 0px;
+    border-radius: 0;
 }
 
 .textLayer .highlight.selected {
-    background-color: rgb(0, 100, 0);
+    background-color: rgba(0, 100, 0, 1);
 }
 
-.textLayer ::selection { background: rgb(0,0,255); }
+.textLayer ::selection {
+    background: rgba(0, 0, 255, 1);
+}
 
 .textLayer .endOfContent {
     display: block;
     position: absolute;
-    left: 0px;
+    left: 0;
     top: 100%;
-    right: 0px;
-    bottom: 0px;
+    right: 0;
+    bottom: 0;
     z-index: -1;
     cursor: default;
     user-select: none;
 }
 
 .textLayer .endOfContent.active {
-    top: 0px;
+    top: 0;
 }