fix(text): position glyphs at their fractional coordinates

crates/rustmotion-components/src/avatar_group.rs

@@ -8,7 +8,7 @@ use rustmotion_core::engine::animator::AnimatedProperties;
 use rustmotion_core::engine::layout_pass::BoxLayout;
 use rustmotion_core::engine::renderer::{
     asset_cache, draw_text_with_fallback, emoji_typeface, measure_text_with_fallback,
-    paint_from_hex, typeface_with_fallback,
+    paint_from_hex, subpixel_font, typeface_with_fallback,
 };
 use rustmotion_core::error::RustmotionError;
 use rustmotion_core::schema::TimelineStep;
@@ -167,9 +167,8 @@ impl AvatarGroup {
             let Ok(typeface) = typeface_with_fallback("Inter", font_style) else {
                 return Ok(());
             };
-            let font = skia_safe::Font::from_typeface(typeface, font_size);
-            let emoji_font =
-                emoji_typeface().map(|tf| skia_safe::Font::from_typeface(tf, font_size));
+            let font = subpixel_font(typeface, font_size);
+            let emoji_font = emoji_typeface().map(|tf| subpixel_font(tf, font_size));
 
             let mut text_paint = paint_from_hex("#D1D5DB");
             text_paint.set_anti_alias(true);

crates/rustmotion-components/src/badge.rs

@@ -8,7 +8,7 @@ use rustmotion_core::engine::animator::AnimatedProperties;
 use rustmotion_core::engine::layout_pass::BoxLayout;
 use rustmotion_core::engine::renderer::{
     asset_cache, draw_text_with_fallback, emoji_typeface, fetch_icon_svg,
-    measure_text_with_fallback, paint_from_hex, typeface_with_fallback,
+    measure_text_with_fallback, paint_from_hex, subpixel_font, typeface_with_fallback,
 };
 use rustmotion_core::schema::TimelineStep;
 use rustmotion_core::traits::{PaintCtx, Painter, TimingConfig};
@@ -134,10 +134,7 @@ impl Badge {
         let font_style = skia_safe::FontStyle::normal();
         let family = self.style.font_family.as_deref().unwrap_or("Inter");
         let typeface = typeface_with_fallback(family, font_style).ok()?;
-        Some(skia_safe::Font::from_typeface(
-            typeface,
-            self.resolved_font_size(ctx),
-        ))
+        Some(subpixel_font(typeface, self.resolved_font_size(ctx)))
     }
 }
 
@@ -239,7 +236,7 @@ impl Badge {
             return;
         };
         let font_size = self.resolved_font_size(ctx);
-        let emoji_font = emoji_typeface().map(|tf| skia_safe::Font::from_typeface(tf, font_size));
+        let emoji_font = emoji_typeface().map(|tf| subpixel_font(tf, font_size));
         let mut text_paint = paint_from_hex(text_color);
         text_paint.set_anti_alias(true);
 
@@ -298,9 +295,8 @@ impl Badge {
             else {
                 return;
             };
-            let count_font = skia_safe::Font::from_typeface(count_typeface, count_fs);
-            let count_emoji =
-                emoji_typeface().map(|tf| skia_safe::Font::from_typeface(tf, count_fs));
+            let count_font = subpixel_font(count_typeface, count_fs);
+            let count_emoji = emoji_typeface().map(|tf| subpixel_font(tf, count_fs));
 
             let count_w = measure_text_with_fallback(&count_text, &count_font, &count_emoji, 0.0);
             let badge_pad = count_fs * 0.4;

crates/rustmotion-components/src/box_builder.rs

@@ -1289,7 +1289,7 @@ fn apply_default_display(component: &Component, css: &mut CssStyle) {
 
 fn measure_text_line_width(text: &str, font_size: f32, family: &str, bold: bool) -> f32 {
     use rustmotion_core::engine::renderer::{
-        emoji_typeface, measure_text_with_fallback, typeface_with_fallback,
+        emoji_typeface, measure_text_with_fallback, subpixel_font, typeface_with_fallback,
     };
     let style = if bold {
         skia_safe::FontStyle::bold()
@@ -1299,8 +1299,8 @@ fn measure_text_line_width(text: &str, font_size: f32, family: &str, bold: bool)
     let Ok(typeface) = typeface_with_fallback(family, style) else {
         return 0.0;
     };
-    let font = skia_safe::Font::from_typeface(typeface, font_size);
-    let emoji_font = emoji_typeface().map(|tf| skia_safe::Font::from_typeface(tf, font_size));
+    let font = subpixel_font(typeface, font_size);
+    let emoji_font = emoji_typeface().map(|tf| subpixel_font(tf, font_size));
     measure_text_with_fallback(text, &font, &emoji_font, 0.0)
 }
 

crates/rustmotion-components/src/callout.rs

@@ -6,7 +6,9 @@ use skia_safe::{Canvas, PaintStyle, Path, PathBuilder, RRect, Rect};
 
 use rustmotion_core::engine::animator::AnimatedProperties;
 use rustmotion_core::engine::layout_pass::BoxLayout;
-use rustmotion_core::engine::renderer::{paint_from_hex, typeface_with_fallback, wrap_text};
+use rustmotion_core::engine::renderer::{
+    paint_from_hex, subpixel_font, typeface_with_fallback, wrap_text,
+};
 use rustmotion_core::schema::TimelineStep;
 use rustmotion_core::traits::{PaintCtx, Painter, TimingConfig};
 
@@ -157,7 +159,7 @@ impl Callout {
         let family = self.style.font_family.as_deref().unwrap_or("Inter");
         let typeface = typeface_with_fallback(family, font_style)?;
 
-        let font = skia_safe::Font::from_typeface(typeface, font_size);
+        let font = subpixel_font(typeface, font_size);
         let (_, metrics) = font.metrics();
         let ascent = -metrics.ascent;
         let line_height = font_size * 1.4;

crates/rustmotion-components/src/caption.rs

@@ -1,6 +1,6 @@
 use schemars::JsonSchema;
 use serde::{Deserialize, Serialize};
-use skia_safe::{Canvas, Font, FontStyle, Rect};
+use skia_safe::{Canvas, FontStyle, Rect};
 
 use rustmotion_core::css::style::{
     FontStyle as CssFontStyle, FontWeight as CssFontWeight, FontWeightKw,
@@ -12,7 +12,7 @@ use rustmotion_core::engine::animator::AnimatedProperties;
 use rustmotion_core::engine::layout_pass::BoxLayout;
 use rustmotion_core::engine::renderer::{
     draw_text_with_fallback, emoji_typeface, measure_text_with_fallback, paint_from_hex,
-    typeface_with_fallback,
+    subpixel_font, typeface_with_fallback,
 };
 use rustmotion_core::schema::{CaptionStyle, CaptionWord, TimelineStep};
 use rustmotion_core::traits::{PaintCtx, Painter, TimingConfig};
@@ -77,8 +77,8 @@ impl Caption {
             return;
         };
 
-        let font = Font::from_typeface(typeface, font_size);
-        let emoji_font = emoji_typeface().map(|tf| Font::from_typeface(tf, font_size));
+        let font = subpixel_font(typeface, font_size);
+        let emoji_font = emoji_typeface().map(|tf| subpixel_font(tf, font_size));
 
         let top_offset = font_size * 1.2;
         canvas.save();

crates/rustmotion-components/src/chart/axes.rs

@@ -2,7 +2,7 @@ use skia_safe::{Canvas, PaintStyle};
 
 use rustmotion_core::engine::renderer::{
     draw_text_with_fallback, emoji_typeface, measure_text_with_fallback, paint_from_hex,
-    parse_hex_color,
+    parse_hex_color, subpixel_font,
 };
 
 use super::Chart;
@@ -45,8 +45,7 @@ impl Chart {
         let Some(font) = self.make_label_font() else {
             return;
         };
-        let emoji_font =
-            emoji_typeface().map(|tf| skia_safe::Font::from_typeface(tf, self.label_font_size));
+        let emoji_font = emoji_typeface().map(|tf| subpixel_font(tf, self.label_font_size));
         let (_, metrics) = font.metrics();
         let ascent = -metrics.ascent;
 
@@ -133,8 +132,7 @@ impl Chart {
         let Some(font) = self.make_label_font() else {
             return;
         };
-        let emoji_font =
-            emoji_typeface().map(|tf| skia_safe::Font::from_typeface(tf, self.label_font_size));
+        let emoji_font = emoji_typeface().map(|tf| subpixel_font(tf, self.label_font_size));
         let (_, metrics) = font.metrics();
         let ascent = -metrics.ascent;
 

crates/rustmotion-components/src/chart/bar.rs

@@ -3,6 +3,7 @@ use skia_safe::{Canvas, PaintStyle, Rect};
 
 use rustmotion_core::engine::renderer::{
     draw_text_with_fallback, emoji_typeface, measure_text_with_fallback, paint_from_hex,
+    subpixel_font,
 };
 
 use super::axes::{contrast_text_color, format_number};
@@ -84,8 +85,7 @@ impl Chart {
         let Some(font) = self.make_label_font() else {
             return Ok(());
         };
-        let emoji_font =
-            emoji_typeface().map(|tf| skia_safe::Font::from_typeface(tf, self.label_font_size));
+        let emoji_font = emoji_typeface().map(|tf| subpixel_font(tf, self.label_font_size));
         let (_, metrics) = font.metrics();
         let ascent = -metrics.ascent;
         let measure = |s: &str| measure_text_with_fallback(s, &font, &emoji_font, 0.0);

crates/rustmotion-components/src/chart/funnel.rs

@@ -3,6 +3,7 @@ use skia_safe::{Canvas, PaintStyle, PathBuilder};
 
 use rustmotion_core::engine::renderer::{
     draw_text_with_fallback, emoji_typeface, measure_text_with_fallback, paint_from_hex,
+    subpixel_font,
 };
 
 use super::axes::contrast_text_color;
@@ -41,8 +42,7 @@ impl Chart {
         let Some(font) = self.make_label_font() else {
             return Ok(());
         };
-        let emoji_font =
-            emoji_typeface().map(|tf| skia_safe::Font::from_typeface(tf, self.label_font_size));
+        let emoji_font = emoji_typeface().map(|tf| subpixel_font(tf, self.label_font_size));
         let (_, metrics) = font.metrics();
         let ascent = -metrics.ascent;
 
@@ -121,8 +121,7 @@ impl Chart {
         let Some(font) = self.make_label_font() else {
             return Ok(());
         };
-        let emoji_font =
-            emoji_typeface().map(|tf| skia_safe::Font::from_typeface(tf, self.label_font_size));
+        let emoji_font = emoji_typeface().map(|tf| subpixel_font(tf, self.label_font_size));
         let (_, metrics) = font.metrics();
         let ascent = -metrics.ascent;
 

crates/rustmotion-components/src/chart/mod.rs

@@ -6,7 +6,7 @@ use skia_safe::Canvas;
 use rustmotion_core::css::CssStyle;
 use rustmotion_core::engine::animator::AnimatedProperties;
 use rustmotion_core::engine::layout_pass::BoxLayout;
-use rustmotion_core::engine::renderer::typeface_with_fallback;
+use rustmotion_core::engine::renderer::{subpixel_font, typeface_with_fallback};
 use rustmotion_core::schema::TimelineStep;
 use rustmotion_core::traits::{PaintCtx, Painter, TimingConfig};
 
@@ -298,10 +298,7 @@ impl Chart {
     pub(super) fn make_label_font(&self) -> Option<skia_safe::Font> {
         let font_style = skia_safe::FontStyle::normal();
         let typeface = typeface_with_fallback("Inter", font_style).ok()?;
-        Some(skia_safe::Font::from_typeface(
-            typeface,
-            self.label_font_size,
-        ))
+        Some(subpixel_font(typeface, self.label_font_size))
     }
 }
 

crates/rustmotion-components/src/chart/radar.rs

@@ -3,6 +3,7 @@ use skia_safe::{Canvas, PaintStyle, PathBuilder};
 
 use rustmotion_core::engine::renderer::{
     draw_text_with_fallback, emoji_typeface, measure_text_with_fallback, paint_from_hex,
+    subpixel_font,
 };
 
 use super::Chart;
@@ -66,8 +67,7 @@ impl Chart {
         let Some(font) = self.make_label_font() else {
             return Ok(());
         };
-        let emoji_font =
-            emoji_typeface().map(|tf| skia_safe::Font::from_typeface(tf, self.label_font_size));
+        let emoji_font = emoji_typeface().map(|tf| subpixel_font(tf, self.label_font_size));
         let (_, metrics) = font.metrics();
         let ascent = -metrics.ascent;
 

crates/rustmotion-components/src/comparison.rs

@@ -7,7 +7,7 @@ use rustmotion_core::engine::animator::AnimatedProperties;
 use rustmotion_core::engine::layout_pass::BoxLayout;
 use rustmotion_core::engine::renderer::{
     draw_text_with_fallback, emoji_typeface, measure_text_with_fallback, paint_from_hex,
-    parse_hex_color, typeface_with_fallback,
+    parse_hex_color, subpixel_font, typeface_with_fallback,
 };
 use rustmotion_core::schema::TimelineStep;
 use rustmotion_core::traits::{PaintCtx, Painter, TimingConfig};
@@ -140,8 +140,8 @@ impl Comparison {
             canvas.restore();
             return;
         };
-        let font = skia_safe::Font::from_typeface(typeface, font_size);
-        let emoji_font = emoji_typeface().map(|tf| skia_safe::Font::from_typeface(tf, font_size));
+        let font = subpixel_font(typeface, font_size);
+        let emoji_font = emoji_typeface().map(|tf| subpixel_font(tf, font_size));
 
         let mut label_paint = paint_from_hex("#FFFFFF");
         label_paint.set_anti_alias(true);

crates/rustmotion-components/src/countdown.rs

@@ -8,7 +8,7 @@ use rustmotion_core::engine::animator::AnimatedProperties;
 use rustmotion_core::engine::layout_pass::BoxLayout;
 use rustmotion_core::engine::renderer::{
     draw_text_with_fallback, emoji_typeface, measure_text_with_fallback, paint_from_hex,
-    parse_hex_color, typeface_with_fallback,
+    parse_hex_color, subpixel_font, typeface_with_fallback,
 };
 use rustmotion_core::schema::TimelineStep;
 use rustmotion_core::traits::{PaintCtx, Painter, TimingConfig};
@@ -288,8 +288,8 @@ impl Countdown {
         let Ok(typeface) = typeface_with_fallback("Inter", font_style) else {
             return;
         };
-        let font = skia_safe::Font::from_typeface(typeface, font_size);
-        let emoji_font = emoji_typeface().map(|tf| skia_safe::Font::from_typeface(tf, font_size));
+        let font = subpixel_font(typeface, font_size);
+        let emoji_font = emoji_typeface().map(|tf| subpixel_font(tf, font_size));
 
         let (box_w, _box_h) = self.digit_box_size();
 

crates/rustmotion-components/src/counter.rs

@@ -1,7 +1,7 @@
 use rustmotion_core::error::Result;
 use schemars::JsonSchema;
 use serde::{Deserialize, Serialize};
-use skia_safe::{Canvas, Font, FontStyle, PaintStyle};
+use skia_safe::{Canvas, FontStyle, PaintStyle};
 
 use rustmotion_core::css::style::{
     FontStyle as CssFontStyle, FontWeight as CssFontWeight, FontWeightKw, TextAlign as CssTextAlign,
@@ -11,7 +11,7 @@ use rustmotion_core::engine::animator::AnimatedProperties;
 use rustmotion_core::engine::layout_pass::BoxLayout;
 use rustmotion_core::engine::renderer::{
     draw_text_with_fallback, emoji_typeface, format_counter_value, measure_text_with_fallback,
-    paint_from_hex, typeface_with_fallback,
+    paint_from_hex, subpixel_font, typeface_with_fallback,
 };
 use rustmotion_core::schema::{
     EasingType, FontStyleType, FontWeight, Stroke, TextAlign, TextShadow, TimelineStep,
@@ -147,8 +147,8 @@ impl Counter {
 
         let typeface = typeface_with_fallback(font_family, skia_font_style)?;
 
-        let font = Font::from_typeface(typeface, font_size);
-        let emoji_font = emoji_typeface().map(|tf| Font::from_typeface(tf, font_size));
+        let font = subpixel_font(typeface, font_size);
+        let emoji_font = emoji_typeface().map(|tf| subpixel_font(tf, font_size));
         let mut paint = paint_from_hex(color);
         paint.set_alpha_f(1.0);
 

crates/rustmotion-components/src/dot_map.rs

@@ -7,7 +7,7 @@ use rustmotion_core::engine::animator::AnimatedProperties;
 use rustmotion_core::engine::layout_pass::BoxLayout;
 use rustmotion_core::engine::renderer::{
     draw_text_with_fallback, emoji_typeface, measure_text_with_fallback, paint_from_hex,
-    typeface_with_fallback,
+    subpixel_font, typeface_with_fallback,
 };
 use rustmotion_core::schema::TimelineStep;
 use rustmotion_core::traits::{PaintCtx, Painter, TimingConfig};
@@ -435,9 +435,8 @@ impl DotMap {
         let Ok(typeface) = typeface_with_fallback("Inter", font_style) else {
             return;
         };
-        let label_font = skia_safe::Font::from_typeface(typeface, label_font_size);
-        let emoji_font =
-            emoji_typeface().map(|tf| skia_safe::Font::from_typeface(tf, label_font_size));
+        let label_font = subpixel_font(typeface, label_font_size);
+        let emoji_font = emoji_typeface().map(|tf| subpixel_font(tf, label_font_size));
 
         for (i, point) in self.points.iter().enumerate() {
             let dot_alpha = if self.animated {
@@ -626,9 +625,8 @@ impl DotMap {
         let Ok(typeface) = typeface_with_fallback("Inter", font_style) else {
             return;
         };
-        let label_font = skia_safe::Font::from_typeface(typeface, label_font_size);
-        let emoji_font =
-            emoji_typeface().map(|tf| skia_safe::Font::from_typeface(tf, label_font_size));
+        let label_font = subpixel_font(typeface, label_font_size);
+        let emoji_font = emoji_typeface().map(|tf| subpixel_font(tf, label_font_size));
 
         for (i, point) in self.points.iter().enumerate() {
             let dot_alpha = if self.animated {

crates/rustmotion-components/src/gauge.rs

@@ -7,7 +7,7 @@ use rustmotion_core::engine::animator::AnimatedProperties;
 use rustmotion_core::engine::layout_pass::BoxLayout;
 use rustmotion_core::engine::renderer::{
     draw_text_with_fallback, emoji_typeface, measure_text_with_fallback, paint_from_hex,
-    typeface_with_fallback,
+    subpixel_font, typeface_with_fallback,
 };
 use rustmotion_core::schema::TimelineStep;
 use rustmotion_core::traits::{PaintCtx, Painter, TimingConfig};
@@ -150,9 +150,8 @@ impl Gauge {
             let Ok(typeface) = typeface_with_fallback("Inter", font_style) else {
                 return;
             };
-            let font = skia_safe::Font::from_typeface(typeface, font_size);
-            let emoji_font =
-                emoji_typeface().map(|tf| skia_safe::Font::from_typeface(tf, font_size));
+            let font = subpixel_font(typeface, font_size);
+            let emoji_font = emoji_typeface().map(|tf| subpixel_font(tf, font_size));
 
             let mut text_paint = paint_from_hex(&self.fill_color);
             text_paint.set_anti_alias(true);
@@ -180,9 +179,8 @@ impl Gauge {
             let Ok(typeface) = typeface_with_fallback("Inter", font_style) else {
                 return;
             };
-            let font = skia_safe::Font::from_typeface(typeface, font_size);
-            let emoji_font =
-                emoji_typeface().map(|tf| skia_safe::Font::from_typeface(tf, font_size));
+            let font = subpixel_font(typeface, font_size);
+            let emoji_font = emoji_typeface().map(|tf| subpixel_font(tf, font_size));
 
             let mut label_paint = paint_from_hex("#888888");
             label_paint.set_anti_alias(true);