Text rectangle

roger64 · 10-04-2012, 02:33 AM

Hi

Looking some paper books (these things happen), I found this (see screenshot) which looks nice and gave me the idea to adapt it for some MR ebooks.

However the text block shape must be perfectly rectangular to look nice. Is it possible to achieve this on a digital book? I already have the small-caps.

Jellby · 10-04-2012, 04:05 AM

Not with ePub 2.1, but in CSS3 (maybe some day usable in ePub 3) there is "text-align-last: justify", which together with "text-align: justify" should give you what you want.

roger64 · 10-04-2012, 05:44 AM

Ah... so we'll wait a little. Thanks for the reply.

Doitsu · 10-04-2012, 07:46 AM

How about creating an image with Inkscape? By manipulating the spacing between letters and words and the font size for each line you should be able to get an image that'll be a close match of the hardcopy.

roger64 · 10-04-2012, 11:14 AM

I don't practice Inkscape but I'll have a look.

JSWolf · 10-04-2012, 03:28 PM

Why not try putting it in a simple table of 1 row and 1 column and using that to get the text to do what you want?

Jellby · 10-05-2012, 04:33 AM

He wants all lines to be justified to both margins, I don't think a table does that.

pdurrant · 10-05-2012, 04:59 AM

This is a bit of a hack, but might be suitable for small amounts of text. If you aren't worried about where the line breaks come in the block of text, it could be simplified, but it looks to me like you wanted specific line breaks and for all lines to be justified.

It works by making sure there's some invisible text (the non-breaking spaces) that's forced onto the next line as a unit (that's the non-breaking bit), but that won't go onto a second line (as it's white space).

By forcing the line height to be smaller than 100%, we make the spacing between the lines adjust as we want.

By limit the width of the paragraph block, we prevent unfortunate wrapping or non-wrapping.

I suspect it'll be possible to centre the text block as well, perhaps by wrapping the paragraph in another div.

Code:

<html>
<body>
<p style="line-height:60%; text-align:justify; min-width: 20em; max-width:40em">
This is some text in a paragraph to be &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
fully justified by having lots of spaces  at the &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
end which will cause the last line to justify. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
</body>
</html>

10-04-2012, 02:33 AM	#1
roger64 Wizard Posts: 2,624 Karma: 3120635 Join Date: Jan 2009 Device: Kindle PW3 (wifi)	Text rectangle Hi Looking some paper books (these things happen), I found this (see screenshot) which looks nice and gave me the idea to adapt it for some MR ebooks. However the text block shape must be perfectly rectangular to look nice. Is it possible to achieve this on a digital book? I already have the small-caps. Attached Thumbnails Last edited by roger64; 10-04-2012 at 02:39 AM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Draw a rectangle around several PDF pages at the same time	thebestjeter	PDF	3	09-22-2011 09:38 AM
How to make Amazon Kindle Text to Speech skip over some text	xsaero00	Kindle Developer's Corner	3	06-18-2011 07:09 PM
Error text overwrites page text?	troymc	Sigil	6	07-07-2010 09:07 PM
Text tool for formatting Gutenberg text files	bob_ninja	Workshop	5	11-13-2007 12:28 PM
Good text to java midlet, to read text in phones	sucahyo	Workshop	1	02-18-2005 12:56 PM

10-04-2012, 04:05 AM	#2
Jellby frumious Bandersnatch Posts: 7,546 Karma: 19001583 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	Not with ePub 2.1, but in CSS3 (maybe some day usable in ePub 3) there is "text-align-last: justify", which together with "text-align: justify" should give you what you want.

10-04-2012, 05:44 AM	#3
roger64 Wizard Posts: 2,624 Karma: 3120635 Join Date: Jan 2009 Device: Kindle PW3 (wifi)	Ah... so we'll wait a little. Thanks for the reply.

10-04-2012, 07:46 AM	#4
Doitsu Grand Sorcerer Posts: 5,725 Karma: 24031401 Join Date: Dec 2010 Device: Kindle PW2	How about creating an image with Inkscape? By manipulating the spacing between letters and words and the font size for each line you should be able to get an image that'll be a close match of the hardcopy.

10-04-2012, 11:14 AM	#5
roger64 Wizard Posts: 2,624 Karma: 3120635 Join Date: Jan 2009 Device: Kindle PW3 (wifi)	I don't practice Inkscape but I'll have a look.

10-04-2012, 03:28 PM	#6
JSWolf Resident Curmudgeon Posts: 79,670 Karma: 145864619 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	Why not try putting it in a simple table of 1 row and 1 column and using that to get the text to do what you want?

10-05-2012, 04:33 AM	#7
Jellby frumious Bandersnatch Posts: 7,546 Karma: 19001583 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	He wants all lines to be justified to both margins, I don't think a table does that.

Advert

Advert