Shaping the text

roger64 · 09-19-2014, 03:52 AM

Hi

I noticed some nice things when reading a French magazine. I was wondering which tool would allow me to shape nicely blocks of text? Or, to put it in another way, is there a code I could use to shape a text (not only with square angles as you can see).

Find enclosed some examples:

Ghitulescu · 09-19-2014, 05:21 AM

Let's clear the things up.

You haven't seen this in a real ePub, but only on a paper (French) magazine?

roger64 · 09-19-2014, 06:46 AM

Quote:

Originally Posted by Ghitulescu

Let's clear the things up.

You haven't seen this in a real ePub, but only on a paper (French) magazine?

Sorry if I have not been clear. The joint images are indeed a scan of a paper magazine.

Jellby · 09-19-2014, 07:53 AM

Not in ePub 2, with CSS3 (in ePub 3), it may be possible, see here. Whether any real reader will support it, I don't know.

Tex2002ans · 09-19-2014, 08:15 AM

In CSS3 it is called "shapes".

There is also these sites showing off more examples:

http://demosthenes.info/blog/898/Wra...ith-CSS-Shapes
https://www.adobe.com/devnet/html5/a...3-regions.html

And here is a draft of the spec:

http://dev.w3.org/csswg/css-shapes-2/

Quote:

Originally Posted by Jellby

Whether any real reader will support it, I don't know.

I believe iBooks supports the webkit variant of CSS Shapes... although I am not 100% sure (I don't venture into that space).

I could have sworn I saw example EPUBs on Adobe's site somewhere over the past few years.

roger64 · 09-19-2014, 10:07 AM

Hi

Thanks all for your informations and/or your links. Things are changing so quickly in many fields...

DiapDealer · 09-19-2014, 10:14 AM

Just remember: if it looks fancy ... text-reflow and font-resizing will probably try to beat it up and steal its lunch-money.

Ghitulescu · 09-19-2014, 10:53 AM

IMHO these are only gimmicks, that uselessly complicate the things (see where the internet went so far? even the simplest pages suck 3-4Mbytes, while a pure HTML would have costed you only a few kB (some 1000x less)), and thus makes both the eReader and the editing software more prone to errors than before. Let alone debugging one. It would require more resources, more space, more CPU power, more battery, more more more ....

Tex2002ans · 09-19-2014, 11:18 AM

Quote:

Originally Posted by DiapDealer

Just remember: if it looks fancy ... text-reflow and font-resizing will probably try to beat it up and steal its lunch-money.

Yep! Especially those that try to fit text INSIDE of a shape... I can only imagine the horrors that will occur when the font-size gets larger.

The CSS that allows it to just wrap around an alpha of an image seems pretty helpful though.

In LaTeX, there is also this package called shapepar, which does the same thing. You can see a few examples here:

https://tex.stackexchange.com/questi...-shape-in-tikz

Quote:

Originally Posted by Ghitulescu

IMHO these are only gimmicks, that uselessly complicate the things

I agree. Although I bet people were saying the same things with that "new-fangled CSS" over just raw HTML or plain text files.

roger64 · 09-19-2014, 11:44 AM

Quote:

Originally Posted by Tex2002ans

In LaTeX, there is also this package called shapepar, which does the same thing. You can see a few examples here:

https://tex.stackexchange.com/questi...-shape-in-tikz

These LaTeX images are amazing! But we probably need a fixed lay-out to use them properly.

This other remark brings some hope:
"While the Shapes module is expected to be supported in mainstream browsers very soon,..."

I had once (two years ago) made a trial and shaped a text in an EPUB2, but by processing line by line...

See attachment

dgatwood · 09-22-2014, 01:05 AM

I was about to say that WebKit had no support for shape-outside yet, but apparently they added it (but only with -webkit) since I last looked. Cool. So with one extra line of code in my translator code, my books are going to look even better in iBooks.

Edit: No extra lines; just a slightly longer line. Done.

odedta · 09-22-2014, 02:51 AM

This is a CSS 2.1 compatible code and thus EPUB2 compliant:

Code:

<!DOCTYPE html>
<head>
<title>test</title>
<meta charset="utf-8">
</head>
<body>
<p style="margin-left:1%;">If you downloaded it from somewhere else, please let us now: http://www.dll-files.com/contact.php</p>

<p style="margin-left:3%;">Installation instructions:</p>

<p style="margin-left:5%;">Open the zip-file you downloaded from DLL-files.com.</p>

<p style="margin-left:7%;">Extract the .dll-file to a location on your computer.</p>

<p style="margin-left:9%;">We recommend you to unzip the file to the directory of the program that is requesting the file. </p>

<p style="margin-left:10%;">If that doesn't work, you will have to extract the file to your system directory. </p>

<p style="margin-left:9%;">By default, this is C:\Windows\System (Windows 95/98/Me), C:\WINNT\System32 (Windows NT/2000), or C:\Windows\System32 (Windows XP, Vista, 7).</p>

<p style="margin-left:7%;">Make sure overwrite any existing files (but make a backup copy of the original file). </p>

<p style="margin-left:5%;">Reboot your computer. </p>

<p style="margin-left:3%;">If the problem still occurs, try the following: </p>

<p style="margin-left:1%;">If you have any other problems, see our HELP-section at www.dll-files.com</p>

</body>
</html>

Which will give you this result, see attached file.
If you play with the values i'm sure you will get a better result. This was tested as a web page in chrome and works well, I see no reason why it shouldn't work in an EPUB2 or EPUB3.

If you follow this logic you can recreate what you are looking for.

dgatwood · 09-25-2014, 01:08 AM

Quote:

Originally Posted by Jellby

Not in ePub 2, with CSS3 (in ePub 3), it may be possible, see here. Whether any real reader will support it, I don't know.

To be pedantic, nothing prohibits an EPUB 2 reader from supporting CSS3 features, and nothing prohibits an EPUB 2 book from using them, so long as you're aware that those properties will be ignored by a sizable percentage of readers.

The key, IMO, whether you're designing for EPUB 2 or EPUB 3, is to design content in a way that degrades gracefully. If the specification you're designing for doesn't mandate support for a CSS feature that you want to use, you must make certain that your book still looks acceptable in readers that don't support that feature.

As for real readers, iBooks apparently supports it, and most WebKit-based readers on iOS probably do as well, at least in versions of iOS where CSS shape support is enabled by default. And in the MOBI world, KF8-based Kindle readers probably will in the future, whenever they move to a later version of WebKit.

Ghitulescu · 09-25-2014, 05:25 AM

Quote:

Originally Posted by dgatwood

The key, IMO, whether you're designing for EPUB 2 or EPUB 3, is to design content in a way that degrades gracefully. If the specification you're designing for doesn't mandate support for a CSS feature that you want to use, you must make certain that your book still looks acceptable in readers that don't support that feature.

That's the whole point.

Nobody will do this, intentionally or non-intentionally.

The editors, because this would cause a tremendous workload (imagine testing the book on many devices) in a business that is not a money fountain anyway.

The manufacturers because they want to sell the newest model, not to support the old ones (lost money twice: once for support, twice for preventing the sales of the new ones).

See how fast HDTV TV-sets with no HDMI disappeared from the homes? Put something incompatible with the older generations, then make that thing be unavoidable (or desired) and bingo, people will bring themselves the old gear to the dumpster

Hitch · 09-27-2014, 09:51 PM

Quote:

Originally Posted by Ghitulescu

That's the whole point.

Nobody will do this, intentionally or non-intentionally.

The editors, because this would cause a tremendous workload (imagine testing the book on many devices) in a business that is not a money fountain anyway.

We already do that, and you're right; it's expensive and time-consuming, the latter being the same as the former.

Quote:

The manufacturers because they want to sell the newest model, not to support the old ones (lost money twice: once for support, twice for preventing the sales of the new ones).

See how fast HDTV TV-sets with no HDMI disappeared from the homes? Put something incompatible with the older generations, then make that thing be unavoidable (or desired) and bingo, people will bring themselves the old gear to the dumpster

You have to except Amazon from that statement. They have religiously supported all of their devices, from the get-go. It's one of the reasons that I admire them, particularly compared to Apple, which epitomizes your model. They are extremely callous about their customers' expenditures.

Hitch

09-19-2014, 03:52 AM	#1
roger64 Wizard Posts: 2,608 Karma: 3000161 Join Date: Jan 2009 Device: Kindle PW3 (wifi)	Shaping the text Hi I noticed some nice things when reading a French magazine. I was wondering which tool would allow me to shape nicely blocks of text? Or, to put it in another way, is there a code I could use to shape a text (not only with square angles as you can see). Find enclosed some examples: Attached Thumbnails Last edited by roger64; 09-19-2014 at 03:54 AM.

09-22-2014, 01:05 AM	#11
dgatwood Curmudgeon Posts: 629 Karma: 1623086 Join Date: Jan 2012 Device: iPad, iPhone, Nook Simple Touch	I was about to say that WebKit had no support for shape-outside yet, but apparently they added it (but only with -webkit) since I last looked. Cool. So with one extra line of code in my translator code, my books are going to look even better in iBooks. Edit: No extra lines; just a slightly longer line. Done. Last edited by dgatwood; 09-22-2014 at 01:10 AM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Text formatting issues when creating IDs/hyperlinking text	rnuss	Sigil	2	09-28-2013 06:49 AM
Generate epub using text-recognized text in PDF not Pictures.	lordofazeroth	Conversion	0	09-19-2013 04:16 PM
Need help w/very simple task: page of Word text > Kindle text I can share w/friends	kearnine	Conversion	1	10-17-2012 08:25 PM
How to make Amazon Kindle Text to Speech skip over some text	xsaero00	Kindle Developer's Corner	3	06-18-2011 07:09 PM
Good text to java midlet, to read text in phones	sucahyo	Workshop	1	02-18-2005 12:56 PM

09-19-2014, 05:21 AM	#2
Ghitulescu Fanatic Posts: 563 Karma: 403106 Join Date: Aug 2014 Device: PRS-T1	Let's clear the things up. You haven't seen this in a real ePub, but only on a paper (French) magazine?

09-19-2014, 07:53 AM	#4
Jellby frumious Bandersnatch Posts: 7,516 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	Not in ePub 2, with CSS3 (in ePub 3), it may be possible, see here. Whether any real reader will support it, I don't know.

09-19-2014, 10:07 AM	#6
roger64 Wizard Posts: 2,608 Karma: 3000161 Join Date: Jan 2009 Device: Kindle PW3 (wifi)	Hi Thanks all for your informations and/or your links. Things are changing so quickly in many fields...

09-19-2014, 10:14 AM	#7
DiapDealer Grand Sorcerer Posts: 27,552 Karma: 193191846 Join Date: Jan 2010 Device: Nexus 7, Kindle Fire HD	Just remember: if it looks fancy ... text-reflow and font-resizing will probably try to beat it up and steal its lunch-money.

09-19-2014, 10:53 AM	#8
Ghitulescu Fanatic Posts: 563 Karma: 403106 Join Date: Aug 2014 Device: PRS-T1	IMHO these are only gimmicks, that uselessly complicate the things (see where the internet went so far? even the simplest pages suck 3-4Mbytes, while a pure HTML would have costed you only a few kB (some 1000x less)), and thus makes both the eReader and the editing software more prone to errors than before. Let alone debugging one. It would require more resources, more space, more CPU power, more battery, more more more ....

Advert

Advert