Viewing How do I create a 'drop-cap' in EverWeb?

How do I create a 'drop-cap' in EverWeb?



User: Les C. one month ago
I am referring to an oversized letter that "drops" into a paragraph, occupying space that spans the height of several lines of text.

Last edit one month ago
User: EverWeb Support one month ago
Hi Les,

Thanks for reaching out.

Please create a support ticket and describe what you'd like to achieve. If possible, sharing some examples will help us better understand your request and see how we can assist you!

-------------------------------
EverWeb Customer Support
Submit Tickets or Learn More
User: Roddy one month ago
The correct name for this is a Drop Cap. Google it and find out how.

If you are using an EverWeb default text box the easiest way is to insert the drop cap in a <span></span> tag and add an inline style ...

<span style="float: left;font-family:45px Verdana, sans-serif;line-height:1; font-weight:bold;
margin-right:9px">D</span>rop cap in a text box.

Adjust the drop cap's font family & font size to get the desired effect.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Les C. one month ago
--Roddy

I appreciate your response. I tried pasting your code into a text box, but only the code shows up. What am I missing here?

Thanks,

LC
User: Roddy one month ago
If you want to make text look a lot better use a widget.
Click HERE to download.
Note that EverWeb Widgets don;'t use the responsive row.

Enter this into the text area in the widget settings...

<span style="display:block;float:left;font:48px Verdana, sans-serif;color:#000000;line-height:1; font-weight:bold;letter-spacing:3px">D</span>rop cap in a text box.
Next line.
The rest of the pargraph text

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Les C. one month ago
--Roddy

Thanks for you post and the widget. I am able to get the drop cap to appear.

My greater problem is I have a highly formatted paragraph that I don't believe the widget will allow for:

1. Drop cap that needs to be flush with the baseline of the third line text and cap height of the first line of text.
2. First sentence is bolded.
3. Remainder of text is regular.
4. I have an italicized word in there.
5. I'm using custom fonts and not the same throughout.
6. My line spacing is 1.1—not a whole number.
7. I have an alternative spacing between paragraphs.
8. Lastly, the text has a fade.

After spending some time with the widget, I am presuming that this special case is outside the normal workings of its capabilities.

Please let me know if I am wrong and I will invest more time on this. Thanks.

LC
User: Les C. one month ago
I ended up doing this manually. I added non-breakable spaces to the beginning of the text box then placed the larger cap letter in its own text box. The key here is to have EW publish the large cap as an image (you need to select the "Export as Text Image" checkbox.

Please note that this will not work in a responsive page.


Post Reply
You must login or signup to post.