Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > Workshop

Notices

Reply
 
Thread Tools Search this Thread
Old 04-21-2014, 02:32 AM   #1
GrannyGrump
Persnickity Nitpicker
GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.
 
GrannyGrump's Avatar
 
Posts: 553
Karma: 2587520
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
[Tutorial] Convert TEXT to SVG IMAGE with Inkscape

A Mini-tutorial inspired by a Wikimedia article: http://commons.wikimedia.org/wiki/He...t_and_Inkscape


Usually, text is best represented as text, because it enables users to search, copy, and edit.

Sometimes your ebook has text that needs special fonts, such as math equations, foreign language quotations, or even just a fancy display font. But maybe you can't embed that special font because the license won't allow it, or the reading device won't support it.

A Scalable Vector Graphic is the next best thing to the font itself – the image can be scaled large or small with no loss of quality.

Note that not all reader devices/software support SVG.


YOU WILL NEED:
-- Inkscape, a free and open source vector drawing program http://www.inkscape.org/en/ . Get the portable version and you can run it from anywhere.

-- (optional) A text editor to display the text and font you are working with.

--
TIP: You don't always have to install fonts you're working with if you only have a temporary requirement. Most programs, including Inkscape, can utilize fonts that are simply loaded into memory. Load fonts by opening them with the Windows Font Viewer (should be offered on right-click Open With...), or use a font manager with the ability to load them, such as Nexus Font: http://xiles.net/nexusfont/.


THE PROCEDURE:

1.-- LAUNCH INKSCAPE, with a new document.

Note on navigating the editing window:
Mouse wheel scrolls up/down;
SHIFT + Mouse wheel scrolls left/right;
CTRL + mouse wheel zooms the window;
SHIFT + Right-button-drag pans the window.


2.-- CREATE THE TEXT:
-- On the left toolbar, click the large "A" icon, "Create and edit text objects" [or press F8].

-- Click in the editing window, and type or paste desired text.

-- The text should be surrounded by a dotted marquee.
Click image for larger version

Name:	02.png
Views:	67
Size:	31.4 KB
ID:	121908
(click to enlarge)


3.-- SELECT THE TEXT OBJECT:
If the dotted selection marquee has disappeared after typing, editing, or other mouse activty:
-- Choose menu EDIT -> Select All [or CTRL + A]; this should display the marquee.

Click image for larger version

Name:	03a.png
Views:	51
Size:	32.6 KB
ID:	121909
(click to enlarge)


4.-- FORMATTING:
(This is a very brief overview of some of the possible formatting; see the Inkscape user's manual for more.)
Remember, to apply formatting; the text must be selected (dotted selection marquee must be visible); use the "Select All" command as needed.

Additionally, you can click and drag to highlight individual words or characters within the selection, and apply specific formatting to the highlighted bits only.

4a.-- SET THE FONT AND FONT-SIZE:
-- Choose menu TEXT -> Text and font... ; or click the large "T" icon on the right-hand toolbar, or press SHIFT + CTRL + T.
Click image for larger version

Name:	04a1.png
Views:	64
Size:	18.3 KB
ID:	121911
(click to enlarge)

-- The dialog provides formatting options:

-- Use the "Font" tab to choose the desired font name, style, size, alignment, line-height.
-- Use the "Text" tab to edit the actual text (add or delete text, spaces, line feeds).
-- Click "Apply" when ready. (It seems to be a long delay until the "apply" button becomes active; this may be computer-related.)
Click image for larger version

Name:	04a2.png
Views:	48
Size:	10.5 KB
ID:	121912
(click to enlarge)

4b.-- (optional) Apply fill color:
-- Default colors can be chosen from the pallet at the bottom of the window.
-- To create a custom color: select menu OBJECT -> Fill and stroke, or Shift + Ctrl + F, or click the small "Fill:" field in bottom left corner; then use the Fill tab to create colors. Remember that some shades may be hard to read when they are converted on a grey-scale device.


5.-- (optional) Set the default display size:
For simple text fragments in ebooks, this step should not be necessary, but is included here for informational purposes.

-- With the dotted marquee displayed; at top of the left toolbar, click the "arrow" icon [or F1]. A number of arrow-handles surround the dotted marquee.
Click image for larger version

Name:	03b.png
Views:	52
Size:	17.3 KB
ID:	121910
(click to enlarge)

-- To resize the text, hold down the "Ctrl" key and drag the handles to resize text as desired. The Ctrl key keeps aspect ratio intact and prevents distortion.
-- To move the object, CTRL + click-and-drag inside the marquee.
Click image for larger version

Name:	05.png
Views:	52
Size:	12.3 KB
ID:	121913
(click to enlarge)


6.-- RESIZE THE PAGE TO FIT:
--Select menu FILE -> Document Properties... [or SHIFT + CTRL + D].
Click image for larger version

Name:	06a.png
Views:	51
Size:	28.4 KB
ID:	121914
(click to enlarge)

-- Click the button "Resize page to content..." The caption changes to "Resize page to drawing or selection". Click again to auto-crop the selected text object.
Click image for larger version

Name:	06b.png
Views:	54
Size:	27.4 KB
ID:	121915
(click to enlarge)


7.-- CONVERT TO PATH:
Choose menu PATH -> Object to Path, [or SHIFT + CTRL + C].
This converts the text object into "paths": the text becomes an image. If you don't do this, readers will only be able to see the SVG properly if they have that font installed.
Click image for larger version

Name:	07.png
Views:	57
Size:	32.0 KB
ID:	121916
(click to enlarge)


8.-- SAVE THE FILE:
Choose menu FILE -> Save As [or SHIFT + CTRL + S], and save your new svg file with desired filename. To prevent compatibility problems, be sure to save as "Plain SVG", not as "Inkscape SVG".


THE RESULT:
Now you have an SVG image replica of your special text, which can be scaled up and down nicely. Style the <height:> to size in ems, so it will resize in synch with surrounding text.

Vertical alignment of inline images might not line up perfectly smoothly with surrounding text, but neither would any other image, and svg will give a better appearance overall. Try tweaking the "vertical-align:" styling for better results.

The screenshot shows two fragments of Greek text, and a bit of blackletter.
Click image for larger version

Name:	09a.png
Views:	84
Size:	13.4 KB
ID:	121917
(click to enlarge)


Example code:

Spoiler:
Code:
/* the css*/
/*The div must set centering, not the img class*/

.svgDiv {
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left: 0;
margin-top: 2.0em;
margin-bottom: 1.0em;
text-indent: 0;
text-align: center;
page-break-inside: avoid;
}
.svgBlock {
height: 2.25em;
max-width: 100%;
}
.svgInline {
vertical-align: bottom;
height: 1.10em;
}

/*the html*/

<p>‘Yet it is not the old imperious god of the fatal bow – <img alt="Erôs anikate machan" class="svgInline" src="../Images/greekA.svg"/> – not that – nor even the placid respectable <img alt="storge" class="svgInline" src="../Images/greekB.svg"/> – but something still unnamed, perhaps more mysterious, more divine! Only one must stoop to see it, old fellow, one must stoop!’</p>

<p>...........................</p>

<p>... and who shall dare to play Rhadamanthus, to appraise the record, and to decide how much of it is solid achievement, and how much the merest child’s play?</p>

<div class="svgDiv">
<img alt="The End" class="svgBlock" id="end00" src="../Images/end00.svg"/>
</div>


================

Ok, all done. I hope you found this useful.

Last edited by GrannyGrump; 04-21-2014 at 02:52 AM.
GrannyGrump is offline   Reply With Quote
Old 04-21-2014, 07:49 AM   #2
RbnJrg
Evangelist
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 438
Karma: 299856
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Congratulations Granny! Very good and perfectly clear all explanations; nothing to add them But in order to your issues to "vertical-align" images, you can get perfect results by setting "percentages" (positives or negatives) as a value for the property. For example:

Code:
.svgInline {
   vertical-align: -0.1%;
   height: 1.10em;
}
You also could try with "vertical-align: text-bottom" instead of "vertical-align: bottom" but in the case you presented practically is the same. Also could be a very good idea to use "pixels" as measurement:

Code:
.svgInline {
   vertical-align: -5px; /* values also can be positives */
   height: 1.10em;
}
But regarding the tutorial you made, just one word: perfect!

Regards
Rubén
RbnJrg is online now   Reply With Quote
Old 04-21-2014, 12:20 PM   #3
roger64
Wizard
roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.
 
Posts: 1,402
Karma: 846401
Join Date: Jan 2009
Device: KoboGlo


Wow! You've reached the top professional level!
roger64 is offline   Reply With Quote
Old 04-22-2014, 05:38 AM   #4
GrannyGrump
Persnickity Nitpicker
GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.
 
GrannyGrump's Avatar
 
Posts: 553
Karma: 2587520
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
Why, thank you, kind folks, for the compliments!


@Ruben, funny, but I've used percentages with success to adjust alignment on superscripts, but it didn't want to work for me on this little test. I'll give that another try, maybe I wasn't aggressive enough. Would pixels work sizing with ems and the font size set very large or very tiny? I need to play with that a bit.

Thanks for the tips!
GrannyGrump is offline   Reply With Quote
Reply

Tags
inkscape, svg, text conversion, text image, tutorial

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Svg wrapper and image resizing Nabodita ePub 24 05-02-2014 12:21 AM
[Tutorial] Bitmap tracing -- Quick & Simple SVG Text Images with Inkscape GrannyGrump Workshop 9 04-16-2014 03:16 AM
Inkscape SVG Validation Problems doubleshuffle ePub 2 12-20-2013 12:37 AM
Scaling up an image via SVG Kayto ePub 27 01-26-2013 03:38 AM
Image overlayed over text (but text visible if image disabled)? Kaylee Skylyn ePub 5 08-01-2012 05:27 PM


All times are GMT -4. The time now is 06:54 PM.


MobileRead.com is a privately owned, operated and funded community.