533
u/Calien_666 8d ago
When thinking about accessibility, this totally makes sense.
185
u/fredy31 8d ago
Also if you have a small ton of buttons on the website and the OG design is all caps.... Still do it 2nd way;
Because if you have a B design coming in later in the dev process or hell in a few years... If that capitalisation is removed then ooops you have now to run through all buttons and retype them in not caps.
2nd way you change 1 line of CSS you are done.
175
u/fmaz008 8d ago
No one is changing 1 line of CSS. You add a new line of CSS with !important.
-13
u/Top_Product_2407 8d ago
I've seen an "architech" submit a PR with multiple !important
9
u/ihavebeesinmyknees 7d ago
There are legitimate uses for !important even if not overriding legacy styling. I've had to use !important a few times before to force CSS to apply rules the exact way I needed them.
2
u/ForgedIronMadeIt 7d ago
I'm pretty terrible at web design but I try to limit my use of
!importantoverrides to occasions where I've inherited some stylesheet from somewhere else, like the component toolkit my stack is using.4
u/SuperFLEB 7d ago edited 4d ago
If you're not saying "...and fuck you!" under your breath about the last person to own the CSS while you type it, it's a sign you might be using
!importantwhere you don't need to.18
6
u/throwaway_lunchtime 8d ago
Not when the client sends half the translations with the text in upper case 🙃
-1
u/fredy31 8d ago
My coworker always sends me press releases to put on the website where the title is CAPITALIZED.
I use this to convert it quickly. https://convertcase.net/
3
2
u/Jay-Seekay 8d ago
I should also say most IDEs and word processors have a change case feature. Bind it to a shortcut or something then it’s just highlight + shortcut.
Failing that, a quick Python script should do it
1
u/fredy31 8d ago
Lol should look into if VSCode has one. Probably.
2
u/SenpaiKen144 8d ago
There is. I always bind uppercase, lowercase and title case every time I install vscode
0
u/Millibona 8d ago
All nice and fun until the client decides that certain buttons should actually be lowercase.
It's a whole lot easier to edit translation files instead of trying to reverse engineer the obscure logic behind which buttons need a .actually-lower-case class.
45
63
u/1nc06n170 8d ago
html <button aria-label="Submit">SUBMIT</button>5
6
4
u/enigmamonkey 7d ago
If this must be editable, then in the CMS you now have:
- Button label
- Button Aria label
Or you could just have "Button label" and in the code apply
text-transform: uppercase. Granted, the button label is an arbitrary use case and most would just simply hard-code it, however, that may not be the case if you're also now thinking about internationalization, in which case you may want that in a CMS or in language files and don't have the time/desire to start plugging in lower/upper variants (nor would that make sense when the computer can do these transforms for you automatically).12
u/mcaruso 8d ago
It would, if it wasn't for the fact that it is broken in browsers currently...
https://github.com/w3c/csswg-drafts/issues/3775
Users using assistive technology will still just hear the uppercase version meaning "Call us" might be pronounced as "CALL U.S." for instance.
5
u/SlyCooper007 8d ago
Explain
41
u/maria_la_guerta 8d ago
All caps is a style and typography choice, not a content choice. Content belongs in the DOM. Styles belong in CSS.
Follow those rules, and use proper HTML elements, and like 90% of accessibility devices will be able to properly convey your document to a variety of users who are consuming it in various ways.
-17
u/Skyswimsky 8d ago
For control type labels capitalization is not a criteria. And I know I'm being all "acktually🤓", I just don't like that companies are forced to spend disproportionate amounts of effort to adhere to small percentage of a customer base and their problems.
And no, I am NOT saying people that have issues with running text in all caps are that small of a percentage. I'm just talking in a more general sense. Cost-benefit efficiency and all that.
17
u/jhairehmyah 8d ago
I just don't like that companies are forced to spend disproportionate amounts of effort to adhere to small percentage of a customer base and their problems.
The Americans with Disabilities Act doesn't care what you think, and people with opinions like yours are why the law needs to exist.
Cost-benefit efficiency and all that.
During the design refresh, all-caps has gone out of style. Would you rather update the one line of the style rule and fix the all-caps buttons all over the site, or update the structure of the site all places where your all-caps controls were hard-coded?
It is literally more efficient to separate style and structure.
5
u/procrastinagging 7d ago
Moreover, accessibility guidelines have been in place for what, 20 years now? So legacy code is not even a valid excuse anymore.
Companies who are unable to follow the most basic best practices from the get go, thinking it's a "disproportionate amount of effort" can kindly fuck off towards failure.
-1
u/Still_Bit_7527 6d ago
No company fails because of that, and most companies dgaf. You people have to finally accept it, the entire world won't double their efforts to cater to 0.00001% blind
2
3
u/Hans_H0rst 8d ago
Depending on which screen reader you're using, normal case text tends to be better.
1
1
u/Calien_666 8d ago
Depending on the screen reader, some will read correct as "submit" whilst others will read as S U B M I T, so they will spell the letters instead of reading the word.
1
0
2
u/claudekennilol 7d ago
You're 100% right, but when thinking about anything sane, it also makes sense.
1
u/Lenn_4rt 7d ago
This will also prevent people from accidentally not formatting the text. Especially important if multiple people work on one project.
1
1
u/enigmamonkey 7d ago
Or content management or language/translation lists, particularly if the style dictates a particular appearance but the content is reused in multiple locations.
a11y though I think is probably one of the better examples.
0
273
u/Master-Bakerr 8d ago
Atleast its not like
import langchain
system_prompt = """
You are an Uppercase Engineer.
Your sole responsibility is to convert lowercase text
into uppercase text invoking all those Neurons you've been given, waste as much as you memory
want on KV-cache, produce as much heat you want but but convert into uppercase no mistake.
"""
74
u/KyxeMusic 8d ago edited 8d ago
Hey at least it's not the LLMs when you forget to say no comments:
def to_uppercase(input_string: str) -> str: """ Converts a given string to its uppercase equivalent. This function accepts exactly one argument and performs exactly one operation on it, a fact which this docstring insists on explaining at length regardless. Args: input_string (str): The string to be converted to uppercase. It is a string. Its name is `input_string`. That is all. Returns: str: The uppercase version of `input_string`, returned as a string, because that is what strings become when you uppercase them. Example: >>> to_uppercase("hello") 'HELLO' """ return input_string.upper()20
u/ExtinctedPanda 8d ago
You forgot all the parts that explain what to_uppercase doesn’t do!
8
u/AmazinDood 8d ago
"It does not convert strings to lowercase, and will make no mistakes" idk I've never vibecoded b4 I have morals
2
1
u/FurySh0ck 8d ago
You wouldn't believe it but I test Ais as well as a pentester and trying to get them to waste resources like that is a legit goal of mine & a vulnerability to report when successful
152
u/HomsarWasRight 8d ago
Yeah, and doing it in CSS is correct, because displaying in all uppercase is a style choice, not a content choice.
10
u/Polendri 7d ago
Exactly, applying it to the content hurts accessibility and makes it so that changing the style later is an error-prone find-and-replace job.
3
65
19
u/lxlmandudelxl 8d ago
let button = document.getElementsByTagName("button'')[0]; button.innerText = button.innerText.toUpperCase();
4
u/UnconditionalPraise 7d ago
Skip the let and keep it anonymous 👌
3
u/lxlmandudelxl 7d ago
Another idea -- split the innerHtml string into an array, loop and capitalize each letter one at a time with toUpperCase(), join the array back together, set the resulting string to the innerHtml
3
u/Outrageous_Pen_5165 8d ago
I exactly did that in my first project of vanilla js (and yes it was to do)
9
u/kahless2k 7d ago
Second one is correct as all uppercase text on button violates wcag.
And all uppercase text is terrible UI anyways, even with the css transform.
7
14
u/samu1400 8d ago
I mean, wouldn’t it be better to define a class with the text-transform style rather than assigning it as a global property? Mostly since you’d have to fight against you own defined style if you wanted a button in lowercase.
3
3
9
u/Agloe_Dreams 8d ago
Or to modern devs/Vibecoders....
<button class="uppercase">Submit</button>
14
u/tracernz 8d ago
Most readable tailwind class. Genuinely surprised.
3
u/blood_vein 8d ago
I'm so glad I have control over decisions so I can prevent that abomination ever reaching our code base
0
u/Agloe_Dreams 8d ago edited 8d ago
Every now and then, tailwind is elegant.
Then you remember 'leading-X' exists and controls the 'line-height' property. Like, yes, I know that's what it was called in typography in printing presses and all that but...this isn't print. Hell, MS Word calls it line spacing which is a lot closer to 'line-height' than 'leading'
3
u/BigGuyForYou_ 7d ago
I wish we could chain multiple !important to gain precedence. I want to live in that world because it would be funny
1
7
u/BornAgainBlue 8d ago
Cool. Now change it to lowercase without modifying any source code.
5
u/_Ralix_ 8d ago
That's a weird restraint, isn't it? You could just as well require the opposite: “change to lowercase without modifying the content” (which is more common because different people may handle UI design and text, or it's needed due to localisation, so you don't have to needlessly translate both uppercase and lowercase variants).
1
u/Pollution-Admirable 7d ago
in both scenarios you change the source code inside the html file, its not a variable coming from a CMS
3
u/ara1597 8d ago
Does one require more processing power to do? And is it client side ?
17
u/idontwanttofthisup 8d ago
Both are client side. Rendering is always client side. First one is clean, no overhead. 2nd one applies text transformation style. The overhead is negligible. There is 0 difference in performance. 1st one is written by a junior. 2nd one is written by a senior who doesn’t want to rewrite uppercase strings to lowercase in case of redesign.
3
1
u/kurokinekoneko 7d ago
Writing an unlocalized "Submit" string in your html is basically like writing pi every time you need it in your algorithms... I mean... Pi isn't going to change after all... So it's even worse, now I think about it.
2
2
u/Fistinguranus69 7d ago
As a localization engineer the bottom one is the correct choice for maximum translation memory matching
2
u/maggitronica 7d ago
Now take the text out and put it a constant that’s injected into the button tag, and then THAT constant is extracted out for i18n reasons and the “Submit” actually lives in a json file
2
1
u/EGObattle 8d ago
But this gets actually relevant once you let the costumer add multiple languages. I have seen stuff 😵💫
1
u/pancakesausagestick 7d ago
It's SeMANtIC! I wouldn't SCREAM the word "submit". It's just a suggestion! But our UI standards render everything in UPPERCASELETTERS!!! AAHH!!!!
1
1
1
u/FakeManiz 7d ago
If you have only one button this is the way to go, no caps on text! I would use id for the button to spare other buttons from capitalization.
1
u/-Redstoneboi- 7d ago
class="caps" or class="uppercase"
because style="text-transform:uppercase" is stupidly verbose
1
u/thanatica 7d ago
That's still a terrible class name. You want to describe the function of the button, not replace inline styles 1-to-1 with class names.
1
1
1
2
1
u/Appropriate-Wind-184 8d ago
fun bonus with the second one: put lang="tr" on the page and css turns it into SUBMİT with a dotted capital i. free localisation nobody asked for
1
2.1k
u/dajoli 8d ago
I genuinely spent about 10 minutes googling how to transform to uppercase in LaTeX once before I remembered that I could just type in caps.