ePub with custom CSS that places images

ePub with custom CSS that places images

[nkalvi]

[-- Attachment #1.1: Type: text/plain, Size: 722 bytes --]

Is it possible to include image files (in ePub output), that are referenced 
form custom.css only (i.e. not included in any of the markdown sources)?

-- 
You received this message because you are subscribed to the Google Groups "pandoc-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pandoc-discuss+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To post to this group, send email to pandoc-discuss-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To view this discussion on the web visit https://groups.google.com/d/msgid/pandoc-discuss/e3085f47-4c7d-4eb2-8a00-40eed720befc%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[-- Attachment #1.2: Type: text/html, Size: 1133 bytes --]

Re: ePub with custom CSS that places images

[Pablo Rodríguez]

On 02/08/2015 03:44 PM, nkalvi wrote:
> Is it possible to include image files (in ePub output), that are
> referenced form custom.css only (i.e. not included in any of the
> markdown sources)?

I think there is a way to achieve it. I haven’t tested it myself. And it
might not work in ePub.

In markdown source:

<div class="css-image">
</div>

In CSS file:

.css-image {
  background-image: url(myimage.svg);
  background-repeat: no-repeat;
  background-position: left top;
  }

But you will have a problem with that image: it won’t be listed in the
contents.opf file.

Just in case it might help,


Pablo
-- 
http://www.ousia.tk

-- 
You received this message because you are subscribed to the Google Groups "pandoc-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pandoc-discuss+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To post to this group, send email to pandoc-discuss-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To view this discussion on the web visit https://groups.google.com/d/msgid/pandoc-discuss/54D792F6.2070800%40web.de.
For more options, visit https://groups.google.com/d/optout.

Re: ePub with custom CSS that places images

[nkalvi]

[-- Attachment #1.1: Type: text/plain, Size: 1820 bytes --]

Thanks for the suggestion. 

I do have a workaround that's not elegant: in the markdown file include the 
images inside a div with display set to none. This way the images get 
copied so they will be available in the css (not elegant because the images 
get renamed when copied).

F.ex.  image1.png included this way will be copied as media/file0.png 
inside the ePub.

That's why I'm looking for a 'proper' solution :)


On Sunday, February 8, 2015 at 11:46:52 AM UTC-5, ousia wrote:
>
> On 02/08/2015 03:44 PM, nkalvi wrote: 
> > Is it possible to include image files (in ePub output), that are 
> > referenced form custom.css only (i.e. not included in any of the 
> > markdown sources)? 
>
> I think there is a way to achieve it. I haven’t tested it myself. And it 
> might not work in ePub. 
>
> In markdown source: 
>
> <div class="css-image"> 
> </div> 
>
> In CSS file: 
>
> .css-image { 
>   background-image: url(myimage.svg); 
>   background-repeat: no-repeat; 
>   background-position: left top; 
>   } 
>
> But you will have a problem with that image: it won’t be listed in the 
> contents.opf file. 
>
> Just in case it might help, 
>
>
> Pablo 
> -- 
> http://www.ousia.tk 
>

-- 
You received this message because you are subscribed to the Google Groups "pandoc-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pandoc-discuss+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To post to this group, send email to pandoc-discuss-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To view this discussion on the web visit https://groups.google.com/d/msgid/pandoc-discuss/d78de0c3-b9a2-4f2c-aa88-ac88873c1ccc%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[-- Attachment #1.2: Type: text/html, Size: 2897 bytes --]

Re: ePub with custom CSS that places images

[Pablo Rodríguez]

On 02/08/2015 05:56 PM, nkalvi wrote:
> Thanks for the suggestion. 
> 
> I do have a workaround that's not elegant: in the markdown file include
> the images inside a div with display set to none. This way the images
> get copied so they will be available in the css (not elegant because the
> images get renamed when copied).
> 
> F.ex.  image1.png included this way will be copied as media/file0.png
> inside the ePub.
> 
> That's why I'm looking for a 'proper' solution :)

Sorry, but I don’t understand what are you trying to achieve.

It might be curiosity, but it may also help others to help you.

Could you describe what you are trying to do? (Again, there might be a
simpler way to solve things.)


Pablo
-- 
http://www.ousia.tk

-- 
You received this message because you are subscribed to the Google Groups "pandoc-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pandoc-discuss+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To post to this group, send email to pandoc-discuss-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To view this discussion on the web visit https://groups.google.com/d/msgid/pandoc-discuss/54D7A1A1.6090303%40web.de.
For more options, visit https://groups.google.com/d/optout.

Re: ePub with custom CSS that places images

[nkalvi]

[-- Attachment #1.1: Type: text/plain, Size: 2034 bytes --]

Sure - sorry for not being clear.

I'm using images in chapter headings 
<http://guidohenkel.com/2011/01/take-pride-in-your-ebook-formatting-part-viii/>
. 

To achieve this with Pandoc, I include the image in the markdown source

<div class="hiddengraphic">
![chapter heading mark](vignette.png)
</div>

And then referencing it from the custom css (specified on pandoc's command 
line)

div.section.level1 > h1 {
 font-size: 2em;
 padding-bottom: 60px;

 text-align: center;
 background: url('media/file0.png') no-repeat bottom center;
}


On Sunday, February 8, 2015 at 12:49:26 PM UTC-5, ousia wrote:
>
> On 02/08/2015 05:56 PM, nkalvi wrote: 
> > Thanks for the suggestion. 
> > 
> > I do have a workaround that's not elegant: in the markdown file include 
> > the images inside a div with display set to none. This way the images 
> > get copied so they will be available in the css (not elegant because the 
> > images get renamed when copied). 
> > 
> > F.ex.  image1.png included this way will be copied as media/file0.png 
> > inside the ePub. 
> > 
> > That's why I'm looking for a 'proper' solution :) 
>
> Sorry, but I don’t understand what are you trying to achieve. 
>
> It might be curiosity, but it may also help others to help you. 
>
> Could you describe what you are trying to do? (Again, there might be a 
> simpler way to solve things.) 
>
>
> Pablo 
> -- 
> http://www.ousia.tk 
>

-- 
You received this message because you are subscribed to the Google Groups "pandoc-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pandoc-discuss+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To post to this group, send email to pandoc-discuss-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To view this discussion on the web visit https://groups.google.com/d/msgid/pandoc-discuss/2be53ac8-9b60-4050-8093-c51a24ff99a3%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[-- Attachment #1.2: Type: text/html, Size: 6583 bytes --]

Re: ePub with custom CSS that places images

[nkalvi]

[-- Attachment #1.1: Type: text/plain, Size: 623 bytes --]

and this:

div.hiddengraphic {
 display: none;
}



-- 
You received this message because you are subscribed to the Google Groups "pandoc-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pandoc-discuss+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To post to this group, send email to pandoc-discuss-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To view this discussion on the web visit https://groups.google.com/d/msgid/pandoc-discuss/6a54fefd-4823-4dda-b28c-bb518b454ffb%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[-- Attachment #1.2: Type: text/html, Size: 2032 bytes --]

Re: ePub with custom CSS that places images

[Pablo Rodríguez]

On 02/08/2015 07:04 PM, nkalvi wrote:
> Sure - sorry for not being clear.
> 
> I'm using images in chapter headings
> <http://guidohenkel.com/2011/01/take-pride-in-your-ebook-formatting-part-viii/>. 

I wonder whether using fonts would be easier
(http://www.fontspace.com/category/vignettes,
www.dafont.com/theme.php?cat=712).


Pablo
-- 
http://www.ousia.tk

Re: ePub with custom CSS that places images

[nkalvi]

[-- Attachment #1.1: Type: text/plain, Size: 1202 bytes --]

Thank you very much - it looks like a better solution in this example.

I still think a proper way include media referred only from custom css file 
will be helpful.

On Sunday, February 8, 2015 at 1:27:48 PM UTC-5, ousia wrote:
>
> On 02/08/2015 07:04 PM, nkalvi wrote: 
> > Sure - sorry for not being clear. 
> > 
> > I'm using images in chapter headings 
> > <
> http://guidohenkel.com/2011/01/take-pride-in-your-ebook-formatting-part-viii/>. 
>
>
> I wonder whether using fonts would be easier 
> (http://www.fontspace.com/category/vignettes, 
> www.dafont.com/theme.php?cat=712). 
>
>
> Pablo 
> -- 
> http://www.ousia.tk 
>

-- 
You received this message because you are subscribed to the Google Groups "pandoc-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pandoc-discuss+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To post to this group, send email to pandoc-discuss-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To view this discussion on the web visit https://groups.google.com/d/msgid/pandoc-discuss/71e7c8f0-b5c3-47ae-9027-77c29cd7b4ab%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[-- Attachment #1.2: Type: text/html, Size: 3703 bytes --]

Re: ePub with custom CSS that places images

[Raniere Silva]

[-- Attachment #1: Type: text/plain, Size: 761 bytes --]

Hi nkalvi,

> Is it possible to include image files (in ePub output), that are referenced 
> form custom.css only (i.e. not included in any of the markdown sources)?

After I think a little about your problem I find one solution.

You can embed your image into CSS using base64,
e.g. https://en.wikipedia.org/wiki/Data_URI_scheme#CSS.
This will solve your problem when using

    $ pandoc -f markdown -t epub -o my-book.epub --epub-stylesheet=style-with-base64.css book.md

The advantage of this approach is that you will avoid
hacking pandoc behavior by adding the figure in the markdown and hide it.

The disadvantage is that you will have a little more work to update the CSS
but since I expected that you don't do it often this will be OK.

Cheers,
Raniere

Re: ePub with custom CSS that places images

[nkalvi]

[-- Attachment #1.1: Type: text/plain, Size: 1576 bytes --]

Thank you Raniere, I'll give this a try. I've seen the same method being 
suggested for embedding fonts also.


On Sunday, February 8, 2015 at 6:43:36 PM UTC-5, Raniere Silva wrote:
>
> Hi nkalvi, 
>
> > Is it possible to include image files (in ePub output), that are 
> referenced 
> > form custom.css only (i.e. not included in any of the markdown sources)? 
>
> After I think a little about your problem I find one solution. 
>
> You can embed your image into CSS using base64, 
> e.g. https://en.wikipedia.org/wiki/Data_URI_scheme#CSS. 
> This will solve your problem when using 
>
>     $ pandoc -f markdown -t epub -o my-book.epub 
> --epub-stylesheet=style-with-base64.css book.md 
>
> The advantage of this approach is that you will avoid 
> hacking pandoc behavior by adding the figure in the markdown and hide it. 
>
> The disadvantage is that you will have a little more work to update the 
> CSS 
> but since I expected that you don't do it often this will be OK. 
>
> Cheers, 
> Raniere 
>

-- 
You received this message because you are subscribed to the Google Groups "pandoc-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pandoc-discuss+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To post to this group, send email to pandoc-discuss-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To view this discussion on the web visit https://groups.google.com/d/msgid/pandoc-discuss/4dea055a-dda0-4014-a4e1-d3062aa8262a%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[-- Attachment #1.2: Type: text/html, Size: 3060 bytes --]