How Cube’s Inline Text Revolutionizes Mobile UI Rendering

Introduction

Alipay client needs dynamic updates; the Cube engine originated from native page dynamic requirements and evolved into a lightweight mini‑program solution. Cube mini‑programs are small, fast‑starting, low‑memory and use a custom rendering engine that supports a subset of CSS.

What is Inline Text?

Inline Text is a feature that enables fine‑grained text layout and styling similar to web browsers. Cube uses two layout engines: Yoga for cards and Flow Layout for mini‑programs. Flow Layout supports CSS display:block and other inline styles.

Cube rendering flow can be referenced in the “Cube Mini‑Program Technical Interpretation” article.

Layout Engine and Text Rendering

The layout engine receives a DSL that produces a JS bundle and resources, then outputs UI and interaction. Traditional engines rely on platform‑level text objects, causing performance loss and limiting mixed‑text layout. Inline Text removes the platform layer, measuring text width/height directly.

Cube uses Yoga for high‑performance layout and Flow Layout for mini‑programs. Flow Layout supports display:inline, display:inline-block, display:inline-flex, float:left, etc.

Rasterization and Self‑Drawing

Rasterization converts vector glyphs into pixels. Cube’s self‑drawing path measures glyphs with Skia, Harfbuzz, ICU and FreeType, then draws them using low‑level APIs, bypassing OS text layout.

Implementation Details

Inline Text is implemented in two parts: a text layout phase that measures glyph metrics inside Flow Layout, and a text drawing phase that uses platform drawing APIs with a lower‑level interface.

Key classes:

class TextStyle {
    int textColor;
    float textSize;
    int fontWeight;
    int textDecoration;
    int fontStyle;
    TextShadow textShadow;
    float alpha;
    Padding padding;
}
class TextRun {
    int typefaceId;
    int start;
    int end;
    float width;
}
class TextLine {
    String text;
    float originX;
    float originY;
    float ascent;
    TextRun runs[];
}

Performance Gains

By moving text measurement into the layout engine, JNI calls and platform object creation are eliminated, resulting in a noticeable speedup, as shown in benchmark images.

Applications

Inline Text is enabled by default in the Youku OTT platform, reducing page load time to one‑third. It also supports rich CSS features such as float:left, display:inline-block, CJK word‑break handling, font‑family fallback, and @font‑face.

Future Roadmap

Support nested spans (textNest).

Adopt a fully self‑drawn backend (e.g., Skia) for cross‑platform consistency.

Add vertical text layout.

Handle bidirectional scripts such as Arabic.

Expand rich‑text capabilities.

Further optimise long‑text layout time.