How Cube’s Inline Text Engine Boosts Mobile UI Performance and CSS Fidelity

Editor’s note: This is the fifth article in the “Cube Technology Interpretation” series, authored by Ant Group client engineer Hongzu, focusing on the principles and implementation of Inline Text technology.

Alipay’s client requires rapid dynamic updates on both iOS and Android, which traditional package redistribution cannot satisfy, so a dynamic client technology called Cube was created.

Cube originated from the need to dynamically render native pages as “Cube cards”. With the rise of mini‑programs, Cube became a lightweight mini‑program solution that uses a custom rendering engine with a subset of CSS, offering a small footprint, fast startup, and low memory usage.

Inline Text

Inline Text refers to the ability to layout and style text inline, similar to web standards (e.g., display:inline , float:left ). Cube uses two layout engines: Yoga for high‑performance card layouts and Flow Layout for mini‑programs, the latter supporting block‑level flow layout.

Traditional non‑web rendering stacks rely on platform‑level text objects, which incur performance costs from OS API calls and platform‑engine interaction, and limit mixed text‑image layouts and per‑character styling.

Cube replaces the platform layer with direct text measurement and layout, called Inline Text , allowing rich CSS styling, accurate baseline alignment, and near‑identical layout results to browsers.

Implementation Details

Rasterization

Rasterization converts vector graphics into pixel data. Cube’s Inline Text uses rasterization to draw glyphs directly.

Text Self‑Drawing

Instead of delegating layout and rendering to the OS, Cube measures text size in the layout engine and draws it using low‑level APIs, reducing JNI overhead.

Text Layout

Text layout proceeds in two steps: measuring each character’s width/height (using typefaces, glyphs, and font styles) and then arranging characters within lines. Libraries such as Skia, HarfBuzz, ICU, and FreeType are employed for measurement.

class TextStyle {
    int textColor;
    float textSize;
    int fontWeight;
    int textDecoration;
    int fontStyle;
    TextShadow textShadow;
    float alpha;
    Padding padding;
} style;

class TextRun {
    int typefaceId;
    int start;
    int end;
    float width;
};

class TextLine {
    String text;
    float originX;
    float originY;
    float ascent;
    TextRun runs[];
} lines;

Text Drawing

During drawing, Cube creates leaf text nodes that contain a single TextStyle and a list of TextLine objects. Each line holds multiple TextRun entries that reference a typeface ID, allowing direct rendering without extra platform objects.

Package Size

By heavily trimming Skia, HarfBuzz, ICU, and FreeType, Inline Text adds only about 170 KB to the Cube binary, keeping the overall package size around 2.8 MB.

Experience & Application

Rich CSS Styles

After enabling Inline Text, Cube fully supports float:left, display:inline‑block, baseline alignment in flex layouts, and font‑family fallback mechanisms, matching browser behavior.

Examples include mixed‑style text blocks, floated elements, and CJK word‑break handling.

Performance Gains

Eliminating platform‑layer JNI calls and object creation yields a noticeable layout speedup; in a real‑world OTT page, load time dropped to one‑third of the original.

Use Cases

90 % of pages on the Youku OTT platform now enable Inline Text, benefiting from faster layout and richer styling without extra JavaScript.

Future Outlook

Version 2.0 plans include nested span support, a fully Skia‑based backend for consistent cross‑platform rasterization, vertical text layout, bidirectional scripts (e.g., Arabic), more rich‑text features, and further optimization of long‑text layout calculations.

Appendix: Supported Inline Text Styles

Tables and diagrams illustrate which CSS properties are fully supported, partially supported, or unsupported.