03-06-2019, 07:04 PM | #1 |
Zealot
Posts: 110
Karma: 10
Join Date: Aug 2018
Location: New Jersey
Device: Samsung Tab E nook
|
CSS DropCap w/o indent
In reading the Sigil Users Guide I found out what Dropcap is and really like it.
The problem is I'm also using using first line indent. So even the first line of the Dropcap is indented, not a very good look. (see attachment) How can I remove it from the the first line only. Thanks Brent |
03-06-2019, 08:21 PM | #2 |
null operator (he/him)
Posts: 20,539
Karma: 26944418
Join Date: Mar 2012
Location: Sydney Australia
Device: none
|
So don't indent when there's a dropcap. Open just about any print book, the first paragraph of a chapter won't be indented, whether dropcaps are used or not.
The indents on subsequent paragraphs are there to signify their existence. Without them the reader would have to rely on all paragraphs having short last lines to know when one paragraph ends and another one starts BR |
Advert | |
|
03-06-2019, 08:44 PM | #3 |
Well trained by Cats
Posts: 29,768
Karma: 54401244
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
What BR said
What is hard (and usually needs hand styling), is short FP's (1 liners) where the next Paragraph also starts in the space of the Drop cap. |
03-06-2019, 09:00 PM | #4 |
Zealot
Posts: 110
Karma: 10
Join Date: Aug 2018
Location: New Jersey
Device: Samsung Tab E nook
|
|
03-06-2019, 09:03 PM | #5 |
Zealot
Posts: 110
Karma: 10
Join Date: Aug 2018
Location: New Jersey
Device: Samsung Tab E nook
|
|
Advert | |
|
03-06-2019, 09:08 PM | #6 |
Witchman
Posts: 628
Karma: 788808
Join Date: May 2013
Location: Philippines
Device: Android S5
|
@brent63...To reduce the indent, just find the named style in your stylesheet for the paragraph with a dropcap and just set the text-indent property to 0.
If you want to alter the right-hand spacing of the dropcap to reduce spacing, then just go into the dropcap style or relevant inline style and reduce either the margin-right or the letter-spacing style attribute in the dropcap style. Last edited by slowsmile; 03-06-2019 at 09:13 PM. |
03-06-2019, 09:10 PM | #7 |
null operator (he/him)
Posts: 20,539
Karma: 26944418
Join Date: Mar 2012
Location: Sydney Australia
Device: none
|
|
03-06-2019, 09:17 PM | #8 | |
null operator (he/him)
Posts: 20,539
Karma: 26944418
Join Date: Mar 2012
Location: Sydney Australia
Device: none
|
Quote:
BR |
|
03-06-2019, 09:31 PM | #9 | |
Zealot
Posts: 110
Karma: 10
Join Date: Aug 2018
Location: New Jersey
Device: Samsung Tab E nook
|
Quote:
Below is only part of the my CSS file from my first post. body { display: block; font-size: 1.05em; margin: 5px; text-align: justify; } p { font-style: normal; font-family: Georgia; text-indent: 20px; margin: 5px; } .......... span.dropcap { float: left; font-size: 4.4em; font-weight: ; text-indent: 0px; line-height: .8em; margin-right: 8.0pt; margin-bottom: -0.1em; } Brent |
|
03-06-2019, 09:56 PM | #10 |
Witchman
Posts: 628
Karma: 788808
Join Date: May 2013
Location: Philippines
Device: Android S5
|
To correct your paragraph indent problem you will have to create and add another style at the bottom of your stylesheet. The new style is shown below:
span.no-indent-style { font-style: normal; font-family: Georgia; text-indent: 0; margin: 5px; } After you have created this style then you must then implement it as a class in the dropcaps paragraph within the relevant html file in Sigil. Example below: <p><span class="dropcap">T</span><span class="no-indent-style">he quick brown fox jumped over the hedge...</span></p> To correct the general spacing of text lines to the right of your dropcap you must change or reduce the margin-right value in your span.dropcap styling. See below: span.dropcap { float: left; font-size: 4.4em; font-weight: ; text-indent: 0px; line-height: .8em; margin-right: 3.0pt;------> reduce this value until your are happy margin-bottom: -0.1em; } Last edited by slowsmile; 03-06-2019 at 10:12 PM. |
03-07-2019, 06:07 AM | #11 |
Wizard
Posts: 1,539
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Brent63 and Slowsmile:
IMHO the best aproximation is the following: 1. In the .css stylesheet, we should write the following: Code:
.noindent { text-indent: 0 !important; } Code:
<p class="noindent"><span class="dropcap">T</span>he quick brown fox jumped over the hedge...</p> Rubén |
03-07-2019, 06:59 AM | #12 |
Wizard
Posts: 3,305
Karma: 10259306
Join Date: May 2016
Device: kobo forma, Kobo Libra, Huawei media Tab, fire HD10, PW3 HDX8.9,
|
you should also consider your audience.
you may think dropcaps look cool- the readers of your book(s) may not personally I detest them and they are the first things I rip out of my to-read copy of any book. - so there goes all your hard work! i think they had their place , in the dark ages, keeping bored monks awake as they hand copied. now they just reduce overall readability ( several empirical studies have confirmed - ask google) and the smaller the device screen , the more annoying they become. |
03-07-2019, 09:30 AM | #13 | |
Grand Sorcerer
Posts: 27,545
Karma: 193191846
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
Quote:
Let people learn and experiment for heaven's sake. Last edited by DiapDealer; 03-07-2019 at 10:24 AM. |
|
03-07-2019, 09:49 AM | #14 |
Wizard
Posts: 1,539
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Hard work? It takes less than a minute to put and take drop-caps out of .epub3/.kepub/.azw3/.kfx ebooks. And two minutes at maximun to put and take drop-caps out of epub2/ADE ebooks. It may take a couple of minutes more to resolve special cases (i.e. when the paragraph starts with quotes) but not much else. No hard work at all
Last edited by RbnJrg; 03-07-2019 at 09:53 AM. |
03-07-2019, 09:56 AM | #15 | |
Zealot
Posts: 110
Karma: 10
Join Date: Aug 2018
Location: New Jersey
Device: Samsung Tab E nook
|
Quote:
Brent |
|
Thread Tools | Search this Thread |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Css code to indent first paragraph? | shootist | Editor | 14 | 12-30-2015 06:17 AM |
CSS to indent paragraphs and remove spaces | Alda | Sigil | 7 | 06-20-2014 05:36 AM |
Help with css formatting - first line indent | Alda | Sigil | 11 | 03-22-2013 05:24 AM |
CSS override working for font, not dd indent | FlaSheridn | Calibre | 3 | 10-31-2010 03:06 PM |
Specify indent in css, not with   | James_Wilde | Calibre | 7 | 09-13-2010 09:48 PM |