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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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. buymeacoffee 

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 the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.