Custom char for bullet list?

544 views
Skip to first unread message

Boris Kheyfets

unread,
Oct 28, 2012, 1:38:41 PM10/28/12
to sphin...@googlegroups.com
How do I use custom bullet char?

Is there a way I can give a bullet list a class -- so to assign "–" char as a bullet char for a given list (and have the default bullets in other lists)?

I need it to cite dialogs:

-- The next time I tell You that I saw something -- You believe me!
-- Oh, relax -- now that we saw Dracula, the Wolfman and a Monster -- there's nobody to fright us anymore. *(and the Invisible man in the rostrum -- lights a cigar)*

But there's no list directive -- so I could not assign it a class, and customize list through a css.

Guenter Milde

unread,
Oct 28, 2012, 4:08:56 PM10/28/12
to sphin...@googlegroups.com
On 2012-10-28, Boris Kheyfets wrote:

> [-- Type: text/plain, Encoding: quoted-printable --]

> How do I use custom bullet char?

> Is there a way I can give a bullet list a class -- so to assign "–" char as
> a bullet char for a given list (and have the default bullets in other
> lists)?

> I need it to cite dialogs:

> -- The next time I tell You that I saw something -- You believe me!
> -- Oh, relax -- now that we saw Dracula, the Wolfman and a Monster --
> there's nobody to fright us anymore. *(and the Invisible man in the rostrum

You can use the reSt `class`_ directive. In Sphinx, "class" may be
overwritten by another directive (for documenting classes in OO programms)
and you must use the (somewhat misleading) "cssclass" alias.

.. _class: http://docutils.sourceforge.net/docs/ref/rst/directives.html#class

example::

.. class:: dialogue

- Good morning.
- Hm.

Günter



Boris Kheyfets

unread,
Nov 5, 2012, 4:09:13 PM11/5/12
to sphinx...@googlegroups.com, sphin...@googlegroups.com, mi...@users.sf.net
Doesn't work.

Below are excerpts from rst, css and the resulting html.

rst:

.. _test:

######
 test
######

.. class:: dialog

   * foo
   * bar
   * baz

.. class:: dialog
..

   * foo
   * bar
   * baz


css:


ul.dialog {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
li.dialog {
    padding-left: 1em;
    text-indent: -1em;
}
li.dialog:before {
    content: "–";
    padding-right: 7px;
}

resulting html:

<div class="section" id="test">
  <span id="id1"></span><h1>test<a class="headerlink" href="#test" title="Permalink to this headline">¶</a></h1>
  <dl class="class">
    <dt id="dialog">
      <em class="property">class </em><tt class="descname">dialog</tt><a class="headerlink" href="#dialog" title="Permalink to this definition">¶</a></dt>
    <dd><ul class="simple">
        <li>foo</li>
        <li>bar</li>
        <li>baz</li>
      </ul>
  </dd></dl>

  <dl class="class">
    <dt>
      <em class="property">class </em><tt class="descname">dialog</tt></dt>
    <dd></dd></dl>

  <blockquote>
    <div><ul class="simple">
        <li>foo</li>
        <li>bar</li>
        <li>baz</li>
      </ul>
  </div></blockquote>
</div>

Jonathan Waltman

unread,
Nov 6, 2012, 2:13:50 AM11/6/12
to sphinx...@googlegroups.com
On Mon, Nov 5, 2012 at 3:09 PM, Boris Kheyfets <kheyf...@gmail.com> wrote:
> Doesn't work.
>
> Below are excerpts from rst, css and the resulting html.
>
> rst:
>
> .. _test:
>
> ######
> test
> ######
>
> .. class:: dialog
>
> * foo
> * bar
> * baz
>
> .. class:: dialog
> ..
>
> * foo
> * bar
> * baz

I think you have a couple of issues here.

1. You need to use "cssclass" instead of "class"
if you are using Sphinx. The example Guenter gave
should work correctly for rst2html but not for Sphinx.

2. The second example is formatted incorrectly.
Remove the empty comment ".." following the
class directive.

The following is an example for Sphinx:

.. cssclass:: dialog

* foo
* bar
* baz


Expected output:

<ul class="dialog simple">
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>

--
Jonathan Waltman

Guenter Milde

unread,
Jan 30, 2013, 10:02:03 AM1/30/13
to sphinx...@googlegroups.com
On 2012-11-05, Boris Kheyfets wrote:

After the Gmane interface to sphinx-devel works again, I re-post my
answer:

> Doesn't work.

* Don't nest the "to-be classified" object into the "class" directive. See
http://docutils.sourceforge.net/docs/ref/rst/directives.html#class

* Remember that the class argument is set to the list. Style list elements
that are children of the "classified" list:

.. raw:: html

<style>
ul.dialog {
list-style: none;
margin-left: 0;
padding-left: 0;
}
ul.dialog li {
padding-left: 1em;
text-indent: -1em;
ul.dialog li:before {
display: inline-block;
text-align: right;
vertical-align: top;
content: "–";
padding-right: 7px;
</style>


.. class:: dialog

* foo
* bar
* baz

Works for me (kind of). Sorting out the right margins and padding is left as
exercise for the reader. I did something similar when re-styling ordered
lists in the html4css2.css stylesheet of the html-strict writer (in the
sandbox).

Günter


Reply all
Reply to author
Forward
0 new messages