Questions tagged [drop-cap]
13 questions
1
vote
1 answer
How to limit CSS Drop Caps to only Filled Paragraphs of more than one line?
Given a standard well working Drop Caps styler in pure CSS.
/* Automatic CSS Drop Caps on First Letter on the First Paragraph */
article:first-of-type p:first-of-type:first-letter{
font-size: 3em;
margin: 0 0 0 0;
padding:…
Sam
- 15,254
- 25
- 90
- 145
1
vote
1 answer
Workaround For Firefox Ignoring line-height In Floated Pseudo Element
I'm trying to style a drop-cap using the :first-letter pseudo selector, but Firefox is ignoring line-height:
p {
font-family: sans-serif;
line-height: 3rem;
font-size: 2.4rem;
}
p:first-letter {
float: left;
background-color:…
Undistraction
- 42,754
- 56
- 195
- 331
0
votes
0 answers
Drop cat text/Image alignment with a long text in Flutter
in this design i want one long text field and other side one webview ,text fiel and webview is in one row form and text wrap automatically
left side long text and other side one web view option ,but text automatically wrap
how to build that…
Zulfi
- 1
0
votes
1 answer
How to remove extraneous space after drop capital in nested container
I have a document that uses A, P and SPAN with class drop for drop capitals. When I have text directly in a paragraph, it works normally. However, if the paragraph begins with an anchor or a span with class P, extraneous space appear. If I abut the…
shmuel
- 121
- 3
0
votes
1 answer
Custom CSS drop caps in Wordpress 6.2.2 with Twenty Twenty Three theme
I'm trying to do drop caps in the Twenty Twenty-Three theme on WordPress 6.2.2.
All the docs I find when I google it are for older versions of WordPress, and possibly on an older theme. It used to be easy, but I can't find relevant docs for how to…
nedlud
- 1,820
- 4
- 19
- 33
0
votes
0 answers
How to handle nested div with ::first-letter pseudo-element
I'm experiencing trouble trying to implement drop-cap using pseudo-element ::first-letter. The thing is, since we're building a CMS, I can't know in advance the structure of the DOM. So we could have to display a layout like this:
First…
Antoine C
- 1
- 1
0
votes
0 answers
Drop caps resulting in different letter height in Firefox
My entire website looks nice on Chrome. When I tested it in Firefox however, I noticed the height of the drop cap is too high. Examine the good positioning height left in Chrome, and the way too high positioning on the right in Firefox:
Chrome: .…
Sam
- 15,254
- 25
- 90
- 145
0
votes
2 answers
Floated element "steals" width from a following block element inside a display:table container
I have a div that's "floated" to the centre with display:table; margin:auto; (green box)
Inside this, I have a float:left element (red box, which is not always present), then a number of display:block; "lines" (lime boxes). The application is poetry…
Inductiveload
- 6,094
- 4
- 29
- 55
0
votes
0 answers
How to style a DROP CAP when punctuations are involved
So, im trying to implement a drop cap solution. Did some research and I've tried every solution in the book. When punctuations are involved, nothing works. So, I came up with this solution that works. My question is if there is something more simple…
Marco
- 2,687
- 7
- 45
- 61
0
votes
1 answer
dropcaps.js issue when first word is 2 letters
I am using dropcaps.js to split the first letter of a sentence from the rest, and make it larger/dropcap. The code below is working perfectly, apart from when the first word of the sentence is just two letters. In this instance, the second letter…
dungey_140
- 2,602
- 7
- 34
- 68
0
votes
2 answers
Dropcap - :first-letter pseudo class not working as expected in firefox
I have made a dropcap using :first-letter pseudo class it works fine in chrome, IE and edge but it does not works in firefox as expected.
So what's the problem
The problem is it's height.
Here is my code:
.dropcap:first-letter {
font-size:…
Owaiz Yusufi
- 849
- 1
- 14
- 34
-1
votes
2 answers
CSS for dropcap image with text aligned over blank part
I don't think this is an everyday dropcap situation.
My dropcap, for an uppercase letter "S", is this image:
Note that the actual image extends as far as the overbar. The overbar is part of the same image that contains the large S and the drawing…
Ross Presser
- 6,027
- 1
- 34
- 66
-2
votes
1 answer
Quick question about changing the font of the drop cap letter in my wordpress blog
Quick question about how to make my dang WordPress blog look instantly better than it currently does!
I use Unna font for my headers and Jost font for the body text. I use drop cap for the first paragraph of my blog articles.
Obviously, because I…
