Rewrite the vertical text support in SubtitleWebView

The attempt in <unknown commit> was hacky and incomplete.

PiperOrigin-RevId: 304356038

library/ui/src/main/java/com/google/android/exoplayer2/ui/SubtitleWebView.java

@@ -167,45 +167,39 @@ import java.util.List;
         .append("\">");
 
     for (int i = 0; i < cues.size(); i++) {
-      float horizontalPositionPercent;
-      int horizontalTranslatePercent;
       Cue cue = cues.get(i);
-      if (cue.position != Cue.DIMEN_UNSET) {
-        horizontalPositionPercent = cue.position * 100;
-        horizontalTranslatePercent = translatePercentFromAnchorType(cue.positionAnchor);
-      } else {
-        horizontalPositionPercent = 50;
-        horizontalTranslatePercent = -50;
-      }
+      float positionPercent = (cue.position != Cue.DIMEN_UNSET) ? (cue.position * 100) : 50;
+      int positionAnchorTranslatePercent = anchorTypeToTranslatePercent(cue.positionAnchor);
 
-      float verticalPositionPercent;
-      int verticalTranslatePercent;
+      float linePercent;
+      int lineTranslatePercent;
       if (cue.line != Cue.DIMEN_UNSET) {
-        verticalTranslatePercent = translatePercentFromAnchorType(cue.lineAnchor);
         switch (cue.lineType) {
-          case Cue.LINE_TYPE_FRACTION:
-            verticalPositionPercent = cue.line * 100;
-            break;
           case Cue.LINE_TYPE_NUMBER:
             if (cue.line >= 0) {
-              verticalPositionPercent = 0;
-              verticalTranslatePercent += Math.round(cue.line) * 100;
+              linePercent = 0;
+              lineTranslatePercent = Math.round(cue.line) * 100;
             } else {
-              verticalPositionPercent = 100;
-              verticalTranslatePercent += Math.round(cue.line + 1) * 100;
+              linePercent = 100;
+              lineTranslatePercent = Math.round(cue.line + 1) * 100;
             }
             break;
+          case Cue.LINE_TYPE_FRACTION:
           case Cue.TYPE_UNSET:
           default:
-            verticalPositionPercent = 0;
-            break;
+            linePercent = cue.line * 100;
+            lineTranslatePercent = 0;
         }
       } else {
-        verticalPositionPercent = 100;
-        verticalTranslatePercent = -100;
+        linePercent = 100;
+        lineTranslatePercent = 0;
       }
+      int lineAnchorTranslatePercent =
+          cue.verticalType == Cue.VERTICAL_TYPE_RL
+              ? -anchorTypeToTranslatePercent(cue.lineAnchor)
+              : anchorTypeToTranslatePercent(cue.lineAnchor);
 
-      String width =
+      String size =
           cue.size != Cue.DIMEN_UNSET
               ? Util.formatInvariant("%.2f%%", cue.size * 100)
               : "fit-content";
@@ -214,31 +208,53 @@ import java.util.List;
 
       String writingMode = convertVerticalTypeToCss(cue.verticalType);
 
-      // All measurements are done orthogonally for vertical text (i.e. from left of screen instead
-      // of top, or vice versa). So flip the position & translation values.
+      String positionProperty;
+      String lineProperty;
+      switch (cue.verticalType) {
+        case Cue.VERTICAL_TYPE_LR:
+          lineProperty = "left";
+          positionProperty = "top";
+          break;
+        case Cue.VERTICAL_TYPE_RL:
+          lineProperty = "right";
+          positionProperty = "top";
+          break;
+        case Cue.TYPE_UNSET:
+        default:
+          lineProperty = "top";
+          positionProperty = "left";
+      }
+
+      String sizeProperty;
+      int horizontalTranslatePercent;
+      int verticalTranslatePercent;
       if (cue.verticalType == Cue.VERTICAL_TYPE_LR || cue.verticalType == Cue.VERTICAL_TYPE_RL) {
-        float tmpFloat = horizontalPositionPercent;
-        horizontalPositionPercent = verticalPositionPercent;
-        verticalPositionPercent = tmpFloat;
-        int tmpInt = horizontalTranslatePercent;
-        horizontalTranslatePercent = verticalTranslatePercent;
-        verticalTranslatePercent = tmpInt;
+        sizeProperty = "height";
+        horizontalTranslatePercent = lineTranslatePercent + lineAnchorTranslatePercent;
+        verticalTranslatePercent = positionAnchorTranslatePercent;
+      } else {
+        sizeProperty = "width";
+        horizontalTranslatePercent = positionAnchorTranslatePercent;
+        verticalTranslatePercent = lineTranslatePercent + lineAnchorTranslatePercent;
       }
 
       html.append(
               Util.formatInvariant(
                   "<div style=\""
-                      + "position:relative;"
-                      + "left:%.2f%%;"
-                      + "top:%.2f%%;"
-                      + "width:%s;"
+                      + "position:absolute;"
+                      + "%s:%.2f%%;"
+                      + "%s:%.2f%%;"
+                      + "%s:%s;"
                       + "text-align:%s;"
                       + "writing-mode:%s;"
                       + "transform:translate(%s%%,%s%%);"
                       + "\">",
-                  horizontalPositionPercent,
-                  verticalPositionPercent,
-                  width,
+                  positionProperty,
+                  positionPercent,
+                  lineProperty,
+                  linePercent,
+                  sizeProperty,
+                  size,
                   textAlign,
                   writingMode,
                   horizontalTranslatePercent,
@@ -284,16 +300,24 @@ import java.util.List;
     }
   }
 
-  private static int translatePercentFromAnchorType(@Cue.AnchorType int anchorType) {
+  /**
+   * Converts a {@link Cue.AnchorType} to a percentage for use in a CSS {@code transform:
+   * translate(x,y)} function.
+   *
+   * <p>We use {@code position: absolute} and always use the same CSS positioning property (top,
+   * bottom, left, right) regardless of the anchor type. The anchor is effectively 'moved' by using
+   * a CSS {@code translate(x,y)} operation on the value returned from this function.
+   */
+  private static int anchorTypeToTranslatePercent(@Cue.AnchorType int anchorType) {
     switch (anchorType) {
-      case Cue.TYPE_UNSET:
-      case Cue.ANCHOR_TYPE_START:
-        return 0;
-      case Cue.ANCHOR_TYPE_MIDDLE:
-        return -50;
       case Cue.ANCHOR_TYPE_END:
         return -100;
+      case Cue.ANCHOR_TYPE_MIDDLE:
+        return -50;
+      case Cue.ANCHOR_TYPE_START:
+      case Cue.TYPE_UNSET:
+      default:
+        return 0;
     }
-    throw new IllegalArgumentException();
   }
 }