Thread: Best Way for Drop Caps
View Single Post
Old 07-03-2018, 02:26 PM   #58
Pyjam
Zealot
Pyjam has become a pillar of the MobileRead communityPyjam has become a pillar of the MobileRead communityPyjam has become a pillar of the MobileRead communityPyjam has become a pillar of the MobileRead communityPyjam has become a pillar of the MobileRead communityPyjam has become a pillar of the MobileRead communityPyjam has become a pillar of the MobileRead communityPyjam has become a pillar of the MobileRead communityPyjam has become a pillar of the MobileRead communityPyjam has become a pillar of the MobileRead communityPyjam has become a pillar of the MobileRead community
 
Posts: 143
Karma: 15920
Join Date: Aug 2015
Device: Kindle Voyage
Quote:
Originally Posted by Turtle91 View Post
...FWIW...just throwing in my .02 cents.

If you are using a newer device then it'll likely support pseudo-elements. This makes the CSS and tags much simpler - see below. Of course you can adjust the CSS as desired for your preferences and it sometimes isn't supported by older devices. Also, IMHO, it doesn't treat leading punctuation as well as I'd like. Leading punctuation follows the same styling as the initial letter itself. eg. An open quote symbol would be 3 times as large (font-size:3em) /bold/italic etc as the first letter. I'm used to it, but it would be nice to have a built-in styling option for that frequent occurrence.

Code:
/* First Para in lieu of Drop Caps */
p.first               {text-indent:0; font-size:1em; line-height:1; clear:both}
p.first::first-letter {font-family:serif; font-size:3em; font-weight:bold; float:left;
                       margin:-.1em .05em -.1em .1em}
p.first::first-line   {font-variant:small-caps; font-size:1.15em}


HTML:
<p class="first">Just type a normal first paragraph without the requirement to add
&lt;span&gt; tags. The device will automagically adjust formatting to apply
only to the first-letter and first-line of the paragraph - no matter how wide 
the display is, only the first line is small caps.</p>
This is a clever solution!

Unfortunately, many signs like ’ , - don't render very well with small-caps.

I've tried text-transform: uppercase; instead of font-variant:small-caps; but is has no effect on my Kindle Voyage. Is it normal?
Pyjam is offline   Reply With Quote