Kinda working line height.

bevy_kayak_ui/src/render/unified/font/extract.rs

@@ -20,17 +20,27 @@ pub fn extract_texts(
     _dpi: f32,
 ) -> Vec<ExtractQuadBundle> {
     let mut extracted_texts = Vec::new();
-    let (background_color, layout, font_size, content, font, parent_size) = match render_primitive {
-        RenderPrimitive::Text {
-            color,
-            layout,
-            size,
-            content,
-            font,
-            parent_size,
-        } => (color, layout, *size, content, font, parent_size),
-        _ => panic!(""),
-    };
+    let (background_color, layout, font_size, content, font, parent_size, line_height) =
+        match render_primitive {
+            RenderPrimitive::Text {
+                color,
+                layout,
+                size,
+                content,
+                font,
+                parent_size,
+                line_height,
+            } => (
+                color,
+                layout,
+                *size,
+                content,
+                font,
+                parent_size,
+                line_height,
+            ),
+            _ => panic!(""),
+        };
 
     let font_handle = font_mapping.get_handle(font.clone()).unwrap();
     let font = fonts.get(font_handle.clone());
@@ -41,15 +51,13 @@ pub fn extract_texts(
 
     let font = font.unwrap();
 
-    let line_height = font_size * 1.2;
-
     let chars_layouts = font.get_layout(
         CoordinateSystem::PositiveYDown,
         Alignment::Start,
-        (layout.posx, layout.posy + line_height),
+        (layout.posx, layout.posy + font_size),
         (parent_size.0, parent_size.1),
         content,
-        line_height,
+        *line_height,
         font_size,
     );
 

examples/full_ui.rs

@@ -155,13 +155,13 @@ fn startup(
                         font={main_font_id}
                     />
                     <BlueButton>
-                        <Text styles={Some(text_styles)} size={20.0} content={"Play".to_string()} font={main_font_id} />
+                        <Text styles={Some(text_styles)} line_height={Some(50.0)} size={20.0} content={"Play".to_string()} font={main_font_id} />
                     </BlueButton>
                     <BlueButton styles={Some(options_button_styles)}>
-                        <Text styles={Some(options_button_text_styles)} size={20.0} content={"Options".to_string()} font={main_font_id} />
+                        <Text styles={Some(options_button_text_styles)} line_height={Some(50.0)} size={20.0} content={"Options".to_string()} font={main_font_id} />
                     </BlueButton>
                     <BlueButton styles={Some(options_button_styles)}>
-                        <Text styles={Some(text_styles)} size={20.0} content={"Quit".to_string()} font={main_font_id} />
+                        <Text styles={Some(text_styles)} line_height={Some(50.0)} size={20.0} content={"Quit".to_string()} font={main_font_id} />
                     </BlueButton>
                 </NinePatch>
             </App>

examples/if.rs

@@ -18,18 +18,6 @@ fn Removal(context: &mut KayakContext) {
         left: StyleProp::Value(Units::Stretch(0.1)),
         right: StyleProp::Value(Units::Stretch(0.1)),
         top: StyleProp::Value(Units::Stretch(1.0)),
-        width: StyleProp::Value(Units::Stretch(1.0)),
-        height: StyleProp::Value(Units::Pixels(28.0)),
-        ..Default::default()
-    };
-
-    let button_text_styles = Style {
-        bottom: StyleProp::Value(Units::Stretch(1.0)),
-        left: StyleProp::Value(Units::Stretch(1.0)),
-        right: StyleProp::Value(Units::Stretch(1.0)),
-        top: StyleProp::Value(Units::Stretch(1.0)),
-        width: StyleProp::Value(Units::Pixels(67.0)),
-        height: StyleProp::Value(Units::Pixels(39.0)),
         ..Default::default()
     };
 
@@ -50,7 +38,7 @@ fn Removal(context: &mut KayakContext) {
                     <Text styles={Some(text_styles)} size={32.0} content={"Hello!".to_string()} />
                 </If>
                 <Button on_event={Some(on_event)}>
-                    <Text styles={Some(button_text_styles)} size={24.0} content={"Swap!".to_string()} />
+                    <Text line_height={Some(45.0)} size={24.0} content={"Swap!".to_string()} />
                 </Button>
             </Window>
         </>

kayak_core/src/render_command.rs

@@ -9,9 +9,10 @@ pub enum RenderCommand {
     Quad,
     Text {
         content: String,
-        size: f32,
         font: String,
+        line_height: f32,
         parent_size: (f32, f32),
+        size: f32,
     },
     Image {
         handle: u16,

kayak_core/src/render_primitive.rs

@@ -17,12 +17,13 @@ pub enum RenderPrimitive {
         border_radius: (f32, f32, f32, f32),
     },
     Text {
-        layout: Rect,
         color: Color,
-        size: f32,
         content: String,
         font: String,
+        layout: Rect,
+        line_height: f32,
         parent_size: (f32, f32),
+        size: f32,
     },
     Image {
         layout: Rect,
@@ -71,16 +72,18 @@ impl From<&Style> for RenderPrimitive {
             },
             RenderCommand::Text {
                 content,
-                size,
                 font,
+                line_height,
                 parent_size,
+                size,
             } => Self::Text {
-                layout: Rect::default(),
                 color: style.color.resolve(),
-                size,
                 content,
                 font,
+                layout: Rect::default(),
+                line_height,
                 parent_size,
+                size,
             },
             RenderCommand::Image { handle } => Self::Image {
                 layout: Rect::default(),

kayak_font/src/font.rs

@@ -198,7 +198,8 @@ impl KayakFont {
                     last_width = width;
 
                     let position_x = x + left * font_size;
-                    let position_y = y + (shift_sign * top * font_size);
+                    let position_y =
+                        y + (shift_sign * top * font_size) + ((line_height - font_size) / 2.0);
 
                     positions_and_size.push(LayoutRect {
                         position: (position_x, position_y),

src/widgets/app.rs

@@ -27,7 +27,6 @@ pub fn App(children: Children) {
 
         context.bind(&window_size);
         let window_size = window_size.get();
-        dbg!(window_size);
         *styles = Some(Style {
             render_command: StyleProp::Value(RenderCommand::Layout),
             width: StyleProp::Value(Units::Pixels(window_size.0)),

src/widgets/button.rs

@@ -24,6 +24,8 @@ pub fn Button(children: Children, styles: Option<Style>) {
         },
         padding_left: StyleProp::Value(Units::Stretch(1.0)),
         padding_right: StyleProp::Value(Units::Stretch(1.0)),
+        padding_top: StyleProp::Value(Units::Stretch(1.0)),
+        padding_bottom: StyleProp::Value(Units::Stretch(1.0)),
         ..base_styles
     });
     rsx! {

src/widgets/text.rs

@@ -8,7 +8,13 @@ use crate::core::{
 };
 
 #[widget]
-pub fn Text(size: f32, content: String, styles: Option<Style>, font: Option<String>) {
+pub fn Text(
+    size: f32,
+    line_height: Option<f32>,
+    content: String,
+    styles: Option<Style>,
+    font: Option<String>,
+) {
     let font_name = font;
     let font: Binding<Option<KayakFont>> =
         context.get_asset(font_name.clone().unwrap_or("Roboto".into()));
@@ -24,7 +30,7 @@ pub fn Text(size: f32, content: String, styles: Option<Style>, font: Option<Stri
                         CoordinateSystem::PositiveYDown,
                         &content,
                         size,
-                        size * 1.2,
+                        line_height.unwrap_or(size * 1.2),
                         (layout.width, layout.height),
                     );
 
@@ -43,6 +49,7 @@ pub fn Text(size: f32, content: String, styles: Option<Style>, font: Option<Stri
         content: content.clone(),
         size,
         parent_size,
+        line_height: line_height.unwrap_or(size * 1.2),
         font: font_name.clone().unwrap_or("Roboto".into()),
     };