Anshorei/squib
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Respect DPI settings in text, add pt unit

Browse Source 
This has the compatibility impact that all font sizes should be divided by 3 to maintain their same sizes.

Based on PR #225. Thanks @felixleong!!

Conflicts:
	bin/squib
	lib/squib/graphics/text.rb
This commit is contained in:
Seh Hui, Leong
2017-10-05 16:37:46 -04:00
committed by Andy Meneely
parent 06970b77a6
commit f800c131ff
43 changed files with 144 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
samples/text/_embed_text.rb
+14 -14
View File
@@ -5,7 +5,7 @@ Squib::Deck.new do
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',
text(str: embed_text, font: 'Sans 7',
x: 0, y: 0, width: 180, hint: :red,
align: :left, ellipsize: false, justify: false) do |embed|
embed.svg key: ':tool:', width: 28, height: 28, file: 'spanner.svg'
@@ -14,7 +14,7 @@ Squib::Deck.new do
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',
text(str: embed_text, font: 'Sans 7',
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'
@@ -23,7 +23,7 @@ Squib::Deck.new do
end
embed_text = 'This :tool: aligns on the bottom properly. :purse:'
text(str: embed_text, font: 'Sans 21',
text(str: embed_text, font: 'Sans 7',
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'
@@ -32,14 +32,14 @@ Squib::Deck.new do
end
embed_text = 'Yes, this wraps strangely. We are trying to determine the cause. These are 1 :tool::tool::tool: and these are multiple :tool::tool: :tool::tool:'
text(str: embed_text, font: 'Sans 18',
text(str: embed_text, font: 'Sans 6',
x: 600, y: 0, width: 180, height: 300, wrap: :word_char,
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',
text(str: embed_text, font: 'Sans 7',
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'
@@ -48,7 +48,7 @@ Squib::Deck.new do
end
embed_text = 'Right-aligned works :tool: with :health: and :purse:'
text(str: embed_text, font: 'Sans 21',
text(str: embed_text, font: 'Sans 7',
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'
@@ -57,7 +57,7 @@ Squib::Deck.new do
end
embed_text = ':tool:Center-aligned works :tool: with :health: and :purse:'
text(str: embed_text, font: 'Sans 21',
text(str: embed_text, font: 'Sans 7',
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, data: File.read('spanner.svg')
@@ -66,7 +66,7 @@ Squib::Deck.new do
end
embed_text = 'Markup --- and typography replacements --- with ":tool:" icons <i>won\'t</i> fail'
text(str: embed_text, font: 'Serif 18', markup: true,
text(str: embed_text, font: 'Serif 6', 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'
@@ -74,18 +74,18 @@ Squib::Deck.new do
embed_text = ':tool:' # JUST the icon
text(str: embed_text, x: 0, y: 640, width: 180, height: 50, markup: true,
font: 'Arial 21', align: :center, valign: :middle, hint: :red) do |embed|
font: 'Arial 7', align: :center, valign: :middle, hint: :red) do |embed|
embed.svg key: ':tool:', width: 28, height: 28, file: 'spanner.svg'
end
embed_text = ':purse:' # JUST the icon
text(str: embed_text, x: 200, y: 640, width: 180, height: 50, markup: true,
font: 'Arial 21', align: :center, valign: :middle, hint: :red) do |embed|
font: 'Arial 7', align: :center, valign: :middle, hint: :red) do |embed|
embed.png key: ':purse:', width: 28, height: 28, file: 'shiny-purse.png'
end
embed_text = ":tool: Death to Nemesis bug 103!! :purse:"
text(str: embed_text, font: 'Sans Bold 24', stroke_width: 2,
text(str: embed_text, font: 'Sans Bold 8', stroke_width: 2,
color: :red, stroke_color: :blue, dash: '3 3', align: :left,
valign: :middle, x: 0, y: 700, width: 380, height: 150,
hint: :magenta) do |embed|
@@ -94,7 +94,7 @@ Squib::Deck.new do
end
embed_text = 'You can adjust the icon with dx and dy. Normal: :tool: Adjusted: :heart:'
text(str: embed_text, font: 'Sans 18', x: 400, y: 640, width: 180,
text(str: embed_text, font: 'Sans 6', x: 400, y: 640, width: 180,
height: 300, hint: :magenta) do |embed|
embed.svg key: ':tool:', width: 28, height: 28, file: 'spanner.svg'
embed.svg key: ':heart:', width: 28, height: 28, dx: 10, dy: 10,
@@ -102,7 +102,7 @@ Squib::Deck.new do
end
embed_text = "Native sizes work too\n:tool:\n\n\n\n\n\n:shiny-purse:\n\n\n\n\n\n:tool2:"
text(str: embed_text, font: 'Sans 18', x: 600, y: 640, width: 180,
text(str: embed_text, font: 'Sans 6', x: 600, y: 640, width: 180,
height: 475, hint: :magenta) do |embed|
embed.svg key: ':tool:', width: :native, height: :native,
file: 'spanner.svg'
@@ -118,7 +118,7 @@ end
Squib::Deck.new(cards: 3) do
background color: :white
str = 'Take 1 :tool: and gain 2 :health:.'
text(str: str, font: 'Sans', font_size: [18, 26, 35],
text(str: str, font: 'Sans', font_size: [6, 8.5, 11.5],
x: 0, y: 0, width: 180, height: 300, valign: :bottom,
align: :left, ellipsize: false, justify: false, hint: :cyan) do |embed|
embed.svg key: ':tool:', width: [28, 42, 56], height: [28, 42, 56], file: 'spanner.svg'
samples/text/_text.rb
+8 -8
View File
@@ -5,31 +5,31 @@ Squib::Deck.new(width: 1000, height: 1250) do
draw_graph_paper width, height
sample 'Font strings are quite expressive. Specify family, modifiers, then size. Font names with spaces in them should end with a comma to help with parsing.' do |x, y|
text font: 'Arial bold italic 32', str: 'Bold and italic!', x: x, y: y - 50
text font: 'Arial weight=300 32', str: 'Light bold!', x: x, y: y
text font: 'Times New Roman, 32', str: 'Times New Roman', x: x, y: y + 50
text font: 'NoSuchFont,Arial 32', str: 'Arial Backup', x: x, y: y + 100
text font: 'Arial bold italic 11', str: 'Bold and italic!', x: x, y: y - 50
text font: 'Arial weight=300 11', str: 'Light bold!', x: x, y: y
text font: 'Times New Roman, 11', str: 'Times New Roman', x: x, y: y + 50
text font: 'NoSuchFont,Arial 11', str: 'Arial Backup', x: x, y: y + 100
end
sample 'Specify width and height to see a text box. Also: set "hint" to see the extents of your text box' do |x, y|
text str: 'This has fixed width and height.', x: x, y: y,
hint: :red, width: 300, height: 100, font: 'Serif bold 24'
hint: :red, width: 300, height: 100, font: 'Serif bold 8'
end
sample 'If you specify the width only, the text will ellipsize.' do |x, y|
text str: 'The meaning of life is 42', x: x - 50, y: y,
hint: :red, width: 350, font: 'Serif bold 22'
hint: :red, width: 350, font: 'Serif bold 7'
end
sample 'If you specify the width only, and turn off ellipsize, the height will auto-stretch.' do |x, y|
text str: 'This has fixed width, but not fixed height.', x: x, y: y,
hint: :red, width: 300, ellipsize: false, font: 'Serif bold 24'
hint: :red, width: 300, ellipsize: false, font: 'Serif bold 8'
end
sample 'The text method returns the ink extents of each card\'s rendered text. So you can custom-fit a shape around it.' do |x, y|
['Auto fit!', 'Auto fit!!!!' ].each.with_index do |str, i|
text_y = y + i * 50
extents = text str: str, x: x, y: text_y, font: 'Sans Bold 24'
extents = text str: str, x: x, y: text_y, font: 'Sans Bold 8'
# Extents come back as an array of hashes, which can get split out like this
text_width = extents[0][:width]
samples/text/_text_options.rb
+17 -17
View File
@@ -11,28 +11,28 @@ Squib::Deck.new(width: 825, height: 1125, cards: 3) do
rect x: 30, y: 30, width: 128, height: 128, x_radius: 25, y_radius: 25
# Arrays are rendered over each card
text str: data['name'], x: 250, y: 55, font: 'Arial weight=900 54'
text str: data['level'], x: 65, y: 40, font: 'Arial 72', color: :burnt_orange
text str: data['name'], x: 250, y: 55, font: 'Arial weight=900 18'
text str: data['level'], x: 65, y: 40, font: 'Arial 24', color: :burnt_orange
text str: 'Font strings are expressive!', x:65, y: 200,
font: 'Impact bold italic 36'
font: 'Impact bold italic 12'
text str: 'Font strings are expressive!', x:65, y: 300,
font: 'Arial,Verdana weight=900 style=oblique 36'
font: 'Arial,Verdana weight=900 style=oblique 12'
text str: 'Font string sizes can be overridden per card.', x: 65, y: 350,
font: 'Impact 36', font_size: [16, 20, 24]
font: 'Impact 12', font_size: [5, 7, 8]
text str: 'This text has fixed width, fixed height, center-aligned, middle-valigned, and has a red hint',
hint: :red,
x: 65, y: 400,
width: 300, height: 125,
align: :center, valign: 'MIDDLE', # these can be specified with case-insenstive strings too
font: 'Serif 16'
font: 'Serif 5'
extents = text str: 'Ink extent return value',
x: 65, y: 550,
font: 'Sans Bold', font_size: [16, 20, 24]
font: 'Sans Bold', font_size: [5, 7, 8]
margin = 10
# Extents come back as an array of hashes, which can get split out like this
ws = extents.inject([]) { |arr, ext| arr << ext[:width] + 10; arr }
@@ -43,28 +43,28 @@ Squib::Deck.new(width: 825, height: 1125, cards: 3) do
# If width & height are defined and the text will overflow the box, we can ellipsize.
text str: "Ellipsization!\nThe ultimate question of life, the universe, and everything to life and everything is 42",
hint: :green, font: 'Arial 22',
hint: :green, font: 'Arial 7',
x: 450, y: 400,
width: 280, height: 180,
ellipsize: true
# Text hints are guides for showing you how your text boxes are laid out exactly
hint text: :cyan
set font: 'Serif 20' # Impacts all future text calls (unless they specify differently)
set font: 'Serif 7' # Impacts all future text calls (unless they specify differently)
text str: 'Text hints & fonts are globally togglable!', x: 65, y: 625
set font: :default # back to Squib-wide default
hint text: :off
text str: 'See? No hint here.',
x: 565, y: 625,
font: 'Arial 22'
font: 'Arial 7'
# Text can be rotated, in radians, about the upper-left corner of the text box.
text str: 'Rotated',
x: 565, y: 675, angle: 0.2,
font: 'Arial 18', hint: :red
font: 'Arial 6', hint: :red
# Text can be justified, and have newlines
text str: longtext, font: 'Arial 16',
text str: longtext, font: 'Arial 5',
x: 65, y: 700,
width: '1.5in', height: inches(1),
justify: true, spacing: -6
@@ -72,7 +72,7 @@ Squib::Deck.new(width: 825, height: 1125, cards: 3) do
# Here's how you embed images into text.
# Pass a block to the method call and use the given context
embed_text = 'Embedded icons! Take 1 :tool: and gain 2:health:. If Level 2, take 2 :tool:'
text(str: embed_text, font: 'Sans 18',
text(str: embed_text, font: 'Sans 6',
x: '1.8in', y: '2.5in', width: '0.85in',
align: :left, ellipsize: false) do |embed|
embed.svg key: ':tool:', width: 28, height: 28, file: 'spanner.svg'
@@ -81,22 +81,22 @@ Squib::Deck.new(width: 825, height: 1125, cards: 3) do
text str: 'Fill n <span fgcolor="#ff0000">stroke</span>',
color: :green, stroke_width: 2.0, stroke_color: :blue,
x: '1.8in', y: '2.9in', width: '0.85in', font: 'Sans Bold 26', markup: true
x: '1.8in', y: '2.9in', width: '0.85in', font: 'Sans Bold 9', markup: true
text str: 'Stroke n <span fgcolor="#ff0000">fill</span>',
color: :green, stroke_width: 2.0, stroke_color: :blue, stroke_strategy: :stroke_first,
x: '1.8in', y: '3.0in', width: '0.85in', font: 'Sans Bold 26', markup: true
x: '1.8in', y: '3.0in', width: '0.85in', font: 'Sans Bold 9', markup: true
text str: 'Dotted',
color: :white, stroke_width: 2.0, dash: '4 2', stroke_color: :black,
x: '1.8in', y: '3.1in', width: '0.85in', font: 'Sans Bold 26', markup: true
x: '1.8in', y: '3.1in', width: '0.85in', font: 'Sans Bold 9', markup: true
#
text str: "<b>Markup</b> is <i>quite</i> <s>'easy'</s> <span fgcolor=\"\#ff0000\">awesome</span>. Can't beat those \"smart\" 'quotes', now with 10--20% more en-dashes --- and em-dashes --- with explicit ellipses too...",
markup: true,
x: 50, y: 1000,
width: 750, height: 100,
valign: :bottom,
font: 'Serif 18', hint: :cyan
font: 'Serif 6', hint: :cyan
save prefix: 'text_options_', format: :png
end