Added and Fixed Para Styles

examples/para_font_styles.rb

@@ -0,0 +1,17 @@
+Shoes.app do
+
+    para "this text is in normal styl" , emphasis:"italic"
+
+    para "this text is in italic style" , font: "italic normal bold 16px 'Times New Roman', serif;"
+
+
+    para "this text is in oblique style " , family: "'Pacifico', cursive;"
+
+    para "Text in Helvetica", font: "Helvetica;"
+
+    para "And in Lucida", font: "'Pacifico', cursive;"
+
+    para "From an example", font: "Trebuchet  bold"
+
+end
+

examples/para_font_variant.rb

@@ -0,0 +1,6 @@
+Shoes.app do
+    para "This is Normal Variant" ,font_variant: "normal"
+
+    para "This is Small Caps Variant " ,font_variant: "small-caps"
+
+  end

lacci/lib/shoes/drawables/para.rb

@@ -2,7 +2,7 @@
 
 class Shoes
   class Para < Shoes::Drawable
-    shoes_styles :text_items, :size, :font, :font_weight
+    shoes_styles :text_items, :size, :family, :font_weight, :font, :font_variant, :emphasis
     shoes_style(:stroke) { |val, _name| Shoes::Colors.to_rgb(val) }
     shoes_style(:fill) { |val, _name| Shoes::Colors.to_rgb(val) }
 

scarpe-components/lib/scarpe/components/calzini/para.rb

@@ -39,10 +39,12 @@ def text_specific_styles(props)
     strikethrough = props["strikethrough"]
     strikethrough = nil if strikethrough == "" || strikethrough == "none"
     s1 = {
+      "font": props["font"]? parse_font(props) : nil,
+      "font-variant": props["font_variant"],
       "color": rgb_to_hex(props["stroke"]),
       "background-color": rgb_to_hex(props["fill"]),
       "font-size": para_font_size(props),
-      "font-family": props["font"],
+      "font-family": props["family"],
       "text-decoration-line": strikethrough ? "line-through" : nil,
       "text-decoration-color": props["strikecolor"] ? rgb_to_hex(props["strikecolor"]) : nil,
       "font-weight": props["font_weight"]? props["font_weight"] : nil,
@@ -93,6 +95,70 @@ def text_specific_styles(props)
     [s1, s2]
   end
 
+
+  def parse_font(props)
+
+    def contains_number?(str)
+
+      !!(str =~ /\d/)
+
+    end
+
+
+    input = props["font"]
+    regex = /\s+(?=(?:[^']*'[^']*')*[^']*$)(?![^']*,[^']*')/
+    result = input.split(regex)
+
+    fs = "normal"
+    fv = "normal"
+    fw = "normal"
+    fss = "medium"
+    ff = "Arial"
+
+    fos = ["italic", "oblique"]
+    fov = ["small-caps", "initial", "inherit"]
+    fow = ["bold", "bolder", "lighter", "100", "200", "300", "400", "500", "600", "700", "800", "900"]
+    foss = ["xx-small", "x-small", "small","large", "x-large", "xx-large", "smaller", "larger"]
+
+    result.each do |i|
+      if fos.include?(i)
+        fs = i
+        next
+      elsif fov.include?(i)
+        fv = i
+        next
+      elsif fow.include?(i)
+        fw = i
+        next
+      elsif foss.include?(i)
+        fss = i
+        next
+      else
+        if contains_number?(i)
+
+          fss=i;
+
+        elsif i != "normal" && i != "medium"
+
+          if ff == "Arial"
+
+            ff = i
+
+          else
+
+            ff = ff+ i
+
+          end
+        end
+      end
+
+    end
+
+
+    "#{fs} #{fv} #{fw} #{fss} #{ff}"
+
+  end
+
   def para_font_size(props)
     return nil unless props["size"]
 

scarpe-components/test/calzini/test_calzini_para.rb

@@ -19,7 +19,7 @@ def test_para_with_align
 
   def test_para_with_stroke_and_font
     assert_equal %{<p id="elt-1" style="color:#FF0000;font-family:Lucida">OK</p>},
-      @calzini.render("para", { "stroke" => [1.0, 0.0, 0.0], "font" => "Lucida" }) { "OK" }
+      @calzini.render("para", { "stroke" => [1.0, 0.0, 0.0], "family" => "Lucida" }) { "OK" }
   end
 
   def test_para_with_string_banner

scarpe-components/test/calzini/test_calzini_text_drawables.rb

@@ -31,7 +31,7 @@ def test_simple_text_drawable_with_span_styles
           html_id: "1",
           items: ["is"],
           props: {
-            "font" => "Lucida",
+            "family" => "Lucida",
             "size" => 13,
             "stroke" => "#FF00FF",
             "fill" => "#0000FF"

test/wv/html_fixtures/fonts.html

@@ -1,8 +1,8 @@
 <div id="2" style="display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;justify-content:flex-start;align-items:flex-start;width:100%;height:100%">
   <div style="height:100%;width:100%;position:relative">
-    <p id="3" style="font-size:20px;font-family:Arial">Hello, world!</p>
-    <p id="4" style="font-size:20px;font-family:Courier">Hello, world!</p>
-    <p id="5" style="font-size:20px;font-family:MS Gothic">Hello, world!</p>
+    <p id="3" style="font:normal normal normal medium Arial;font-size:20px">Hello, world!</p>
+    <p id="4" style="font:normal normal normal medium Courier;font-size:20px">Hello, world!</p>
+    <p id="5" style="font:normal normal normal medium MSGothic;font-size:20px">Hello, world!</p>
     <div id="root-fonts"></div>
     <div id="root-alerts"> </div>
   </div>

test/wv/html_fixtures/para_font_styles.html

@@ -0,0 +1,12 @@
+<div id="2" style="display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;justify-content:flex-start;align-items:flex-start;width:100%;height:100%">
+  <div style="height:100%;width:100%;position:relative">
+    <p id="3" style="font-size:12px;font-style:italic">this text is in normal styl</p>
+    <p id="4" style="font:italic normal bold 16px 'Times New Roman',serif;;font-size:12px">this text is in italic style</p>
+    <p id="5" style="font-size:12px;font-family:'Pacifico', cursive;">this text is in oblique style </p>
+    <p id="6" style="font:normal normal normal medium Helvetica;;font-size:12px">Text in Helvetica</p>
+    <p id="7" style="font:normal normal normal medium 'Pacifico',cursive;;font-size:12px">And in Lucida</p>
+    <p id="8" style="font:normal normal bold medium Trebuchet;font-size:12px">From an example</p>
+    <div id="root-fonts"></div>
+    <div id="root-alerts"> </div>
+  </div>
+</div>

test/wv/html_fixtures/para_font_variant.html

@@ -0,0 +1,8 @@
+<div id="2" style="display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;justify-content:flex-start;align-items:flex-start;width:100%;height:100%">
+  <div style="height:100%;width:100%;position:relative">
+    <p id="3" style="font-variant:normal;font-size:12px">This is Normal Variant</p>
+    <p id="4" style="font-variant:small-caps;font-size:12px">This is Small Caps Variant </p>
+    <div id="root-fonts"></div>
+    <div id="root-alerts"> </div>
+  </div>
+</div>