How do I make text-transform:uppercase work properly with Greek?
CSS will handle this fine if it knows that the language is Greek. Merely specifying Greek characters does not tell CSS that the language is Greek; that requires the lang
attribute on some parent element (up to and including the html
tag).
<p lang='el' style="text-transform: uppercase">ένα</p>
should get the job done for you, rendering
ΕΝΑ
See fiddle at http://jsfiddle.net/34tww2g8/.
Greek and text-transform:uppercase
I strongly suggest not using jQuery for this. Instead do this:
var e = document.getElementsByTagName('*'), l = e.length, i;
if( typeof getComputedStyle == "undefined")
getComputedStyle = function(e) {return e.currentStyle;};
for( i=0; i<l; i++) {
if( getComputedStyle(e[i]).textTransform == "uppercase") {
// do stuff with e[i] here.
}
}
Tested with 10,000 elements, of which 2,500 had "uppercase" text-transform.
jQuery processed in 595ms
JS processed in 60ms
So JavaScript is approximately 10 times faster at this than jQuery.
EDIT: Another test, this time with 100,000 elements:
jQuery failed.TypeError: Object doesn't support property or method 'each'
JS processed in 577ms
CSS: text-transform: capitalize and Italian, Spanish, Portuguese, French, etc
According to the CSS 2.1 definition, text-transform: capitalize
“puts the first character of each word in uppercase; other characters are unaffected”.
This is vague without a rigorous definition of “word”, but for “uppercase”, the only feasible interpretation is that it is the uppercase mapping of a character by the Unicode standard.
The spec adds: “The actual transformation in each case is written language dependent.” The reasonable interpretation is that this refers to some language-dependent case mapping exception; e.g., in the Turkish language, “i” maps to “İ” (capital I with dot above), not to the common “I”.
For texts written in Latin letters, “word” is normally a maximal sequence of alphabetic characters, though it can be argued whether a hyphenated word like “tax-free” is two words or one. In any case, the principle is clearly that every word is capitalized. This makes the setting rather useless, since hardly any language has such rules. In English, when titles of works are capitalized, exceptions are made for articles and prepositions; but the CSS property does not know such rules.
The definition in CSS Text Module Level 3 (a Last Call Working Draft) is somewhat more explicit: “The definition of “word“ used for ‘capitalize’ is UA-dependent; [UAX29] is suggested (but not required) for determining such word boundaries. Authors should not expect ‘capitalize’ to follow language-specific titlecasing conventions (such as skipping articles in English).”
This also means that it is not intended to observe language-specific rules regarding the issue whether titles of works and comparable expressions should, in general, have words capitalized. Most languages have no such principles.
If you specify text-transform: capitalize
, you are requiring that all words be capitalized, no matter what the language is, no matter what the context is, no matter what the words are. If you think this makes the setting rather useless, you drew the right conclusion.
Proper localization capitalizes words in actual context when needed.
Converting Greek to Uppercase in Java
Per @ajb, this is not supported in Java by default. I had to create my own solution.
Edit: I solved this via text-transform: uppercase
in front-end CSS, so not particularly relevant to the original question in Java. Turns out that was the simplest answer for this web-based application.
Related Topics
Adding a Background Video with React
Expand Div Over Others on Mouse Over Jquery
Adding Style Stored in a Variable Inside React Class
Using !Important in Jquery's CSS() Function
How to Make Cross-Browser CSS3 Code Dry
Detecting Width: Auto in Jquery
Onclick JavaScript Function Working Only on Second Click
Use JavaScript in Order to Set the Current Percentage of a CSS Animation
Creating a CSS Linear Gradient Based on Two Points Relative to a Rectangle
CSS Overflow Hidden Increases Height of Container
Swap Style Sheet with Localstorage
How to Save an Image with CSS Filter Applied
Grunt Plugin for Assets Versioning
How to Make React-Bootstrap's Dropdown Open on Mouse Hover
How to Detect When a CSS File Has Been Fully Loaded
Handle Webpack CSS Imports When Testing with Mocha and Babel