MobileRead Forums - list-style-type bullet

MobileRead Forums (https://www.mobileread.com/forums/index.php)

- ePub (https://www.mobileread.com/forums/forumdisplay.php?f=179)

- - list-style-type bullet (https://www.mobileread.com/forums/showthread.php?t=241106)

odedta

06-15-2014 05:52 AM

list-style-type bullet

1 Attachment(s)

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:

Code:

.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

06-15-2014 10:44 AM

Have you tried:

content: "&#x0076";

?

RbnJrg

06-15-2014 02:59 PM

Quote:

Originally Posted by odedta (Post 2851796)

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:

Code:

.List-Style2

{

        list-style-type:none;

}



.List-Paragraph2:before {

        content: "\0x0076";

}

Try this, maybe it works:

1. In your .css stylesheet:

Code:

.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:

Code:

<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

06-16-2014 06:30 AM

2 Attachment(s)

Quote:

Originally Posted by RbnJrg (Post 2851996)

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:

Code:

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

06-17-2014 05:02 AM

2 Attachment(s)

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

So I used this CSS code:

Quote:

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

And got this result (see attached)

DiapDealer

06-17-2014 08:30 AM

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

06-17-2014 10:13 AM

Quote:

Originally Posted by odedta (Post 2852378)

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.

Quote:

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

You are welcome :)

Quote:

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

Code:

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:

Code:

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

06-17-2014 12:06 PM

Well, this works:

Code:

.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:

Code:

<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:

Code:

direction:rtl

Instead use:

Code:

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

06-17-2014 03:15 PM

Quote:

Originally Posted by odedta (Post 2853331)

Well, this works:

Code:

.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:

Code:

<ul class="List-Style3">

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

</u>

Code:

direction:rtl

Instead use:

Code:

dir="rtl"

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:

Code:

<div class="List-Style3">

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

</div>

Regards
Rubén

mrmikel

06-17-2014 03:55 PM

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

06-17-2014 08:06 PM

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

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

RbnJrg

06-18-2014 09:07 AM

Quote:

Originally Posted by odedta (Post 2853661)

@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

06-18-2014 09:13 AM

I will soon.

mrmikel

06-18-2014 09:43 AM

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

06-18-2014 10:53 AM

Quote:

Originally Posted by mrmikel (Post 2854033)

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 :)

All times are GMT -4. The time now is 10:13 PM.