Embedding the style when exporting to HTML

Embedding the style when exporting to HTML

[Francesco Pizzolante]

Hi,

I'm still in the process of managing a project with Org while trying to
evangelize my colleagues to Org. The goal is to share documents in the
simplest possible way.

What I'm trying to do is to have my style be embedded (inline) to my exported
HTML file.

Today, it can done by customizing org-export-html-style or add my whole style
in my Org buffer with the #+STYLE directive.

This has the following disadvantages:

- I have to share my .emacs file with my customizations in order for other
  people be able to export the Org file as required. Thus if someone has
  another configuration file, it will not work;

- The style itself (the CSS) is not easily testable and not separate from the
  data (it is included in my Org file or in my .emacs).

It would be good to specify a file for the style in the Org buffer itself and
have an option telling Org if the style has to be embedded (or inline) to the
exported HTML or not.

Having this option has the following advantages:

- my exported file is self-contained and is easily shareable;

- anybody can export the Org file and will get the desired result (even with a
  different Emacs config);

- the CSS itself is easily testable and maintainable by different guys and
  can even be a different project.

What do you think?

Is it possible to achieve this with the current version of Org?

Any suggestion is welcome.

Regards,
Francesco


_______________________________________________
Emacs-orgmode mailing list
Please use `Reply All' to send replies to the list.
Emacs-orgmode-mXXj517/zsQ@public.gmane.org
http://lists.gnu.org/mailman/listinfo/emacs-orgmode

Re: Embedding the style when exporting to HTML

[Christian Moe]

Hi,

The following would make the exported HTML link to an external stylesheet.

#+STYLE: <link rel="stylesheet" type="text/css" href="my_style.css"/>

But that 's not what you're after? You want the stylesheet to be 
/outside/ (linked from) your Org file, but /embedded in/ the exported 
HTML? Did I get that right?

CM

On 12/14/10 5:54 PM, Francesco Pizzolante wrote:
> Hi,
>
> I'm still in the process of managing a project with Org while trying to
> evangelize my colleagues to Org. The goal is to share documents in the
> simplest possible way.
>
> What I'm trying to do is to have my style be embedded (inline) to my exported
> HTML file.
>
> Today, it can done by customizing org-export-html-style or add my whole style
> in my Org buffer with the #+STYLE directive.
>
> This has the following disadvantages:
>
> - I have to share my .emacs file with my customizations in order for other
>    people be able to export the Org file as required. Thus if someone has
>    another configuration file, it will not work;
>
> - The style itself (the CSS) is not easily testable and not separate from the
>    data (it is included in my Org file or in my .emacs).
>
> It would be good to specify a file for the style in the Org buffer itself and
> have an option telling Org if the style has to be embedded (or inline) to the
> exported HTML or not.
>
> Having this option has the following advantages:
>
> - my exported file is self-contained and is easily shareable;
>
> - anybody can export the Org file and will get the desired result (even with a
>    different Emacs config);
>
> - the CSS itself is easily testable and maintainable by different guys and
>    can even be a different project.
>
> What do you think?
>
> Is it possible to achieve this with the current version of Org?
>
> Any suggestion is welcome.
>
> Regards,
> Francesco
>
>
> _______________________________________________
> Emacs-orgmode mailing list
> Please use `Reply All' to send replies to the list.
> Emacs-orgmode@gnu.org
> http://lists.gnu.org/mailman/listinfo/emacs-orgmode
>


-- 

Christian Moe
E-mail:  mail@christianmoe.com
Website: http://christianmoe.com

Re: Embedding the style when exporting to HTML

[Francesco Pizzolante]

Hi Christian,

> The following would make the exported HTML link to an external stylesheet.
>
> #+STYLE: <link rel="stylesheet" type="text/css" href="my_style.css"/>
>
> But that 's not what you're after? You want the stylesheet to be /outside/
> (linked from) your Org file, but /embedded in/ the exported HTML? Did I get
> that right?

Indeed. That would be the ideal solution for me: it would bring all the
advantages I'm looking for:

- separate files for developing separately the style and the content;

- anybody could export the file as no special Emacs configuration is needed;

- the exported file would be self-contained.

Do you think about one way of doing this?

Thanks,
Francesco

Re: Embedding the style when exporting to HTML

[Christian Moe]

On 12/14/10 10:05 PM, Francesco Pizzolante wrote:
> Hi Christian,
>
>> The following would make the exported HTML link to an external stylesheet.
>>
>> #+STYLE:<link rel="stylesheet" type="text/css" href="my_style.css"/>
>>
>> But that 's not what you're after? You want the stylesheet to be /outside/
>> (linked from) your Org file, but /embedded in/ the exported HTML? Did I get
>> that right?
>
> Indeed. That would be the ideal solution for me: it would bring all the
> advantages I'm looking for:
>
> - separate files for developing separately the style and the content;
>
> - anybody could export the file as no special Emacs configuration is needed;
>
> - the exported file would be self-contained.
>
> Do you think about one way of doing this?

Something roughly along these lines, perhaps (warning: I'm still 
fairly new to Elisp and this comes with ABSOLUTELY NO WARRANTY):

#+BEGIN_SRC emacs-lisp
   (defun cm/org-export-html-embed-style ()
     (make-local-variable 'org-export-html-style)
     (setq org-export-html-style "")
     (let ((re "#\\+STYLE:\\s +<link\\s +rel=[\"']stylesheet[\"']\\s 
+type=[\"']text/css[\"']\\s +href=[\"']\\(.*\\)[\"']/>")
           (oldbuf (current-buffer))
           stylesheet
           css)
       (goto-char (point-min))
       (while (re-search-forward re (point-max) t)
         (setq stylesheet (match-string 1))
           (with-current-buffer (find-file stylesheet)
             (setq css (format "\n<style>\n%s\n</style>\n" 
(buffer-string))))
           (setq org-export-html-style (concat org-export-html-style 
css)))
       (switch-to-buffer oldbuf)))

   (org-add-hook 'org-export-first-hook 'cm/org-export-html-embed-style)
#+END_SRC

Usage: Link to one or more external stylesheets from your Org file.

: #+STYLE: <link rel='stylesheet' type='text/css' href='test5.css'/>

The contents of the stylesheet(s) will be embedded in the exported 
HTML between <style> tags.

The function swaps the ontent of the external stylesheets into 
org-export-html-style. If you're already using that variable, the 
above might screw things up. I'd prefer to use 
org-export-html-style-extra, but for some reason that didn't work..

This function doesn't remove the links to the external stylesheets, 
because it operates on the original document, not on a copy. You could 
add an org-export-preprocess-hook to remove the links, reusing the 
regexp from this example. (Running the above function as an 
org-export-preprocess-hook does not work.)

Hope this helps,
CM

Re: Embedding the style when exporting to HTML

[René]

Christian Moe <mail <at> christianmoe.com> writes:

> Something roughly along these lines, perhaps (warning: I'm still 
> fairly new to Elisp and this comes with ABSOLUTELY NO WARRANTY):

Thanks.

Works great