disable padding for inline elements, only inline-block elements get m…

…argin

crates/gosub_styling/src/render_tree.rs

@@ -18,6 +18,12 @@ use gosub_shared::types::Result;
 
 mod desc;
 
+const INLINE_ELEMENTS: [&str; 31] = [
+    "a", "abbr", "acronym", "b", "bdo", "big", "br", "button", "cite", "code", "dfn", "em", "i",
+    "img", "input", "kbd", "label", "map", "object", "q", "samp", "script", "select", "small",
+    "span", "strong", "sub", "sup", "textarea", "tt", "var",
+];
+
 /// Map of all declared values for all nodes in the document
 #[derive(Debug)]
 pub struct RenderTree<L: Layouter> {
@@ -720,23 +726,32 @@ impl<L: Layouter> RenderTreeNode<L> {
             return true;
         }
 
-        let tag_name = self.name.to_lowercase();
+        if let Some(d) = self.properties.get("display").and_then(|prop| {
+            let CssValue::String(val) = &prop.actual else {
+                return None;
+            };
 
-        const INLINE_ELEMENTS: [&str; 31] = [
-            "a", "abbr", "acronym", "b", "bdo", "big", "br", "button", "cite", "code", "dfn", "em",
-            "i", "img", "input", "kbd", "label", "map", "object", "q", "samp", "script", "select",
-            "small", "span", "strong", "sub", "sup", "textarea", "tt", "var",
-        ];
+            // const NON_INLINE_DISPLAYS: [&str; 6] = ["block", "flex", "grid", "table", "list-item", "none"];
+            // if NON_INLINE_DISPLAYS.contains(&val.as_str()) {
+            //     return Some(false);
+            // } //TODO: somehow this causes problems with the inline elements
+
+            if val == "inline"
+                || val == "inline-block"
+                || val == "inline-table"
+                || val == "inline-flex"
+            {
+                return Some(true);
+            }
 
-        if INLINE_ELEMENTS.contains(&tag_name.as_str()) {
-            return true;
+            None
+        }) {
+            return d;
         }
 
-        self.properties.get("display").map_or(false, |prop| {
-            let val = prop.compute_value().to_string();
+        let tag_name = self.name.to_lowercase();
 
-            val == "inline" || val == "inline-block"
-        })
+        INLINE_ELEMENTS.contains(&tag_name.as_str())
     }
 }
 

crates/gosub_taffy/src/compute/inline.rs

@@ -5,7 +5,7 @@ use taffy::{
 };
 
 use crate::text::{Font, TextLayout};
-use crate::{LayoutDocument, TaffyLayouter};
+use crate::{Display, LayoutDocument, TaffyLayouter};
 use gosub_render_backend::geo;
 use gosub_render_backend::layout::{CssProperty, HasTextLayout, LayoutTree, Node};
 use gosub_typeface::font::Glyph;
@@ -93,16 +93,31 @@ pub fn compute_inline_layout<LT: LayoutTree<TaffyLayouter>>(
                 id: node_id,
             });
         } else {
-            if u64::from(node_id) == 162u64 {
+            if u64::from(node_id) == 477u64 {
                 println!("inline_box <a>: {:?}", node_id);
             }
 
             let out = tree.compute_child_layout(node_id, layout_input);
+
+            tree.update_style(*child);
+
+            let size = if let Some(cache) = tree.0.get_cache(*child) {
+                if cache.display == Display::InlineBlock {
+                    //TODO: handle margins here
+
+                    out.size
+                } else {
+                    out.content_size
+                }
+            } else {
+                out.content_size
+            };
+
             inline_boxes.push(InlineBox {
                 id: node_id.into(),
                 index: str_buf.len(),
-                height: out.size.height, //TODO: handle inline-block => add margin & padding
-                width: out.size.width,
+                height: size.height,
+                width: size.width,
             });
         }
     }
@@ -214,17 +229,6 @@ pub fn compute_inline_layout<LT: LayoutTree<TaffyLayouter>>(
 
     layout.align(max_width, align);
 
-    if nod_id.into() == 989 {
-        for line in layout.lines() {
-            println!("advance: {:?}", line.metrics().advance);
-
-            let t_range = line.text_range();
-
-            println!("text: {:?}", &str_buf[t_range.clone()]);
-            println!("full metrics: {:?}", line.metrics());
-        }
-    }
-
     //
     // for (child, out) in children.into_iter().zip(outputs.into_iter()) {
 

crates/gosub_taffy/src/lib.rs

@@ -70,7 +70,9 @@ pub struct TaffyLayouter;
 #[derive(Debug, Default, Clone, Copy, PartialEq, Eq)]
 #[allow(unused)]
 pub enum Display {
-    Text,
+    Inline,
+    InlineBlock,
+    Table,
     #[default]
     Taffy,
 }
@@ -243,17 +245,6 @@ impl<LT: LayoutTree<TaffyLayouter>> LayoutPartialTree for LayoutDocument<'_, LT>
                 }
             }
 
-            if let Some(cache) = tree.0.get_cache(node_id) {
-                match cache.display {
-                    Display::Text => {
-                        // We should implement a new way of layouting text. Currently, we just measure how long the text is and don't insert any linebreaks,
-                        // which is obviously not correct. So, if we encounter Display::Text, we need to ask our text-layouter and tell him how much space we have, and it will insert linebreaks
-                        todo!()
-                    }
-                    Display::Taffy => {}
-                }
-            }
-
             let has_children = tree.0.child_count(node_id) > 0; //TODO: this isn't optimal, since we are now requesting the same node twice (up in get_cache and here)
             let style = tree.get_taffy_style(node_id);
 

crates/gosub_taffy/src/style/parse_properties.rs

@@ -25,6 +25,9 @@ pub fn parse_display(node: &mut impl Node) -> (Display, crate::Display) {
         "block" => (Display::Block, crate::Display::Taffy),
         "flex" => (Display::Flex, crate::Display::Taffy),
         "grid" => (Display::Grid, crate::Display::Taffy),
+        "inline-block" => (Display::Block, crate::Display::InlineBlock),
+        "inline" => (Display::Block, crate::Display::Inline),
+        "table" => (Display::Block, crate::Display::Table),
         _ => (Display::Block, crate::Display::Taffy),
     }
 }