Menu
In CSS, .someclass { text-transform: uppercase } translates all text with class someclass to uppercase, but when I select the text, copy, and paste into a text editor or e-mail, the letters retain their original case. Does some client-side web styling technology other than CSS let a document define a custom text transformation to change things other than case, such as r to w or f to ꝼ, without having the transformation applied when the user copies the text?
Answers to Replace a particular character using css recommended JavaScript. I'd prefer to use some (non-CSS) declarative styling technology instead of script for a few reasons:
text-transform property.onload will cause a noticeable flash of unstyled content as the lines are rewrapped.Lately I was able to write an XSLT stylesheet to alter text nodes within the <body>, based on an answer to a question about whitelisting characters.
(Hint: match="html:body//text()" and translate().)
It fails the copy and Ctrl+F criteria, and it reportedly fails the no-FOUC criterion in browsers that try to get too clever, but it should load in just about every major browser since IE 6 even with script turned off.
However, a year ago, Google tried to kill client-side XSLT a year ago by removing it from Blink.
If Chrome, Opera, and other Chromium-based browsers end up dropping XSLT over this, no-XSLT users will probably outnumber no-script users.
Is acquiring a libre font and modifying it to include custom forms and ligatures that @font-face, font-feature-settings, and font-variant-ligatures can trigger the only way?
585
CSS - Cascade Style Sheets, as the name implies, it is used only to stylize the sheets (html pages). The snippet .someclass { text-transform: uppercase } is just stylizing the characters (alphabets) inside the tag with class someclass. Its not easy or can I say that its not possible to achieve your need using only CSS and not JavaScript.
According to Zach Saucier's comment for your question, "There is no good way to do this with CSS", And I too agree that.
Using JavaScript its absolutely possible. But your criteria doesn't want you to do so.
My request to you, try using JavaScript or try not using CSS.
126
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
