parent
a5d1cb60f2
commit
211e7c13b3
|
|
@ -155,7 +155,8 @@ module Squib
|
|||
layout.font_description = font_desc
|
||||
layout.text = str
|
||||
if markup
|
||||
layout.markup = Args::Typographer.new(@deck.config).process(layout.text)
|
||||
str = Args::Typographer.new(@deck.config).process(layout.text)
|
||||
layout.markup = str
|
||||
end
|
||||
|
||||
set_wh!(layout, width, height)
|
||||
|
|
|
|||
|
|
@ -4,69 +4,76 @@ Squib::Deck.new do
|
|||
background color: :white
|
||||
rect x: 0, y: 0, width: 825, height: 1125, stroke_width: 2.0
|
||||
|
||||
# embed_text = 'Take 11 :tool: and gain 2 :health:. Take <b>2</b> :tool: <i>and gain 3 :purse: if level 2.</i>'
|
||||
# text(str: embed_text, font: 'Sans 21',
|
||||
# x: 0, y: 0, width: 180, hint: :red,
|
||||
# align: :left, ellipsize: false, justify: false) do |embed|
|
||||
# # Notice how we use dx and dy to adjust the icon to not rest directly on the baseline
|
||||
# embed.svg key: ':tool:', width: 28, height: 28, dx: 0, dy: 4, file: 'spanner.svg'
|
||||
# embed.svg key: ':health:', width: 28, height: 28, dx: -2, dy: 4, file: 'glass-heart.svg'
|
||||
# embed.png key: ':purse:', width: 28, height: 28, dx: 0, dy: 4, file: 'shiny-purse.png'
|
||||
# end
|
||||
embed_text = 'Take 11 :tool: and gain 2 :health:. Take <b>2</b> :tool: <i>and gain 3 :purse: if level 2.</i>'
|
||||
text(str: embed_text, font: 'Sans 21',
|
||||
x: 0, y: 0, width: 180, hint: :red,
|
||||
align: :left, ellipsize: false, justify: false) do |embed|
|
||||
# Notice how we use dx and dy to adjust the icon to not rest directly on the baseline
|
||||
embed.svg key: ':tool:', width: 28, height: 28, dx: 0, dy: 4, file: 'spanner.svg'
|
||||
embed.svg key: ':health:', width: 28, height: 28, dx: -2, dy: 4, file: 'glass-heart.svg'
|
||||
embed.png key: ':purse:', width: 28, height: 28, dx: 0, dy: 4, file: 'shiny-purse.png'
|
||||
end
|
||||
|
||||
# embed_text = 'Middle align: Take 1 :tool: and gain 2 :health:. Take 2 :tool: and gain 3 :purse:'
|
||||
# text(str: embed_text, font: 'Sans 21',
|
||||
# x: 200, y: 0, width: 180, height: 300, valign: :middle,
|
||||
# align: :left, ellipsize: false, justify: false, hint: :cyan) do |embed|
|
||||
# embed.svg key: ':tool:', width: 28, height: 28, file: 'spanner.svg'
|
||||
# embed.svg key: ':health:', width: 28, height: 28, file: 'glass-heart.svg'
|
||||
# embed.png key: ':purse:', width: 28, height: 28, file: 'shiny-purse.png'
|
||||
# end
|
||||
embed_text = 'Middle align: Take 1 :tool: and gain 2 :health:. Take 2 :tool: and gain 3 :purse:'
|
||||
text(str: embed_text, font: 'Sans 21',
|
||||
x: 200, y: 0, width: 180, height: 300, valign: :middle,
|
||||
align: :left, ellipsize: false, justify: false, hint: :cyan) do |embed|
|
||||
embed.svg key: ':tool:', width: 28, height: 28, file: 'spanner.svg'
|
||||
embed.svg key: ':health:', width: 28, height: 28, file: 'glass-heart.svg'
|
||||
embed.png key: ':purse:', width: 28, height: 28, file: 'shiny-purse.png'
|
||||
end
|
||||
|
||||
# embed_text = 'This :tool: aligns on the bottom properly. :purse:'
|
||||
# text(str: embed_text, font: 'Sans 21',
|
||||
# x: 400, y: 0, width: 180, height: 300, valign: :bottom,
|
||||
# align: :left, ellipsize: false, justify: false, hint: :green) do |embed|
|
||||
# embed.svg key: ':tool:', width: 28, height: 28, file: 'spanner.svg'
|
||||
# embed.svg key: ':health:', width: 28, height: 28, file: 'glass-heart.svg'
|
||||
# embed.png key: ':purse:', width: 28, height: 28, file: 'shiny-purse.png'
|
||||
# end
|
||||
embed_text = 'This :tool: aligns on the bottom properly. :purse:'
|
||||
text(str: embed_text, font: 'Sans 21',
|
||||
x: 400, y: 0, width: 180, height: 300, valign: :bottom,
|
||||
align: :left, ellipsize: false, justify: false, hint: :green) do |embed|
|
||||
embed.svg key: ':tool:', width: 28, height: 28, file: 'spanner.svg'
|
||||
embed.svg key: ':health:', width: 28, height: 28, file: 'glass-heart.svg'
|
||||
embed.png key: ':purse:', width: 28, height: 28, file: 'shiny-purse.png'
|
||||
end
|
||||
|
||||
# embed_text = 'Wrapping multiples: These are 1 :tool::tool::tool: and these are multiple :tool::tool: :tool::tool:'
|
||||
# text(str: embed_text, font: 'Sans 21',
|
||||
# x: 600, y: 0, width: 180, height: 300, valign: :middle,
|
||||
# align: :left, ellipsize: false, justify: false, hint: :cyan) do |embed|
|
||||
# embed.svg key: ':tool:', width: 28, height: 28, file: 'spanner.svg'
|
||||
# end
|
||||
embed_text = 'Wrapping multiples: These are 1 :tool::tool::tool: and these are multiple :tool::tool: :tool::tool:'
|
||||
text(str: embed_text, font: 'Sans 21',
|
||||
x: 600, y: 0, width: 180, height: 300, valign: :middle,
|
||||
align: :left, ellipsize: false, justify: false, hint: :cyan) do |embed|
|
||||
embed.svg key: ':tool:', width: 28, height: 28, file: 'spanner.svg'
|
||||
end
|
||||
|
||||
# embed_text = ':tool:Justify will :tool: work too, and :purse: with more words just for fun'
|
||||
# text(str: embed_text, font: 'Sans 21',
|
||||
# x: 0, y: 320, width: 180, height: 300, valign: :bottom,
|
||||
# align: :left, ellipsize: false, justify: true, hint: :magenta) do |embed|
|
||||
# embed.svg key: ':tool:', width: 28, height: 28, file: 'spanner.svg'
|
||||
# embed.svg key: ':health:', width: 28, height: 28, file: 'glass-heart.svg'
|
||||
# embed.png key: ':purse:', width: 28, height: 28, file: 'shiny-purse.png'
|
||||
# end
|
||||
embed_text = ':tool:Justify will :tool: work too, and :purse: with more words just for fun'
|
||||
text(str: embed_text, font: 'Sans 21',
|
||||
x: 0, y: 320, width: 180, height: 300, valign: :bottom,
|
||||
align: :left, ellipsize: false, justify: true, hint: :magenta) do |embed|
|
||||
embed.svg key: ':tool:', width: 28, height: 28, file: 'spanner.svg'
|
||||
embed.svg key: ':health:', width: 28, height: 28, file: 'glass-heart.svg'
|
||||
embed.png key: ':purse:', width: 28, height: 28, file: 'shiny-purse.png'
|
||||
end
|
||||
|
||||
# embed_text = 'Right-aligned works :tool: with :health: and :purse:'
|
||||
# text(str: embed_text, font: 'Sans 21',
|
||||
# x: 200, y: 320, width: 180, height: 300, valign: :bottom,
|
||||
# align: :right, ellipsize: false, justify: false, hint: :magenta) do |embed|
|
||||
# embed.svg key: ':tool:', width: 28, height: 28, file: 'spanner.svg'
|
||||
# embed.svg key: ':health:', width: 28, height: 28, file: 'glass-heart.svg'
|
||||
# embed.png key: ':purse:', width: 28, height: 28, file: 'shiny-purse.png'
|
||||
# end
|
||||
embed_text = 'Right-aligned works :tool: with :health: and :purse:'
|
||||
text(str: embed_text, font: 'Sans 21',
|
||||
x: 200, y: 320, width: 180, height: 300, valign: :bottom,
|
||||
align: :right, ellipsize: false, justify: false, hint: :magenta) do |embed|
|
||||
embed.svg key: ':tool:', width: 28, height: 28, file: 'spanner.svg'
|
||||
embed.svg key: ':health:', width: 28, height: 28, file: 'glass-heart.svg'
|
||||
embed.png key: ':purse:', width: 28, height: 28, file: 'shiny-purse.png'
|
||||
end
|
||||
|
||||
# embed_text = ':tool:Center-aligned works :tool: with :health: and :purse:'
|
||||
# text(str: embed_text, font: 'Sans 21',
|
||||
# x: 400, y: 320, width: 180, height: 300,
|
||||
# align: :center, ellipsize: false, justify: false, hint: :magenta) do |embed|
|
||||
# embed.svg key: ':tool:', width: 28, height: 28, file: 'spanner.svg'
|
||||
# embed.svg key: ':health:', width: 28, height: 28, file: 'glass-heart.svg'
|
||||
# embed.png key: ':purse:', width: 28, height: 28, file: 'shiny-purse.png'
|
||||
# end
|
||||
embed_text = ':tool:Center-aligned works :tool: with :health: and :purse:'
|
||||
text(str: embed_text, font: 'Sans 21',
|
||||
x: 400, y: 320, width: 180, height: 300,
|
||||
align: :center, ellipsize: false, justify: false, hint: :magenta) do |embed|
|
||||
embed.svg key: ':tool:', width: 28, height: 28, file: 'spanner.svg'
|
||||
embed.svg key: ':health:', width: 28, height: 28, file: 'glass-heart.svg'
|
||||
embed.png key: ':purse:', width: 28, height: 28, file: 'shiny-purse.png'
|
||||
end
|
||||
|
||||
# save_png prefix: 'embed_'
|
||||
embed_text = 'Markup and typography replacements with ":tool:" icons <i>won\'t</i> fail'
|
||||
text(str: embed_text, font: 'Serif 21', markup: true,
|
||||
x: 600, y: 320, width: 180, height: 300,
|
||||
align: :center, hint: :magenta) do |embed|
|
||||
embed.svg key: ':tool:', width: 28, height: 28, file: 'spanner.svg'
|
||||
end
|
||||
|
||||
save_png prefix: 'embed_'
|
||||
end
|
||||
|
||||
Squib::Deck.new(cards: 3) do
|
||||
|
|
|
|||
|
|
@ -12,6 +12,199 @@ cairo: rounded_rectangle([0, 0, 825, 1125, 0, 0])
|
|||
cairo: set_source_color(["#0000"])
|
||||
cairo: fill([])
|
||||
cairo: restore([])
|
||||
cairo: save([])
|
||||
cairo: set_source_color([:black])
|
||||
cairo: translate([0, 0])
|
||||
cairo: rotate([0])
|
||||
cairo: move_to([0, 0])
|
||||
pango: font_description=([MockDouble])
|
||||
pango: text=(["Take 11 :tool: and gain 2 :health:. Take <b>2</b> :tool: <i>and gain 3 :purse: if level 2.</i>"])
|
||||
pango: width=([184320])
|
||||
pango: wrap=([#<Pango::Layout::WrapMode word-char>])
|
||||
pango: ellipsize=([#<Pango::Layout::EllipsizeMode none>])
|
||||
pango: alignment=([#<Pango::Layout::Alignment left>])
|
||||
pango: justify=([false])
|
||||
pango: spacing=([0])
|
||||
cairo: update_pango_layout([MockDouble])
|
||||
pango: markup=(["Take 11 :tool: and gain 2 :health:. Take <b>2</b> :tool: <i>and gain 3 :purse: if level 2.</i>"])
|
||||
cairo: move_to([0, 0])
|
||||
cairo: update_pango_layout([MockDouble])
|
||||
cairo: show_pango_layout([MockDouble])
|
||||
cairo: rounded_rectangle([0, 0, 0, 0, 0, 0])
|
||||
cairo: set_source_color([:red])
|
||||
cairo: set_line_width([2.0])
|
||||
cairo: stroke([])
|
||||
cairo: restore([])
|
||||
cairo: save([])
|
||||
cairo: set_source_color([:black])
|
||||
cairo: translate([200, 0])
|
||||
cairo: rotate([0])
|
||||
cairo: move_to([0, 0])
|
||||
pango: font_description=([MockDouble])
|
||||
pango: text=(["Middle align: Take 1 :tool: and gain 2 :health:. Take 2 :tool: and gain 3 :purse:"])
|
||||
pango: width=([184320])
|
||||
pango: height=([307200])
|
||||
pango: wrap=([#<Pango::Layout::WrapMode word-char>])
|
||||
pango: ellipsize=([#<Pango::Layout::EllipsizeMode none>])
|
||||
pango: alignment=([#<Pango::Layout::Alignment left>])
|
||||
pango: justify=([false])
|
||||
pango: spacing=([0])
|
||||
cairo: update_pango_layout([MockDouble])
|
||||
pango: markup=(["Middle align: Take 1 :tool: and gain 2 :health:. Take 2 :tool: and gain 3 :purse:"])
|
||||
cairo: move_to([0, 0.0])
|
||||
cairo: update_pango_layout([MockDouble])
|
||||
cairo: show_pango_layout([MockDouble])
|
||||
cairo: rounded_rectangle([0, 0, 0, 0, 0, 0])
|
||||
cairo: set_source_color([:cyan])
|
||||
cairo: set_line_width([2.0])
|
||||
cairo: stroke([])
|
||||
cairo: restore([])
|
||||
cairo: save([])
|
||||
cairo: set_source_color([:black])
|
||||
cairo: translate([400, 0])
|
||||
cairo: rotate([0])
|
||||
cairo: move_to([0, 0])
|
||||
pango: font_description=([MockDouble])
|
||||
pango: text=(["This :tool: aligns on the bottom properly. :purse:"])
|
||||
pango: width=([184320])
|
||||
pango: height=([307200])
|
||||
pango: wrap=([#<Pango::Layout::WrapMode word-char>])
|
||||
pango: ellipsize=([#<Pango::Layout::EllipsizeMode none>])
|
||||
pango: alignment=([#<Pango::Layout::Alignment left>])
|
||||
pango: justify=([false])
|
||||
pango: spacing=([0])
|
||||
cairo: update_pango_layout([MockDouble])
|
||||
pango: markup=(["This :tool: aligns on the bottom properly. :purse:"])
|
||||
cairo: move_to([0, 0.0])
|
||||
cairo: update_pango_layout([MockDouble])
|
||||
cairo: show_pango_layout([MockDouble])
|
||||
cairo: rounded_rectangle([0, 0, 0, 0, 0, 0])
|
||||
cairo: set_source_color([:green])
|
||||
cairo: set_line_width([2.0])
|
||||
cairo: stroke([])
|
||||
cairo: restore([])
|
||||
cairo: save([])
|
||||
cairo: set_source_color([:black])
|
||||
cairo: translate([600, 0])
|
||||
cairo: rotate([0])
|
||||
cairo: move_to([0, 0])
|
||||
pango: font_description=([MockDouble])
|
||||
pango: text=(["Wrapping multiples: These are 1 :tool::tool::tool: and these are multiple :tool::tool: :tool::tool:"])
|
||||
pango: width=([184320])
|
||||
pango: height=([307200])
|
||||
pango: wrap=([#<Pango::Layout::WrapMode word-char>])
|
||||
pango: ellipsize=([#<Pango::Layout::EllipsizeMode none>])
|
||||
pango: alignment=([#<Pango::Layout::Alignment left>])
|
||||
pango: justify=([false])
|
||||
pango: spacing=([0])
|
||||
cairo: update_pango_layout([MockDouble])
|
||||
pango: markup=(["Wrapping multiples: These are 1 :tool::tool::tool: and these are multiple :tool::tool: :tool::tool:"])
|
||||
cairo: move_to([0, 0.0])
|
||||
cairo: update_pango_layout([MockDouble])
|
||||
cairo: show_pango_layout([MockDouble])
|
||||
cairo: rounded_rectangle([0, 0, 0, 0, 0, 0])
|
||||
cairo: set_source_color([:cyan])
|
||||
cairo: set_line_width([2.0])
|
||||
cairo: stroke([])
|
||||
cairo: restore([])
|
||||
cairo: save([])
|
||||
cairo: set_source_color([:black])
|
||||
cairo: translate([0, 320])
|
||||
cairo: rotate([0])
|
||||
cairo: move_to([0, 0])
|
||||
pango: font_description=([MockDouble])
|
||||
pango: text=([":tool:Justify will :tool: work too, and :purse: with more words just for fun"])
|
||||
pango: width=([184320])
|
||||
pango: height=([307200])
|
||||
pango: wrap=([#<Pango::Layout::WrapMode word-char>])
|
||||
pango: ellipsize=([#<Pango::Layout::EllipsizeMode none>])
|
||||
pango: alignment=([#<Pango::Layout::Alignment left>])
|
||||
pango: justify=([true])
|
||||
pango: spacing=([0])
|
||||
cairo: update_pango_layout([MockDouble])
|
||||
pango: markup=([":tool:Justify will :tool: work too, and :purse: with more words just for fun"])
|
||||
cairo: move_to([0, 0.0])
|
||||
cairo: update_pango_layout([MockDouble])
|
||||
cairo: show_pango_layout([MockDouble])
|
||||
cairo: rounded_rectangle([0, 0, 0, 0, 0, 0])
|
||||
cairo: set_source_color([:magenta])
|
||||
cairo: set_line_width([2.0])
|
||||
cairo: stroke([])
|
||||
cairo: restore([])
|
||||
cairo: save([])
|
||||
cairo: set_source_color([:black])
|
||||
cairo: translate([200, 320])
|
||||
cairo: rotate([0])
|
||||
cairo: move_to([0, 0])
|
||||
pango: font_description=([MockDouble])
|
||||
pango: text=(["Right-aligned works :tool: with :health: and :purse:"])
|
||||
pango: width=([184320])
|
||||
pango: height=([307200])
|
||||
pango: wrap=([#<Pango::Layout::WrapMode word-char>])
|
||||
pango: ellipsize=([#<Pango::Layout::EllipsizeMode none>])
|
||||
pango: alignment=([#<Pango::Layout::Alignment right>])
|
||||
pango: justify=([false])
|
||||
pango: spacing=([0])
|
||||
cairo: update_pango_layout([MockDouble])
|
||||
pango: markup=(["Right-aligned works :tool: with :health: and :purse:"])
|
||||
cairo: move_to([0, 0.0])
|
||||
cairo: update_pango_layout([MockDouble])
|
||||
cairo: show_pango_layout([MockDouble])
|
||||
cairo: rounded_rectangle([0, 0, 0, 0, 0, 0])
|
||||
cairo: set_source_color([:magenta])
|
||||
cairo: set_line_width([2.0])
|
||||
cairo: stroke([])
|
||||
cairo: restore([])
|
||||
cairo: save([])
|
||||
cairo: set_source_color([:black])
|
||||
cairo: translate([400, 320])
|
||||
cairo: rotate([0])
|
||||
cairo: move_to([0, 0])
|
||||
pango: font_description=([MockDouble])
|
||||
pango: text=([":tool:Center-aligned works :tool: with :health: and :purse:"])
|
||||
pango: width=([184320])
|
||||
pango: height=([307200])
|
||||
pango: wrap=([#<Pango::Layout::WrapMode word-char>])
|
||||
pango: ellipsize=([#<Pango::Layout::EllipsizeMode none>])
|
||||
pango: alignment=([#<Pango::Layout::Alignment center>])
|
||||
pango: justify=([false])
|
||||
pango: spacing=([0])
|
||||
cairo: update_pango_layout([MockDouble])
|
||||
pango: markup=([":tool:Center-aligned works :tool: with :health: and :purse:"])
|
||||
cairo: move_to([0, 0])
|
||||
cairo: update_pango_layout([MockDouble])
|
||||
cairo: show_pango_layout([MockDouble])
|
||||
cairo: rounded_rectangle([0, 0, 0, 0, 0, 0])
|
||||
cairo: set_source_color([:magenta])
|
||||
cairo: set_line_width([2.0])
|
||||
cairo: stroke([])
|
||||
cairo: restore([])
|
||||
cairo: save([])
|
||||
cairo: set_source_color([:black])
|
||||
cairo: translate([600, 320])
|
||||
cairo: rotate([0])
|
||||
cairo: move_to([0, 0])
|
||||
pango: font_description=([MockDouble])
|
||||
pango: text=(["Markup and typography replacements with \":tool:\" icons <i>won't</i> fail"])
|
||||
pango: markup=(["foo"])
|
||||
pango: width=([184320])
|
||||
pango: height=([307200])
|
||||
pango: wrap=([#<Pango::Layout::WrapMode word-char>])
|
||||
pango: ellipsize=([#<Pango::Layout::EllipsizeMode end>])
|
||||
pango: alignment=([#<Pango::Layout::Alignment center>])
|
||||
pango: justify=([false])
|
||||
pango: spacing=([0])
|
||||
cairo: update_pango_layout([MockDouble])
|
||||
pango: markup=(["foo"])
|
||||
cairo: move_to([0, 0])
|
||||
cairo: update_pango_layout([MockDouble])
|
||||
cairo: show_pango_layout([MockDouble])
|
||||
cairo: rounded_rectangle([0, 0, 0, 0, 0, 0])
|
||||
cairo: set_source_color([:magenta])
|
||||
cairo: set_line_width([2.0])
|
||||
cairo: stroke([])
|
||||
cairo: restore([])
|
||||
surface: write_to_png(["_output/embed_00.png"])
|
||||
cairo: antialias=(["subpixel"])
|
||||
cairo: antialias=(["subpixel"])
|
||||
cairo: antialias=(["subpixel"])
|
||||
|
|
|
|||
Loading…
Reference in New Issue