06-15-2014, 04:52 AM | #1 |
Addict
Posts: 398
Karma: 96448
Join Date: Dec 2013
Device: iPad
|
list-style-type bullet
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"; } Do I have to embed a font to get this symbol? Last edited by odedta; 06-15-2014 at 05:01 AM. |
06-15-2014, 09:44 AM | #2 |
Addict
Posts: 243
Karma: 359054
Join Date: Nov 2012
Device: default
|
Have you tried:
content: "v"; ? |
Advert | |
|
06-15-2014, 01:59 PM | #3 | |
Wizard
Posts: 1,567
Karma: 7043711
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
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: "❖ "; } 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> Regards Rubén |
|
06-16-2014, 05:30 AM | #4 | |
Addict
Posts: 398
Karma: 96448
Join Date: Dec 2013
Device: iPad
|
Quote:
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: "❖ "; } Last edited by odedta; 06-16-2014 at 06:16 AM. |
|
06-17-2014, 04:02 AM | #5 | |
Addict
Posts: 398
Karma: 96448
Join Date: Dec 2013
Device: iPad
|
I also want this kind of list (see attached - with the star)
So I used this CSS code: Quote:
|
|
Advert | |
|
06-17-2014, 07:30 AM | #6 |
Grand Sorcerer
Posts: 27,605
Karma: 193191846
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
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.
|
06-17-2014, 09:13 AM | #7 | |||
Wizard
Posts: 1,567
Karma: 7043711
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
Quote:
Quote:
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 */ } Regards Rubén Last edited by RbnJrg; 06-17-2014 at 09:29 AM. |
|||
06-17-2014, 11:06 AM | #8 |
Addict
Posts: 398
Karma: 96448
Join Date: Dec 2013
Device: iPad
|
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: "★ "; } Code:
<ul class="List-Style3"> <li class="List-Paragraph3">אני ואני בלבד אחראי ליצור אושר בחיי.</li> </u> On a side note, don't use the CSS rule: Code:
direction:rtl Code:
dir="rtl" Of course this is a bit silly since both will work, but myself, like some others like to get their files validated. Thanks again. |
06-17-2014, 02:15 PM | #9 | |
Wizard
Posts: 1,567
Karma: 7043711
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
Code:
<div class="List-Style3"> <p class="List-Paragraph3">אני ואני בלבד אחראי ליצור אושר בחיי.</p> </div> Rubén |
|
06-17-2014, 02:55 PM | #10 |
Color me gone
Posts: 2,089
Karma: 1445295
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
|
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.
|
06-17-2014, 07:06 PM | #11 |
Addict
Posts: 398
Karma: 96448
Join Date: Dec 2013
Device: iPad
|
@Ruben: not if my HTML contains the attribute dir="rtl" and it does
@mrmikel: I'll try it out, thanks. |
06-18-2014, 08:07 AM | #12 |
Wizard
Posts: 1,567
Karma: 7043711
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
|
06-18-2014, 08:13 AM | #13 |
Addict
Posts: 398
Karma: 96448
Join Date: Dec 2013
Device: iPad
|
I will soon.
|
06-18-2014, 08:43 AM | #14 |
Color me gone
Posts: 2,089
Karma: 1445295
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
|
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/ |
06-18-2014, 09:53 AM | #15 | |
Addict
Posts: 398
Karma: 96448
Join Date: Dec 2013
Device: iPad
|
Quote:
|
|
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Where To Put <style type="text/css"> Code | SeaCanary | Sigil | 4 | 01-28-2014 08:33 PM |
Mobi unordered list style | framallo | Conversion | 1 | 03-23-2011 01:22 PM |
Adding a new file type in "Save to device" list | LARdT | Calibre | 1 | 12-19-2010 11:43 AM |
Bullet List / Changes to Boldface | soulartist | Workshop | 7 | 12-18-2010 08:32 AM |
list-style in CSS? | frabjous | ePub | 2 | 08-13-2009 06:28 PM |