emacs-orgmode
[Top][All Lists]
Advanced

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

Re: [O] Applying style to a paragraph for HTML export


From: Nick Dokos
Subject: Re: [O] Applying style to a paragraph for HTML export
Date: Thu, 05 May 2011 10:05:20 -0400

Robert Pluim <address@hidden> wrote:

> (I thought this would be a FAQ, but I can't find anything similar)
> 
> Hi,
> 
> I'm exporting from org to html, which is working well. Since my final
> target is MSWord, I'd like to add style information to various
> paragraphs, ie bold, underline etc. I can see how to do eg *bold* for
> individual words, but how do I apply that kind of formatting to a span
> of text?
> 
> (I'm CSS-ignorant, so please use small words and talk slowly)
> 

Reading section 12.5.8, "CSS support", and experimenting a bit,
I came up with a short example that I hope will clarify that section
for the CSS-ignorant (which I mostly am):

--8<---------------cut here---------------start------------->8---
#+OPTIONS: ^:nil
#+STYLE: <style type=text/css> .bold {color: red;} </style>
#+STYLE: <style type=text/css> .inner {color: blue;} </style>

* Headline
  :PROPERTIES:
  :HTML_CONTAINER_CLASS: bold
  :END:
This is a bold section. This is done by using the HTML_CONTAINER_CLASS
property of the subtree and giving it the value bold, then setting the
style for class _bold_ to accomplish the desired goal.

But you can selectively
#+HTML: <span class="inner">
change some things like this
#+HTML: </span>
if you want.
--8<---------------cut here---------------end--------------->8---

Here is what I know about CSS (but take it with the appropriate grain
of salt - as I said, I'm mostly CSS-ignorant):

The thing to remember is that you can add <span>...</span> to delimit
HTML inline elements and <div>...</div> for HTML block elements.

Each can be given a class: <span class="foo">...</span> or an id:
<span id="bar">...</span>. Classes are hierarchical, ids are targeted.

In the style definitions, you write

 .foo { style info; ...}

for classes and

 #bar {style info; ...}

for ids.

So you can use #+HTML: ... to add spans or divs at the appropriate
places, giving them a class or id as you see fit, and then add #+STYLE:
definitions at the top to style them.

Be careful when typing: the slightest error will cause the browser to just
ignore whole swaths of styling, which makes debugging ... interesting.
I tend to edit the html file one tiny thing at a time and redisplaying. When
I've figured out what's wrong, I go back to the org file and try the result.

Nick



reply via email to

[Prev in Thread] Current Thread [Next in Thread]