Best way to do an "art gallery"? - Page 2

Psymon · 11-06-2014, 07:23 AM

Okay! I finally got around to fiddling with this a bit (sorry, but I was sick for a week, and then got busy with other things), and tried out the SVG way of doing up my "art gallery," but I can't say that I like it very much, how things display. I had to make some changes to the SVG code that Oded provided earlier in order to get it to validate, but what I ended up with basically displays virtually the same as his "invalid" code (at least, Sigil's validator tells me his was invalid).

In any case, I'm starting to think that I'll just do this up basically in plain ol' HTML -- see the attached epub, which has both an HTML version of what I came up with, followed by the SVG version. Looking at it in ADE, I don't know why the latter page comes out with the image looking so small, rather than filling the width of the screen (more than it does), but for the most part the HTML version seems to come out just fine, it's only if one resizes the window in ADE (on a PC) to an, um, let's say "unfortunate" size that one ends up with the caption on the next page, instead of below the image -- but that's easy to fix simply by resizing the window, of course, and I can only assume that on devices where you can't resize the "window" that things will display just fine (all my images are exactly the same size/aspect ratio as the paintings shown here).

I guess I'm just wondering if there's any reason why I shouldn't just simply go with the HTML version instead, since it pretty much displays everything exactly how I want things to?

PS/EDIT: Oh, it just occurred to me that in the HTML version, I probably should have just set my image width/height to 90% (or something), and I'm guessing that that would probably help with the caption not bumping over to the next page in some contexts -- right?

DaleDe · 11-06-2014, 12:56 PM

Here is a revised SVG page:

Code:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Walden and Beyond</title>
  <link href="../Styles/walden.css" rel="stylesheet" type="text/css" />
  
<style type="text/css">
@page {
    padding: 0;
    margin: 0;
    }
  body {
    text-align: center;
    padding: 0;
    margin: 0;
  }
  .image {
    width: 100%;
  }
</style>
</head>

<body>
      <svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 2048 1600"  
	  xmlns:xlink="http://www.w3.org/1999/xlink">
        <image height="1536" width="2048" xlink:href="../Images/cranch1840-the_us_capitol.jpg" />

        <text x="900" y="1550" font-size="40">The U.S. Capitol (1840)</text>
      </svg>
</body>
</html>

Notice it rescales both the image and the text together and does not allow the text to be on a different page.

Dale

Psymon · 11-06-2014, 01:06 PM

Quote:

Originally Posted by DaleDe

Notice it rescales both the image and the text together and does not allow the text to be on a different page.

Oh, cool, thank you, Dale, I'll try that out later today!

Are there any issues with having multiple instances of those in one file, with page breaks in-between (basically to avoid that issue that I brought up in another thread, where separate HTML files inserted a blank page between files)?

Thanks again! That'll definitely be nice to not have to worry about the caption bumping over to the next page.

odedta · 11-06-2014, 01:19 PM

@bobmcconn: if you want your book to look exactly the same or all readers fixed layout epub is the way to go, supported mostly in the newest of readers so if you have iPad3 and Kindle Fire you should be fine.
I disagree with DD about it being a lot more work. Both versions of ePub would work fine if you use DD's are Psy's examples posted here, it is a matter of taste really, how you want your final result to look like.

@Psy: a small tip, you're using both inline and external styles. Meaning CSS inside the HTML and outside, in the CSS file itself. You can use multiple classes for any tag but using spaces to separate them. It is good practice to keep all CSS outside of your HTML... it makes it that much easier to read by you and other people.

DaleDe · 11-06-2014, 01:30 PM

Quote:

Originally Posted by Psymon

Oh, cool, thank you, Dale, I'll try that out later today!

Are there any issues with having multiple instances of those in one file, with page breaks in-between (basically to avoid that issue that I brought up in another thread, where separate HTML files inserted a blank page between files)?

Thanks again! That'll definitely be nice to not have to worry about the caption bumping over to the next page.

Separate files always generate a new page but you can just duplicate the text I gave you and then modify the content as many times as needed. Be especially aware of portrait images and if you need a new page I would do it after a portrait image.

You can also tweak the sizes of things as needed. Note that the canvas (viewport) is bigger than the image to allow for the text to be on the canvas.

Dale

Psymon · 11-06-2014, 02:39 PM

Okay, I've been playing with this just now, and as far as the image goes, that looks fine, but I'm struggling a bit with the caption.

Re the SVG code you gave me before, Dale, the first part was as follows...

Code:

      <svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 2048 1600"  
	  xmlns:xlink="http://www.w3.org/1999/xlink">
        <image height="1536" width="2048" xlink:href="../Images/cranch1840-the_us_capitol.jpg" />

The caption seemed too close to the image, but by simply changing the height="1536" to height="1500", that seemed to solve that problem.

However, if possible I'd like to bump up the font size of the caption, too, which seems rather too tiny. In that regard, your code continues...

Code:

        <text x="900" y="1550" font-size="40">The U.S. Capitol (1840)</text>
      </svg>

I must be slow, because I don't understand that font-size bit at all. What would be nice if I could set it as a percentage, like the font sizes I use throughout the rest of the book, but I tried that and it doesn't work.

So I went digging in the wiki about SVG re "units"...

http://www.w3.org/TR/SVG11/coords.html#Units

...and all that does is confuse me even more! Oh, and changing the font size in that bit of code, above, to 60 (or whatever) does increase the size, but it doesn't keep it centered. I'm looking at the other figures you have for the x- and y-coordinates, and I don't understand how you came up with those numbers, i.e. the "math" behind it, relative to the size of the viewbox or whatever else. I'm sure the answer must be in the wiki there somewhere, but I don't even know where to begin to look (although "units" jumped out at me in the table of contents for the page, re the above).

Sorry to bug you about this -- my brain has just never been very good with this kind of thing. :/

odedta · 11-06-2014, 04:27 PM

Code:

<text x="900" y="1550" style="font-size:2em">The U.S. Capitol (1840)</text>

DaleDe · 11-06-2014, 04:49 PM

The x,y coordinates in the text line determine where it starts. The font-size by default is in pixels. You should also be able to use em I believe. If you look at the viewBox="0 0 2048 1600" you may notice that the width is the same as your images and the height is a bit more. I think yours were 1536. This leaves quite a few pixels for the text. You can increase the 1600 number if you wish to make more room. SVG has its own entry for fonts as well if you want a certain one. x is increase left to right while y increases downward when specifying where the text should start. When you use different size readers the numbers will scale accordingly.

Dale

Psymon · 11-06-2014, 05:15 PM

Quote:

Originally Posted by odedta

Code:

<text x="900" y="1550" style="font-size:2em">The U.S. Capitol (1840)</text>

Interesting... I tried that, and the text actually got smaller than it was before! I would have thought that it would get bigger, like, pretty much twice the size (give or take, if not exactly, i.e. 2em) what the basefont size is for my text throughout the rest of my book (which is set at 100%).

What an "em" is is relative to whatever one's font size is to begin with, of course -- what exactly is this basing what "2em" (or whatever) is relative to?

In any case, thanks, Oded! That's getting me a little closer -- even if I'm still a bit confused.

And to Dale...

Quote:

Originally Posted by DaleDe

The x,y coordinates in the text line determine where it starts. The font-size by default is in pixels. You should also be able to use em I believe. If you look at the viewBox="0 0 2048 1600" you may notice that the width is the same as your images and the height is a bit more. I think yours were 1536. This leaves quite a few pixels for the text. You can increase the 1600 number if you wish to make more room.

Ah, okay, I think I'm finally starting to understand what all those numbers represent.

Quote:

SVG has its own entry for fonts as well if you want a certain one.

It would appear that it's just using the font I specified in my style sheet -- although it's not using the font size that I specified.

Quote:

x is increase left to right while y increases downward when specifying where the text should start. When you use different size readers the numbers will scale accordingly.

Well, that's odd. So the only way to center the text is to basically "eyeball" it, and do up each and every caption individually (since they're all a different length, of course)? You can't just tell it to "center"? That's a bit of a pain -- not only to have to play with each and every caption individually, but also if the person is using a reader that can't used embedded fonts, or if they choose to go with a different font, or for whatever other reason that a different font ends up being used, then that can also affect line length, too, of course. And then things won't necessarily be centered anymore.

There's no way to just tell the text to be centered, no matter how long the line is (depending on the caption)?

odedta · 11-06-2014, 06:14 PM

@Psy: There is a lot of information online, you can use this to understand px to em conversion better. In any case if you're working with HTML / CSS you need to familiarize yourself with the font measurement units. px,pt,em,rem

DaleDe · 11-06-2014, 06:33 PM

Quote:

Originally Posted by Psymon

There's no way to just tell the text to be centered, no matter how long the line is (depending on the caption)?

Yes, there is see http://commons.oreilly.com/wiki/inde...ssentials/Text for all kinds of things about text. You can specify the x,y coordinates to be the start, middle, or end of the line.

Code:

<g style="font-size: 14pt;">
<path d="M 100 10 100 100" style="stroke: gray; fill: none;"/>
<text x="100" y="30" style="text-anchor: start">Start</text>
<text x="100" y="60" style="text-anchor: middle">Middle</text>
<text x="100" y="90" style="text-anchor: end">End</text>
</g>

Dale

DaleDe · 11-06-2014, 07:00 PM

By the way, you may have noticed that I used "style" in many places in this example. SVG is just like HTML in this respect. It also support CSS and you can mix SVG CSS and HTML CSS in the same file.

odedta · 11-06-2014, 07:02 PM

It doesn't support all CSS, at least some stuff that I tried to include in style didn't work.

DaleDe · 11-06-2014, 07:06 PM

Quote:

Originally Posted by odedta

It doesn't support all CSS, at least some stuff that I tried to include in style didn't work.

It supports its own attributes, not the HTML ones but the principle is the same. Note text-anchor is an attribute for TEXT. Each element has its own attributes. A Path and a circle, etc.

Dale

Toxaris · 11-07-2014, 02:05 AM

Quote:

Originally Posted by DaleDe

Yes, there is see http://commons.oreilly.com/wiki/inde...ssentials/Text for all kinds of things about text. You can specify the x,y coordinates to be the start, middle, or end of the line.

Code:

<g style="font-size: 14pt;">
<path d="M 100 10 100 100" style="stroke: gray; fill: none;"/>
<text x="100" y="30" style="text-anchor: start">Start</text>
<text x="100" y="60" style="text-anchor: middle">Middle</text>
<text x="100" y="90" style="text-anchor: end">End</text>
</g>

Dale

IIRC the Adobe engine does not support the text-anchor in SVG at all. Other rendering engines might be fine.

11-06-2014, 02:39 PM	#21
Psymon Chief Bohemian Misfit Posts: 571 Karma: 462964 Join Date: May 2013 Device: iPad, ADE	Okay, I've been playing with this just now, and as far as the image goes, that looks fine, but I'm struggling a bit with the caption. Re the SVG code you gave me before, Dale, the first part was as follows... Code: <svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 2048 1600" xmlns:xlink="http://www.w3.org/1999/xlink"> <image height="1536" width="2048" xlink:href="../Images/cranch1840-the_us_capitol.jpg" /> The caption seemed too close to the image, but by simply changing the height="1536" to height="1500", that seemed to solve that problem. However, if possible I'd like to bump up the font size of the caption, too, which seems rather too tiny. In that regard, your code continues... Code: <text x="900" y="1550" font-size="40">The U.S. Capitol (1840)</text> </svg> I must be slow, because I don't understand that font-size bit at all. What would be nice if I could set it as a percentage, like the font sizes I use throughout the rest of the book, but I tried that and it doesn't work. So I went digging in the wiki about SVG re "units"... http://www.w3.org/TR/SVG11/coords.html#Units ...and all that does is confuse me even more! Oh, and changing the font size in that bit of code, above, to 60 (or whatever) does increase the size, but it doesn't keep it centered. I'm looking at the other figures you have for the x- and y-coordinates, and I don't understand how you came up with those numbers, i.e. the "math" behind it, relative to the size of the viewbox or whatever else. I'm sure the answer must be in the wiki there somewhere, but I don't even know where to begin to look (although "units" jumped out at me in the table of contents for the page, re the above). Sorry to bug you about this -- my brain has just never been very good with this kind of thing. :/

11-06-2014, 04:27 PM	#22
odedta Addict Posts: 398 Karma: 96448 Join Date: Dec 2013 Device: iPad	Code: <text x="900" y="1550" style="font-size:2em">The U.S. Capitol (1840)</text>

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
"Save to disk" resizes and pixelates cover art	andredoubleu	Library Management	2	08-27-2013 08:04 AM
Buy an indie-store Kobo mini this week, get "The Art Forger" for free.	oj829	Deals and Resources (No Self-Promotion or Affiliate Links)	4	11-20-2012 01:37 PM
Radio Dramatisation of Iain M. Banks' "The State of the Art"	HarryT	Deals and Resources (No Self-Promotion or Affiliate Links)	4	05-01-2011 07:27 PM
Request to Test "Sun Tzu's The Art of War" eBook	ahi	Workshop	41	05-20-2009 12:12 PM
"The Art and Science of Web Design" free download	Colin Dunstan	Deals and Resources (No Self-Promotion or Affiliate Links)	0	07-01-2005 10:16 AM

11-06-2014, 01:19 PM	#19
odedta Addict Posts: 398 Karma: 96448 Join Date: Dec 2013 Device: iPad	@bobmcconn: if you want your book to look exactly the same or all readers fixed layout epub is the way to go, supported mostly in the newest of readers so if you have iPad3 and Kindle Fire you should be fine. I disagree with DD about it being a lot more work. Both versions of ePub would work fine if you use DD's are Psy's examples posted here, it is a matter of taste really, how you want your final result to look like. @Psy: a small tip, you're using both inline and external styles. Meaning CSS inside the HTML and outside, in the CSS file itself. You can use multiple classes for any tag but using spaces to separate them. It is good practice to keep all CSS outside of your HTML... it makes it that much easier to read by you and other people.

11-06-2014, 04:49 PM	#23
DaleDe Grand Sorcerer Posts: 11,470 Karma: 13095790 Join Date: Aug 2007 Location: Grass Valley, CA Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7	The x,y coordinates in the text line determine where it starts. The font-size by default is in pixels. You should also be able to use em I believe. If you look at the viewBox="0 0 2048 1600" you may notice that the width is the same as your images and the height is a bit more. I think yours were 1536. This leaves quite a few pixels for the text. You can increase the 1600 number if you wish to make more room. SVG has its own entry for fonts as well if you want a certain one. x is increase left to right while y increases downward when specifying where the text should start. When you use different size readers the numbers will scale accordingly. Dale

11-06-2014, 06:14 PM	#25
odedta Addict Posts: 398 Karma: 96448 Join Date: Dec 2013 Device: iPad	@Psy: There is a lot of information online, you can use this to understand px to em conversion better. In any case if you're working with HTML / CSS you need to familiarize yourself with the font measurement units. px,pt,em,rem

11-06-2014, 07:00 PM	#27
DaleDe Grand Sorcerer Posts: 11,470 Karma: 13095790 Join Date: Aug 2007 Location: Grass Valley, CA Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7	By the way, you may have noticed that I used "style" in many places in this example. SVG is just like HTML in this respect. It also support CSS and you can mix SVG CSS and HTML CSS in the same file.

11-06-2014, 07:02 PM	#28
odedta Addict Posts: 398 Karma: 96448 Join Date: Dec 2013 Device: iPad	It doesn't support all CSS, at least some stuff that I tried to include in style didn't work.

Advert

Advert