Css Text-Transform Capitalize on All Caps

CSS text-transform capitalize on all caps

There is no way to do this with CSS, you could use PHP or Javascript for this.

PHP example:

$text = "ALL CAPS";
$text = ucwords(strtolower($text)); // All Caps

jQuery example (it's a plugin now!):

// Uppercase every first letter of a word
jQuery.fn.ucwords = function() {
  return this.each(function(){
    var val = $(this).text(), newVal = '';
    val = val.split(' ');

    for(var c=0; c < val.length; c++) {
      newVal += val[c].substring(0,1).toUpperCase() + val[c].substring(1,val[c].length) + (c+1==val.length ? '' : ' ');
    }
    $(this).text(newVal);
  });
}

$('a.link').ucwords();

CSS from uppercase to capitalize

The thing is capitalize won't lowercase other characters from an uppercase text. What you can do is

.sideBar-text{
    text-transform : lowercase;
}

.sideBar-text:first-letter{
    text-transform : uppercase;
}

https://www.sassmeister.com/gist/d2c9fe2e136efefbdb59a9ae4ee4e689

Hope it helps ;)

CSS Capitalize First Letter In All Caps Word

Yes it is possible with just CSS, here's how:

.capitalize {  text-transform: lowercase;  display: inline-block;}
.capitalize:first-letter {  text-transform: uppercase}

<span class = "capitalize">TESTING</span>

Why Css text-transform capitalize not working?

CSS text-transform: capitalize will only affect the first character.

According to the specs:

capitalize Puts the first character of each word in uppercase; other characters
are unaffected.

I strongly suggest to just have the content edited. Remember that at the end of the day, technologies such as css is just 1 way to solve the problem. The better solution, again, would be to edit that content and capitalize it, whether it be stored in the database or just static content in the markup.

As a hack (if you really want to use a code-level solution), you can use JavaScript to transform all letters first into lowercase. Then use /\b(\w)/g to match the instances of first letters, then use toUpperCase() on each

document.querySelector("a").innerText = document.querySelector("a").innerText.toLowerCase().replace(/\b(\w)/g, x => x.toUpperCase());

<h2><a class="ml-5 mt-5 d-block" href="#">IT IS AN EXAMPLE TEXT IN HREF</a></h2>

Whether css text-transform capitalize make other letters lowercase?

::first-letter can be used to select the first letter from the first line of block-level elements.

p {  text-transform: lowercase;}p::first-letter {  color: red;  text-transform: capitalize;}

<p class="capitalize">lowercase</p><p class="capitalize">UPPERCASE</p>

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.

CSS text-transform: capitalize skips first word with back-to-back span 's unless white space.

This is a known interop issue. Implementations disagree on how text-transform: capitalize should behave with respect to punctuation. WebKit is notably the only one to capitalize a letter that immediately follows a punctuation mark without a space in between — everyone else behaves the same as IE. So it would seem that Safari and Chrome are the odd ones out, not IE.

If you absolutely require that a letter following a punctuation mark inline with no intermediate whitespace be capitalized, your best bet is making that element an inline-block. This causes the text in the element to become a separate run of text from the previous element, making the first letter of that element truly be its first letter for the purposes of text-transform: capitalize, but this will be a problem if your text can potentially wrap due to length.

text-transform capitalize css not working correctly

Update

(and correct answer - what's below the line is only left as reference, providing context to the discussion on Chromium forum, as this issue was initially posted as a browser bug).

Although it might look like a bug, the implementation is correct. It's a feature. In short, any display:inline element is a "letter" in document's flow. If you decide not to put any space (or anything that might be interpreted as a space) between your letters, text-transform:capitalize should only capitalize the first letter in your "word".

To fix it, either give your links display:inline-block or add a pseudo (:before or :after) with display:inline-block;content:'';

Previous update:

TL,DR;

nav a:before {
  content: ''; /* copy-paste a zero-width-space () character */
}

... or simply prefixing your anchor texts with seems to fix the problem.

But, to be clear about it, the above is a hack. A workaround.

Another fix is to set nav a's display property to anything except inline, which is default — yes, display:none; fixes it, too. For good! ツ...

...which leads to a third option, even less intrusive and not needing chars playing hard-to-get:

nav a:before {
  content: ''; /* empty string, no specials here */
  display: inline-block;
}

Also works if used on nav a:after, if you need the :befores. What fixes it is breaking the continuous inline flow of the line.

Updated answer:

It looks like you found yourself a bug, which is currently present in both Chrome and Firefox. I haven't yet tested other browsers, but I'm expecting to experience this in the other webkit based browsers (Safari, Edge, Opera). I've filed the bug with Chromium which will, most likely, produce a fix for it in Chrome and, after a short while, in Firefox.

As suspected before you added the mcve, it's not related to React. I can reproduce it here, using simple markup:

nav a {
   margin: 1em;
   text-transform: capitalize;
}

<div><nav><a href="/">home</a><a href="/2">page 2</a><a href="/3">page 3</a></nav><div>

How to convert UPPERCASE text to Title Case using CSS

The bad news is that there is no such thing as text-transform : title-case which would guarantee the result to be title cased. The good news is that there IS a way to do it, which doesn't require javascript (as is often suggested for this situation). If you are writing a theme for a CMS you can use strtolower() and ucwords() to convert the relevant text to title case.

BEFORE (THIS DOESN'T WORK):

<style>
.title-case{ text-transform:capitalize; }
</style>
<span class="title-case">ORIGINAL TEXT</span>

AFTER:

<?php echo ucwords( strtolower('ORIGINAL TEXT') ); ?>

If you are writing a theme, you'll probably be working with variables instead of text strings, but the function and the concept work the same way. Here's an example using the native Wordpress function get_the_title() to return the page title as a variable:

<?php
$title = get_the_title();
$title = strtolower($title);
$title = ucwords($title); 
<h1>
<?php echo $title;
</h1> 
?>

Hope this helps someone. Happy coding.

Css Text-Transform Capitalize on All Caps