feat(css): add vertical-align property support and set the default line-height to 1.2 (#346)

Author: Copilot

src/client/builtin_scene/web_content.cpp

@@ -41,7 +41,7 @@ namespace builtin_scene
       , textDirection(skia::textlayout::TextDirection::kLtr)
       , textHeightBehavior(skia::textlayout::TextHeightBehavior::kAll)
       , textStyle()
-      , lineHeight(1.5f)
+      , lineHeight(1.2f)
       , useFixedLineHeight(false)
       , halfLeading(true)
       , leading(0.0f)
@@ -58,6 +58,7 @@ namespace builtin_scene
       , content_style_()
       , background_color_(1.0f, 1.0f, 1.0f, 0.0f)
       , device_pixel_ratio_(client_cssom::DevicePixelRatio)
+      , texture_pad_(2)
   {
     resetSkSurface(initialWidth, initialHeight);
   }
@@ -227,6 +228,25 @@ namespace builtin_scene
     return texture_;
   }
 
+  glm::vec2 WebContent::measureText(const std::string &text, float max_width) const
+  {
+    auto paragraph_style = paragraphStyle();
+    auto paragraph_builder = skia::textlayout::ParagraphBuilder::make(
+      paragraph_style, TrClientContextPerProcess::Get()->getFontCacheManager());
+    paragraph_builder->pushStyle(paragraph_style.getTextStyle());
+    paragraph_builder->addText(text.c_str(), text.size());
+    paragraph_builder->pop();
+
+    auto paragraph = paragraph_builder->Build();
+    paragraph->layout(max_width > 0
+                        ? max_width + 1.0f // Add a small margin to avoid rounding issues
+                        : numeric_limits<float>::infinity());
+
+    // Use longest line width and height as the constraint space.
+    return glm::vec2(paragraph->getLongestLine() / device_pixel_ratio_,
+                     paragraph->getHeight() / device_pixel_ratio_);
+  }
+
   skia::textlayout::TextStyle WebContent::textStyle() const
   {
     const WebContentTextStyle &sourceTextStyle = content_style_.textStyle;

src/client/builtin_scene/web_content.hpp

@@ -261,6 +261,15 @@ namespace builtin_scene
      */
     std::shared_ptr<Texture> resizeOrInitTexture(TextureAtlas &textureAtlas);
 
+    /**
+     * Measure the size of the given text with current text style.
+     * 
+     * @param text The text to measure.
+     * @param max_width The maximum width of the text, if the text exceeds the width, it will be wrapped.
+     * @returns The size of the text in logical pixels.
+     */
+    glm::vec2 measureText(const std::string &text, float max_width) const;
+
     inline void setEnabled(bool enabled)
     {
       enabled_ = enabled;

src/client/cssom/computed_style.cpp

@@ -555,6 +555,8 @@ namespace client_cssom
       text_align_ = Parse::ParseSingleValue<values::computed::TextAlign>(resolvedValue);
     else if (name == "direction")
       text_direction_ = Parse::ParseSingleValue<values::computed::Direction>(resolvedValue);
+    else if (name == "vertical-align")
+      vertical_align_ = Parse::ParseSingleValue<values::computed::VerticalAlign>(resolvedValue);
 
     // Color properties
     else if (name == "color")

src/client/cssom/computed_style.hpp

@@ -377,6 +377,10 @@ namespace client_cssom
     {
       return text_direction_;
     }
+    inline const values::computed::VerticalAlign &verticalAlign() const
+    {
+      return vertical_align_;
+    }
 
     inline const values::computed::Color &color() const
     {
@@ -571,6 +575,7 @@ namespace client_cssom
     // Text
     values::computed::TextAlign text_align_;
     values::computed::Direction text_direction_;
+    values::computed::VerticalAlign vertical_align_;
 
     // Colors
     values::computed::Color color_ = values::computed::Color::Black();

src/client/cssom/units.hpp

@@ -10,7 +10,7 @@ namespace client_cssom
   constexpr const int PPI = 92;
 
   // The device pixel ratio.
-  constexpr const float DevicePixelRatio = 2.0f;
+  constexpr const float DevicePixelRatio = 1.0f;
 
   // The screen width and height.
   constexpr const int ScreenWidth = 1920;

src/client/cssom/values/computed/text.hpp

@@ -75,4 +75,42 @@ namespace client_cssom::values::computed
                : skia::textlayout::TextDirection::kRtl;
     }
   };
+
+  class VerticalAlign : public specified::VerticalAlign
+  {
+    using specified::VerticalAlign::VerticalAlign;
+
+  public:
+    VerticalAlign(const specified::VerticalAlign &other)
+        : specified::VerticalAlign(other)
+    {
+    }
+
+    // Check if this is a baseline alignment
+    bool isBaseline() const
+    {
+      return tag() == Tag::kBaseline;
+    }
+
+    // Check if this is a keyword alignment (not length/percentage)
+    bool isKeyword() const
+    {
+      return tag() != Tag::kLength && tag() != Tag::kPercentage;
+    }
+
+    // Get the offset in pixels for length/percentage values
+    // For percentage, lineHeight should be provided
+    float getOffset(float lineHeight = 0.0f) const
+    {
+      switch (tag())
+      {
+      case Tag::kLength:
+        return value();
+      case Tag::kPercentage:
+        return (value() / 100.0f) * lineHeight;
+      default:
+        return 0.0f; // Keywords don't have numeric offsets
+      }
+    }
+  };
 }

src/client/cssom/values/specified/text.hpp

@@ -1,6 +1,9 @@
 #pragma once
 
 #include <cstdint>
+#include <string>
+#include <stdexcept>
+#include <cassert>
 #include <client/cssom/style_traits.hpp>
 
 namespace client_cssom::values::specified
@@ -159,4 +162,178 @@ namespace client_cssom::values::specified
   protected:
     Tag tag_ = Tag::kLTR;
   };
+
+  class VerticalAlign : public Parse,
+                        public ToCss
+  {
+    friend class Parse;
+
+  public:
+    enum Tag : uint8_t
+    {
+      kBaseline,
+      kSub,
+      kSuper,
+      kTop,
+      kTextTop,
+      kMiddle,
+      kBottom,
+      kTextBottom,
+      kLength,     // Custom length value
+      kPercentage, // Percentage value
+    };
+
+  public:
+    static VerticalAlign Baseline()
+    {
+      return VerticalAlign(Tag::kBaseline);
+    }
+    static VerticalAlign Sub()
+    {
+      return VerticalAlign(Tag::kSub);
+    }
+    static VerticalAlign Super()
+    {
+      return VerticalAlign(Tag::kSuper);
+    }
+    static VerticalAlign Top()
+    {
+      return VerticalAlign(Tag::kTop);
+    }
+    static VerticalAlign TextTop()
+    {
+      return VerticalAlign(Tag::kTextTop);
+    }
+    static VerticalAlign Middle()
+    {
+      return VerticalAlign(Tag::kMiddle);
+    }
+    static VerticalAlign Bottom()
+    {
+      return VerticalAlign(Tag::kBottom);
+    }
+    static VerticalAlign TextBottom()
+    {
+      return VerticalAlign(Tag::kTextBottom);
+    }
+    static VerticalAlign Length(float value)
+    {
+      return VerticalAlign(Tag::kLength, value);
+    }
+    static VerticalAlign Percentage(float value)
+    {
+      return VerticalAlign(Tag::kPercentage, value);
+    }
+
+  public:
+    VerticalAlign()
+        : tag_(Tag::kBaseline)
+        , value_(0.0f)
+    {
+    }
+
+  protected:
+    VerticalAlign(Tag tag, float value = 0.0f)
+        : tag_(tag)
+        , value_(value)
+    {
+    }
+
+  public:
+    Tag tag() const
+    {
+      return tag_;
+    }
+    float value() const
+    {
+      return value_;
+    }
+    std::string toCss() const override
+    {
+      switch (tag_)
+      {
+      case Tag::kBaseline:
+        return "baseline";
+      case Tag::kSub:
+        return "sub";
+      case Tag::kSuper:
+        return "super";
+      case Tag::kTop:
+        return "top";
+      case Tag::kTextTop:
+        return "text-top";
+      case Tag::kMiddle:
+        return "middle";
+      case Tag::kBottom:
+        return "bottom";
+      case Tag::kTextBottom:
+        return "text-bottom";
+      case Tag::kLength:
+        return std::to_string(value_) + "px";
+      case Tag::kPercentage:
+        return std::to_string(value_) + "%";
+      }
+      assert(false && "Invalid tag.");
+    }
+
+  private:
+    bool parse(const std::string &input) override
+    {
+      if (input == "baseline")
+        tag_ = Tag::kBaseline;
+      else if (input == "sub")
+        tag_ = Tag::kSub;
+      else if (input == "super")
+        tag_ = Tag::kSuper;
+      else if (input == "top")
+        tag_ = Tag::kTop;
+      else if (input == "text-top")
+        tag_ = Tag::kTextTop;
+      else if (input == "middle")
+        tag_ = Tag::kMiddle;
+      else if (input == "bottom")
+        tag_ = Tag::kBottom;
+      else if (input == "text-bottom")
+        tag_ = Tag::kTextBottom;
+      else
+      {
+        // Try to parse as length or percentage
+        if (input.back() == '%')
+        {
+          try
+          {
+            float percentage = std::stof(input.substr(0, input.size() - 1));
+            tag_ = Tag::kPercentage;
+            value_ = percentage;
+          }
+          catch (const std::exception &)
+          {
+            return false;
+          }
+        }
+        else if (input.find("px") != std::string::npos)
+        {
+          try
+          {
+            float length = std::stof(input.substr(0, input.size() - 2));
+            tag_ = Tag::kLength;
+            value_ = length;
+          }
+          catch (const std::exception &)
+          {
+            return false;
+          }
+        }
+        else
+        {
+          return false;
+        }
+      }
+      return true;
+    }
+
+  protected:
+    Tag tag_ = Tag::kBaseline;
+    float value_ = 0.0f;
+  };
 }

src/client/layout/layout_text.cpp

@@ -74,21 +74,8 @@ namespace client_layout
     if (textContent.size() == 0)
       return ConstraintSpace::Zero();
 
-    auto paragraphStyle = webContentComponent->paragraphStyle();
-    auto paragraphBuilder = ParagraphBuilder::make(paragraphStyle,
-                                                   TrClientContextPerProcess::Get()->getFontCacheManager());
-    paragraphBuilder->pushStyle(paragraphStyle.getTextStyle());
-    paragraphBuilder->addText(textContent.c_str(), textContent.size());
-    paragraphBuilder->pop();
-
-    auto paragraph = paragraphBuilder->Build();
-    paragraph->layout(maxWidth > 0
-                        ? maxWidth + 1.0f // Add a small margin to avoid rounding issues
-                        : numeric_limits<float>::infinity());
-
-    // Use longest line width and height as the constraint space.
-    return ConstraintSpace(paragraph->getLongestLine(),
-                           paragraph->getHeight());
+    auto size = webContentComponent->measureText(textContent, maxWidth);
+    return ConstraintSpace(size.x, size.y);
   }
 
   void LayoutText::textDidChange()