Jump to content

CSS code to force sentence case

Go to solution Solved by iamdavehart,

Recommended Posts

Site URL: https://tangerine-tiger-4ty6.squarespace.com/

Hi,

For some strange reason one of the font I've picked doesn't automatically come up in sentence case but only lower case.

I've found the code to force it to be in upper case but not to have it in sentence case (= only first letter of each sentence in uppercase).

The font is a font available on Squarespace called Dancing script. Currently using it for my H2 & H4

Note: H1 & H3 are forced in uppercase which is what I want for that font 😉 

Does anyone know how to add code to my custom css please to have the sentence case on my h2 and h4 script font please?

Thanks,

Sarah

 

Screen Shot 2021-12-21 at 14.48.17.png

Link to comment
29 minutes ago, SarahSWD said:

Site URL: https://tangerine-tiger-4ty6.squarespace.com/

Hi,

For some strange reason one of the font I've picked doesn't automatically come up in sentence case but only lower case.

I've found the code to force it to be in upper case but not to have it in sentence case (= only first letter of each sentence in uppercase).

The font is a font available on Squarespace called Dancing script. Currently using it for my H2 & H4

Note: H1 & H3 are forced in uppercase which is what I want for that font 😉 

Does anyone know how to add code to my custom css please to have the sentence case on my h2 and h4 script font please?

Thanks,

Sarah

 

Screen Shot 2021-12-21 at 14.48.17.png

Your site is private now. Kindly set it with the protected password to check you issue together

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • Solution

CSS doesn't have a native sentence case as part of its text-transform property (it only has upper, lower and capitalize), but you can use the ::first-letter pseudo-selector to help you out. This won't be "true" sentence case insofar as it won't respect multiple sentences in a single block, but should be good enough for headings.

so, if you type all your h2 and h4 headings as lowercase then you can style them as sentence case using the code that follows (don't need the style tags if you're putting it in your custom css):

<style>
  h2,h4 { text-transform: lowercase; }
  h2::first-letter, h4::first-letter { text-transform: uppercase }
</style>

examples of all text-transform options:

image.thumb.png.9b5a43efe292803ae7a6bc4844335799.png

Dave Hart. Software/Technology Consultant living in London

Link to comment
  • 4 months later...

@Tahlia

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.