list-style-type bullet

[odedta]

Hello,

I want to style a list just like the one in Microsoft Word. (View attached)

I used the following CSS code to style it:

.List-Style2
{
	list-style-type:none;
}

.List-Paragraph2:before {
	content: "\0x0076";
}

This doesn't work, I tried all sorts of codes but nothing seems to work, I prefer to avoid image if there is a working code for this because of scalability.

Do I have to embed a font to get this symbol?

[DomesticExtremis]

Have you tried:

content: "&#x0076";

?

[RbnJrg]

Originally Posted by odedta

Hello,

I want to style a list just like the one in Microsoft Word. (View attached)

I used the following CSS code to style it:

.List-Style2
{
	list-style-type:none;
}

.List-Paragraph2:before {
	content: "\0x0076";
}

This doesn't work, I tried all sorts of codes but nothing seems to work, I prefer to avoid image if there is a working code for this because of scalability.

Do I have to embed a font to get this symbol?

Try this, maybe it works:

1. In your .css stylesheet:

.List-Style2 {
    display: list-item;
    margin-left: 2em;
    list-style-type: none;
}

.List-Style2:before {
    margin-left: -1.1em;
    content: "❖ ";
}

2. In your .xhtml file:

<p class="List-Style2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc.</p>

Of course, since we are using the :before pseudo-element, we are going to have some "issues" under ADE.

Regards
Rubén

[odedta]

Originally Posted by RbnJrg

Of course, since we are using the :before pseudo-element, we are going to have some "issues" under ADE.

Regards
Rubén

I'd like to have best compatibility so what do you suggest? using images and droppping scalability? or sticking to this solution?

EDIT: I have tried every solution people offered here and it doesn't work. I assume it's because I need to embed the Windings font.

EDIT2: argh, I created a new ePub in Sigil with the settings you gave and it works perfect. Thanks RbnJrg.

EDIT3: I am having a bit of trouble with setting this right for hebrew text: see attached for result. CSS code is here:

body
{
	font-family:"Arial";
	margin:0;
	padding:0;
}
.List-Style2 {
    display: inline;
    margin-left: 2em;
    list-style-type: none;
}

.List-Style2:before {
    margin-right: 1em;
    content: "❖ ";
}

[odedta]

I also want this kind of list (see attached - with the star)

So I used this CSS code:

.List-Paragraph3:before {
margin-right:-1.3em;
content: "★ ";
}

And got this result (see attached)

[DiapDealer]

Html lists are one of those things that are guaranteed to render differently on different devices/apps. The more "creative" you get with them (or their css), the higher the chance that your intentions for them will fail on anything but one targeted platform.

[RbnJrg]

Originally Posted by odedta

I'd like to have best compatibility so what do you suggest? using images and droppping scalability? or sticking to this solution?

For best compatibility, I'd suggest to use a svg image, so you won't have any problem with scalability. Personally I use a lot of svg images as fleurons and separators.

EDIT2: argh, I created a new ePub in Sigil with the settings you gave and it works perfect. Thanks RbnJrg.

You are welcome

EDIT3: I am having a bit of trouble with setting this right for hebrew text: see attached for result. CSS code is here:

body
{
    font-family:"Arial";
    margin:0;
    padding:0;
}
.List-Style2 {
    display: inline;
    margin-left: 2em;
    list-style-type: none;
}

.List-Style2:before {
    margin-right: 1em;
    content: "❖ ";
}

Hmmm, I think you should use:

body {
    font-family: "Arial";
    margin:0;
    padding: 0;
    direction: rtl; /* in order to set the writting direction from right to left */
}
.List-Style2 {
    display: list-item; /* display as list-item and not inline */
    margin-right: 1em; /* here margin-right instead of margin-left */
    list-style-type: none;
}

.List-Style2:before {
    margin-right: -1em;
    content: " ❖"; /* here the space is BEFORE the symbol */
}

I think the code should work

Regards
Rubén

[odedta]

Well, this works:

.List-Style3 {
  list-style-type: none;
}
.List-Paragraph3 {
  font-family: "Arial", sans-serif;
  font-size: 0.8em;
  text-align: justify;
  display:list-item;
}
.List-Paragraph3:before {
  margin-right:-1.3em;
  content: "★ ";
}

for html:

<ul class="List-Style3">
      <li class="List-Paragraph3">אני ואני בלבד אחראי ליצור אושר בחיי.</li>
</u>

Turns out you were right, the font mattered, if I used "Arial" instead of some other font I embedded it will work, the problem is now that I don't want the list items to show in Arial so I need to use a span tag for this symbol, oh well, this seems fixed.

On a side note, don't use the CSS rule:

direction:rtl

Instead use:

dir="rtl"

In your html files in order to get the desired effect since direction:rtl will not pass validation for EPUB3.
Of course this is a bit silly since both will work, but myself, like some others like to get their files validated.

Thanks again.

[RbnJrg]

Originally Posted by odedta

Well, this works:

.List-Style3 {
  list-style-type: none;
}
.List-Paragraph3 {
  font-family: "Arial", sans-serif;
  font-size: 0.8em;
  text-align: justify;
  display:list-item;
}
.List-Paragraph3:before {
  margin-right:-1.3em;
  content: "★ ";
}

for html:

<ul class="List-Style3">
      <li class="List-Paragraph3">אני ואני בלבד אחראי ליצור אושר בחיי.</li>
</u>

Turns out you were right, the font mattered, if I used "Arial" instead of some other font I embedded it will work, the problem is now that I don't want the list items to show in Arial so I need to use a span tag for this symbol, oh well, this seems fixed.

On a side note, don't use the CSS rule:

direction:rtl

Instead use:

dir="rtl"

In your html files in order to get the desired effect since direction:rtl will not pass validation for EPUB3.
Of course this is a bit silly since both will work, but myself, like some others like to get their files validated.

Thanks again.

You are welcome but I'm a bit confused In your "List-Paragraph3" you are not setting the writting direction from right to left, so the list symbol should appear on the left side and not in the right side as you wanted. Besides, if you are using unordered list, then is not necessary for you to use "display: list-item". That property you could employ it if you use <p> tags instead of <li>, for example:

<div class="List-Style3">
      <p class="List-Paragraph3">אני ואני בלבד אחראי ליצור אושר בחיי.</p>
</div>

Regards
Rubén

[mrmikel]

Arial is a proprietary typeface, so I hope you aren't figuring on distributing it. The wikipedia pages says Liberation Sans is similar, but whether it works the same way for this stuff you'll have to find out.

[odedta]

@Ruben: not if my HTML contains the attribute dir="rtl" and it does

@mrmikel: I'll try it out, thanks.

[RbnJrg]

Originally Posted by odedta

@Ruben: not if my HTML contains the attribute dir="rtl" and it does

OK! Just a last thing, did you check how the epub looks under ADE? Remember that Nook and Sony are device readers based on ADE.

[odedta]

I will soon.

[mrmikel]

There is software, the Sony Reader Library, which pretty closely shows how an epub will be displayed on a Sony Reader:

http://esupport.sony.com/swu/5997/US/EN/

[odedta]

Originally Posted by mrmikel

There is software, the Sony Reader Library, which pretty closely shows how an epub will be displayed on a Sony Reader:

http://esupport.sony.com/swu/5997/US/EN/

Yes I know, once I finish the ePub I will check it on all readers I have access to