Dropcaps done in CSS (example)

Tips & Tricks
1

image

DropCap.hype.zip (119,0 KB)

Updated: Now supports paragraphs and single text.

3 Likes
2

I just glanced at this thread, but I was surprised that this is still a challenging issue.

Whoa, that’s lousy support for Initial Letter…
https://caniuse.com/#feat=css-initial-letter

It basically works in macOS / Safari though…

.drop-cap:first-letter {
-webkit-initial-letter: 3;
margin-right: 5px;
}
1 Like
3

First-Letter on the other hand is widly supported
https://caniuse.com/#search=first-letter

Good article on the matter:
https://adrianroselli.com/2019/10/accessible-drop-caps.html

4

You can also skip the div tag formatting in the innerText.

	.dropcap:first-child:first-letter{
		font-family: "Playfair Display", serif;
		font-size: 5.5rem;
		float: left;
		line-height: .6;
		margin-right: 0.05em;
		margin-top: 0.1em; 
	}

Just seen thats what @Photics is also pointing out…

5

Doesn’t work @MarkHunte. At least not in my example with two pasted paragraphs.

This covers both cases:
.dropcap div:first-child:first-letter, .dropcap:first-child:first-letter

I updated the example.

6

I think that the innerHTM div tags are the issue. With them removed.

DropCap 2.hype.zip (118.8 KB)

But bothoth ways work.
Just thinking not everyone would want inner formating. But you may not be able to escape that in a single text box if you want line breaks.

Using pasted text which comes with formatting may also be unpridictable in what tagsand children it has.

7

I just pasted two paragraphs. No HTML was in them. The DIVs are added by Hype so I consider it the default a user is going to encounter. Only doesn't happen if you paste through the little pen icon, but then the second rule in the corrected file above should kick in now. Not in the video (that's the version wit only one selector). So double the selector and we are fine! Anyways it's a tips & tricks template. So tweaking is welcome!

8

Got ya.