First-letter Drop Cap needed

This section is for posting questions which are not directly related to WYSIWYG Web Builder.
Examples of off topics: web server configuration, hosting, programming related questions, third party scripts.

Note that these questions will generally not be answered by the administrators of this forum.
Post Reply
makros
 
 
Posts: 64
Joined: Tue Mar 09, 2021 2:31 am

First-letter Drop Cap needed

Post 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!
User avatar
BaconFries
 
 
Posts: 5316
Joined: Thu Aug 16, 2007 7:32 pm

Re: First-letter Drop Cap needed

Post 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>
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: First-letter Drop Cap needed

Post by Pablo »

You can also use a 'wrap text' object, where first letter is a different object.
https://wysiwygwebbuilder.com/wrap_text.html
WWBman
 
 
Posts: 914
Joined: Fri Jan 08, 2010 6:10 pm

Re: First-letter Drop Cap needed

Post by WWBman »

Or highlight first character and increase font size.
User avatar
crispy68
 
 
Posts: 2729
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: First-letter Drop Cap needed

Post 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.
User avatar
BaconFries
 
 
Posts: 5316
Joined: Thu Aug 16, 2007 7:32 pm

Re: First-letter Drop Cap needed

Post by BaconFries »

Feel free to post the url to the extension on your site as it will be useful.
MGD4me
 
 
Posts: 286
Joined: Tue May 02, 2017 11:56 pm
Location: British Columbia, Canada

Re: First-letter Drop Cap needed

Post by MGD4me »

Feel free to post the url to the extension on your site as it will be useful.
+1 8)
makros
 
 
Posts: 64
Joined: Tue Mar 09, 2021 2:31 am

Re: First-letter Drop Cap needed

Post 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
User avatar
BaconFries
 
 
Posts: 5316
Joined: Thu Aug 16, 2007 7:32 pm

Re: First-letter Drop Cap needed

Post 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>
makros
 
 
Posts: 64
Joined: Tue Mar 09, 2021 2:31 am

Re: First-letter Drop Cap needed

Post by makros »

Bacon fries :D

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
User avatar
crispy68
 
 
Posts: 2729
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: First-letter Drop Cap needed

Post 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
Post Reply