Actions

Work Header

Rating:
Archive Warning:
Fandoms:
Additional Tags:
Language:
English
Series:
Part 3 of My Code Snippets
Stats:
Published:
2025-03-20
Completed:
2025-03-22
Words:
307
Chapters:
2/2
Kudos:
15
Bookmarks:
8
Hits:
308

Toggle for all caps, all lowercase, and capitalization

Summary:

It's not a good idea to write in all caps or all lowercase. See: Use CSS Text Transform for Better Accessibility and text-transform - CSS: Cascading Style Sheets | MDN.

This provides free to use CSS for both text-transform and a toggle for turning these styles on and off so that the reader does not have to turn off the entire workskin if they do not want to see all caps or all lowercase words.

Chapter 1

Notes:

(See the end of the chapter for notes.)

Chapter Text

Toggle capitalization styles
Value HTML CSS Result
Capitalize 
<span class="capitalize">Cupcake ipsum dolor sit amet ice cream biscuit. Pudding sweet roll oat cake cheesecake chocolate danish cake macaroon.</span>
 
.capitalize{
text-transform: capitalize;
}
 Cupcake ipsum dolor sit amet ice cream biscuit. Pudding sweet roll oat cake cheesecake chocolate danish cake macaroon.
Uppercase 
<span class="uppercase">Cupcake ipsum dolor sit amet ice cream biscuit. Pudding sweet roll oat cake cheesecake chocolate danish cake macaroon.</span>
 
.uppercase{
text-transform: uppercase;
}
 Cupcake ipsum dolor sit amet ice cream biscuit. Pudding sweet roll oat cake cheesecake chocolate danish cake macaroon.
Lowercase 
<span class="lowercase">Cupcake ipsum dolor sit amet ice cream biscuit. Pudding sweet roll oat cake cheesecake chocolate danish cake macaroon.</span>
 
.lowercase{
text-transform: lowercase;
}
 Cupcake ipsum dolor sit amet ice cream biscuit. Pudding sweet roll oat cake cheesecake chocolate danish cake macaroon.
HTML code 
    <div class="fictoggle">
	<details class="tttoggle" open>
		<summary>Toggle capitalization styles</summary>
	</details>
		<p><span class="insert preferred value here">Cupcake ipsum dolor sit amet ice cream biscuit. Pudding sweet roll oat cake cheesecake chocolate danish cake macaroon.</span> Only text within the span tag will be affected.</p>
</div>
CSS code 
    div.fictoggle {
	margin-right: 0px;
	margin-left: 0px;
}
.fictoggle summary{
	list-style: none;
	cursor: pointer;
	max-width: fit-content
	/*You can style this however you want; these are just the necessary styles*/
}
div.fictoggle:has(details.tttoggle[open]) :is(.capitalize, .uppercase, .lowercase){
	text-transform: none;
}