First-letter Drop Cap needed

makros · Post by **makros** » Fri Mar 12, 2021 5:15 pm

I am trying to put text and make the first letter bigger than the following text and have no clue how to achieve this.

has anyone tried or know-how to make this?

Cheers!

BaconFries · Post by **BaconFries** » Fri Mar 12, 2021 6:03 pm

Set text to Output Format to use Use: <p>tags then use the following Page HTML between <head></head>tags. Set font size and colour to your needs.

Code: Select all

<style>
p::first-letter {
  font-size: 200%;
  color: #8A2BE2;
}
</style>

Or if using default <span>

Code: Select all

<style>
span {
  display: inline-block;
}
span::first-letter {
  font-size: 200%;
  color: #eb632d;
}
</style>

Post by **Pablo** » Fri Mar 12, 2021 6:12 pm

You can also use a 'wrap text' object, where first letter is a different object.
https://wysiwygwebbuilder.com/wrap_text.html

WWBman · Post by **WWBman** » Fri Mar 12, 2021 6:12 pm

Or highlight first character and increase font size.

crispy68 · Post by **crispy68** » Fri Mar 12, 2021 7:35 pm

Hey everyone, I was actually working on a simple free extension for this a time back for those who don't know how to code but hadn't quite finished it. If anyone is interested, I can post a link to it this weekend.

BaconFries · Post by **BaconFries** » Fri Mar 12, 2021 7:51 pm

Feel free to post the url to the extension on your site as it will be useful.

MGD4me · Post by **MGD4me** » Fri Mar 12, 2021 8:45 pm

Feel free to post the url to the extension on your site as it will be useful.

+1

makros · Post by **makros** » Sat Mar 13, 2021 12:35 am

Thanks for all comments.

I have to add that I do not want to use any image following text around the image.
I also tried to use the HTML object with code provided in this topic but the drop but the following text getting lower than which does not look good for me.

I need the following text after the first CAP letter to be positioned at the center of the drop cap letter.

Sorry for my poor English but you can see what I need to do as below:

https://www.eexpertbiz.com/qikr-image1.jpg

It is two-line texts with a black background but the Q on the next line is what I need.

Thanks again

BaconFries · Post by **BaconFries** » Sat Mar 13, 2021 4:20 am

I need the following text after the first CAP letter to be positioned at the center of the drop cap letter.

You didn't ask for that you asked for "First-letter Drop Cap" and the two snippets provided do that!
You can try one of the following snippets. Note both are provided "asis" I have tested but due to not having the specific font you show in the image you will have to adjust the css to suit.
If you are using the default setting for text <span>

Code: Select all

<style>
span 
{
display: inline-block;
}
span::first-letter 
{
font-size: 200%;
line-height: 0.65;
color: #eb632d;
margin: 0.0em 0.0em 0.1em 0;
float: left;
}
</style>

If you are using the <p> setting for text

Code: Select all

<style>
p::first-letter {
font-size: 200%;
color: #8A2BE2;
line-height: 0.65;
margin: 0.0em 0.0em 0.1em 0;
float: left;
}
</style>

makros · Post by **makros** » Sat Mar 13, 2021 5:08 am

Bacon fries

Thanks for the outlined code.

Sorry for not clarifying clearly as I was thinking it will go to proper positioning.

I wonder if this is responsive or how to make it responsive, because as I am re-sizing the browser then the letters drop down one by one.

Thanks again

crispy68 · Post by **crispy68** » Sat Mar 13, 2021 6:49 pm

If anyone is interested, I've made available the extension I was working on based on this threads original query.

More info here: http://www.wysiwygwebbuilder.com/forum/ ... 42&t=91668

www.wysiwygwebbuilder.com

First-letter Drop Cap needed

First-letter Drop Cap needed

Re: First-letter Drop Cap needed

Re: First-letter Drop Cap needed

Re: First-letter Drop Cap needed

Re: First-letter Drop Cap needed

Re: First-letter Drop Cap needed

Re: First-letter Drop Cap needed

Re: First-letter Drop Cap needed

Re: First-letter Drop Cap needed

Re: First-letter Drop Cap needed

Re: First-letter Drop Cap needed