jQuery: 'Capital sharp S' (ẞ) instead of auto generated 'SS' for text-transform: uppercase
up vote
0
down vote
favorite
I start with an example:
In german, the words "Buße" and "Busse" have different meanings (repentance and buses/busses). Both words would be transformed into "BUSSE" if I'm using them on my website with the css definition "text-transform: uppercase".
I'd like to avoid this scenario by using the beautiful "Latin capital letter sharp s" (ẞ) in my uppercase headlines. Because there is no possibility to handle this via CSS, I've wrote a little jQuery snipped that solve this.
jQuery( 'h1, h2, h3, h4, h5, h6, p, li, td, span' ).each( function() {
if ( jQuery( this ).css( 'text-transform' ) === 'uppercase' ) {
$( this ).html( $( this ).html().replace( /ß/g, 'ẞ' ) );
}
} );
This goes trough all the listed elements and check for each, if there is the problematic css property. If true, it replaces the lowercase ß with the uppercase ẞ.
This is working. But the performance of course.. You can imagine.
Is there any other way to do this, or is it possible to optimize this jQuery script with better selector or anything?
Im thankful for any help.
javascript jquery replace character
asked Nov 21 at 14:28
chrisbergr
13125
add a comment |
up vote
0
down vote
favorite
I start with an example:
In german, the words "Buße" and "Busse" have different meanings (repentance and buses/busses). Both words would be transformed into "BUSSE" if I'm using them on my website with the css definition "text-transform: uppercase".
I'd like to avoid this scenario by using the beautiful "Latin capital letter sharp s" (ẞ) in my uppercase headlines. Because there is no possibility to handle this via CSS, I've wrote a little jQuery snipped that solve this.
jQuery( 'h1, h2, h3, h4, h5, h6, p, li, td, span' ).each( function() {
if ( jQuery( this ).css( 'text-transform' ) === 'uppercase' ) {
$( this ).html( $( this ).html().replace( /ß/g, 'ẞ' ) );
}
} );
This goes trough all the listed elements and check for each, if there is the problematic css property. If true, it replaces the lowercase ß with the uppercase ẞ.
This is working. But the performance of course.. You can imagine.
Is there any other way to do this, or is it possible to optimize this jQuery script with better selector or anything?
Im thankful for any help.
javascript jquery replace character
asked Nov 21 at 14:28
chrisbergr
13125
2
Does this problematic could appear in all h1, h2, h3, etc. Of your page? Or it can be only in certain cases? Because you could use a class and select by the class and not the whole HTML elements.
– Brank Victoria
Nov 21 at 14:49
2
Also in performance, Im not sure if it is better to check if the character "ß" exists in the current HTML before doing the replace.
– Brank Victoria
Nov 21 at 14:50
Thank you, @BrankVictoria. Both hints are useful. I think I can limit the selector to h1, h2 and .menu-item. Covering the whole thing into an if statement is also a smart solution. I'll do this but hopefully there are some more things I can do to optimize this.
– chrisbergr
Nov 21 at 14:59
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I start with an example:
In german, the words "Buße" and "Busse" have different meanings (repentance and buses/busses). Both words would be transformed into "BUSSE" if I'm using them on my website with the css definition "text-transform: uppercase".
I'd like to avoid this scenario by using the beautiful "Latin capital letter sharp s" (ẞ) in my uppercase headlines. Because there is no possibility to handle this via CSS, I've wrote a little jQuery snipped that solve this.
jQuery( 'h1, h2, h3, h4, h5, h6, p, li, td, span' ).each( function() {
if ( jQuery( this ).css( 'text-transform' ) === 'uppercase' ) {
$( this ).html( $( this ).html().replace( /ß/g, 'ẞ' ) );
}
} );
This goes trough all the listed elements and check for each, if there is the problematic css property. If true, it replaces the lowercase ß with the uppercase ẞ.
This is working. But the performance of course.. You can imagine.
Is there any other way to do this, or is it possible to optimize this jQuery script with better selector or anything?
Im thankful for any help.
javascript jquery replace character
asked Nov 21 at 14:28
chrisbergr
13125
I start with an example:
In german, the words "Buße" and "Busse" have different meanings (repentance and buses/busses). Both words would be transformed into "BUSSE" if I'm using them on my website with the css definition "text-transform: uppercase".
I'd like to avoid this scenario by using the beautiful "Latin capital letter sharp s" (ẞ) in my uppercase headlines. Because there is no possibility to handle this via CSS, I've wrote a little jQuery snipped that solve this.
jQuery( 'h1, h2, h3, h4, h5, h6, p, li, td, span' ).each( function() {
if ( jQuery( this ).css( 'text-transform' ) === 'uppercase' ) {
$( this ).html( $( this ).html().replace( /ß/g, 'ẞ' ) );
}
} );
This goes trough all the listed elements and check for each, if there is the problematic css property. If true, it replaces the lowercase ß with the uppercase ẞ.
This is working. But the performance of course.. You can imagine.
Is there any other way to do this, or is it possible to optimize this jQuery script with better selector or anything?
Im thankful for any help.
javascript jquery replace character
javascript jquery replace character
asked Nov 21 at 14:28
chrisbergr
13125
asked Nov 21 at 14:28
chrisbergr
13125
asked Nov 21 at 14:28
chrisbergr
13125
asked Nov 21 at 14:28
chrisbergr
13125
asked Nov 21 at 14:28
chrisbergr
13125
13125
2
Does this problematic could appear in all h1, h2, h3, etc. Of your page? Or it can be only in certain cases? Because you could use a class and select by the class and not the whole HTML elements.
– Brank Victoria
Nov 21 at 14:49
2
Also in performance, Im not sure if it is better to check if the character "ß" exists in the current HTML before doing the replace.
– Brank Victoria
Nov 21 at 14:50
Thank you, @BrankVictoria. Both hints are useful. I think I can limit the selector to h1, h2 and .menu-item. Covering the whole thing into an if statement is also a smart solution. I'll do this but hopefully there are some more things I can do to optimize this.
– chrisbergr
Nov 21 at 14:59
add a comment |
2
Does this problematic could appear in all h1, h2, h3, etc. Of your page? Or it can be only in certain cases? Because you could use a class and select by the class and not the whole HTML elements.
– Brank Victoria
Nov 21 at 14:49
2
Also in performance, Im not sure if it is better to check if the character "ß" exists in the current HTML before doing the replace.
– Brank Victoria
Nov 21 at 14:50
Thank you, @BrankVictoria. Both hints are useful. I think I can limit the selector to h1, h2 and .menu-item. Covering the whole thing into an if statement is also a smart solution. I'll do this but hopefully there are some more things I can do to optimize this.
– chrisbergr
Nov 21 at 14:59
2
2
Does this problematic could appear in all h1, h2, h3, etc. Of your page? Or it can be only in certain cases? Because you could use a class and select by the class and not the whole HTML elements.
– Brank Victoria
Nov 21 at 14:49
Does this problematic could appear in all h1, h2, h3, etc. Of your page? Or it can be only in certain cases? Because you could use a class and select by the class and not the whole HTML elements.
– Brank Victoria
Nov 21 at 14:49
2
2
Also in performance, Im not sure if it is better to check if the character "ß" exists in the current HTML before doing the replace.
– Brank Victoria
Nov 21 at 14:50
Also in performance, Im not sure if it is better to check if the character "ß" exists in the current HTML before doing the replace.
– Brank Victoria
Nov 21 at 14:50
Thank you, @BrankVictoria. Both hints are useful. I think I can limit the selector to h1, h2 and .menu-item. Covering the whole thing into an if statement is also a smart solution. I'll do this but hopefully there are some more things I can do to optimize this.
– chrisbergr
Nov 21 at 14:59
Thank you, @BrankVictoria. Both hints are useful. I think I can limit the selector to h1, h2 and .menu-item. Covering the whole thing into an if statement is also a smart solution. I'll do this but hopefully there are some more things I can do to optimize this.
– chrisbergr
Nov 21 at 14:59
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53414284%2fjquery-capital-sharp-s-%25e1%25ba%259e-instead-of-auto-generated-ss-for-text-transform%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
Does this problematic could appear in all h1, h2, h3, etc. Of your page? Or it can be only in certain cases? Because you could use a class and select by the class and not the whole HTML elements.
– Brank Victoria
Nov 21 at 14:49
2
Also in performance, Im not sure if it is better to check if the character "ß" exists in the current HTML before doing the replace.
– Brank Victoria
Nov 21 at 14:50
Thank you, @BrankVictoria. Both hints are useful. I think I can limit the selector to h1, h2 and .menu-item. Covering the whole thing into an if statement is also a smart solution. I'll do this but hopefully there are some more things I can do to optimize this.
– chrisbergr
Nov 21 at 14:59