Page 1 of 1
First-letter Drop Cap needed
Posted: Fri Mar 12, 2021 5:15 pm
by makros
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!
Re: First-letter Drop Cap needed
Posted: Fri Mar 12, 2021 6:03 pm
by BaconFries
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>
Re: First-letter Drop Cap needed
Posted: Fri Mar 12, 2021 6:12 pm
by Pablo
You can also use a 'wrap text' object, where first letter is a different object.
https://wysiwygwebbuilder.com/wrap_text.html
Re: First-letter Drop Cap needed
Posted: Fri Mar 12, 2021 6:12 pm
by WWBman
Or highlight first character and increase font size.
Re: First-letter Drop Cap needed
Posted: Fri Mar 12, 2021 7:35 pm
by crispy68
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.
Re: First-letter Drop Cap needed
Posted: Fri Mar 12, 2021 7:51 pm
by BaconFries
Feel free to post the url to the extension on your site as it will be useful.
Re: First-letter Drop Cap needed
Posted: Fri Mar 12, 2021 8:45 pm
by MGD4me
Feel free to post the url to the extension on your site as it will be useful.
+1
Re: First-letter Drop Cap needed
Posted: Sat Mar 13, 2021 12:35 am
by makros
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
Re: First-letter Drop Cap needed
Posted: Sat Mar 13, 2021 4:20 am
by BaconFries
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>
Re: First-letter Drop Cap needed
Posted: Sat Mar 13, 2021 5:08 am
by makros
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
Re: First-letter Drop Cap needed
Posted: Sat Mar 13, 2021 6:49 pm
by crispy68
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
