I would like all "®" on a site to be in superscript. Can I do that with CSS?
AverageAdam's answer will work fine, but if you for some reason wanted a CSS version, you could do this:
.sup { vertical-align: super; }
and
<span class="sup">®</span>
From here.
add this to your html file <sup>your mark here</sup>
then add this to your css
sup {
position: relative;
font-size: 40%;
line-height: 0;
vertical-align: baseline;
top: -1.2em;
}
You can adjust the height of the mark using "top" in the css and the size with "font-size". This will also work for any TM, SM, or symbol you want. It will not effect any of your spacing or typography.
<sup>®</sup>
Unfortunately CSS doesn't have a way to specify superscript's. You can however simulated it using a span and some tags.
Correction 2021: As others have mentioned there are many ways including using CSS. Based on the various options and issues presented in this question I've created a pen to demonstrate options for superscript styling and line-height fixes.
My personal favorite is position:relative since it doesn't require the line-height:0 fix. Thanks #osuthorpe
use the CSS below to create a tag that doesn't mess with your leading. Adjust values as needed. Font-size is optional, I used it to make my r-balls a little smaller than the registered trademarked text.
sup{
vertical-align: 75%;
line-height: 5px;
font-size:11px;
}
I know you asked CSS but this jQuery code worked for me, hope it helps you
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$("body").html(
$("body").html().replace("®", "<sup>®</sup>")
);
});
</script>
</head>
<body>
Some text here ®
</body>
</html>
Victor's answer only worked for the first Reg mark on my page. I found this code to work on the entire page. Hope it helps someone:
$("body").html(
$("body").html().replace(/®/gi, '<sup>®</sup>').replace(/®/gi, '<sup>®</sup>')
);
found it here: http://www.cmexsolutions.com/blog/use-jquery-to-superscript-all-register-marks-reg-or-%C2%AE
I've used the CSS below for positioning the trademark registration symbol ® in HTML whereby the result is the ® symbol with a link, smaller and above the normal text. Note there are two links in the example. The reason for this is because I wanted the main anchor link to be underlined and the ® symbol to be not underlined.
.trademark {
position: relative;
font-size: 40%;
top: -1.2em;
}
.no-style {
text-decoration: none !important;
}
Example with CSS using JSX in React:
Photo Prints Now<a
href="https://www.photoprintsnow.com" className="no-style"><span
className="trademark">®</span></a>
Example in HTML with CSS where the syntax is class instead of className:
Photo Prints Now<a
href="https://www.photoprintsnow.com" class="no-style"><span class="trademark">®</span>
</a>
Example in HTML with STYLE:
Photo Prints Now
<a href="https://www.photoprintsnow.com" style="text-decoration: none; ">
<span style="position: relative;font-size: 40% ;top: -1.2em;">®</span>
</a>
Further to the previous answers, I'd suggest that superscript is presentational rather than semantic, and therefore styling the registration mark should be done using CSS. Whether superscripted or not, a registration mark is still a registration mark, and would be recognised as a registration mark by humans/computers. The symbol itself may be considered semantic, in that it gives a 'special' meaning to the object to which it relates, but the styling of it is entirely presentational. By convention the registration mark is often (but not always) superscripted, as is the trademark symbol.
The only issue with some of the scripts above is that they don't deal with the fact that there might already exist some ® elements on the page. In this case, they will be replaced with: ®.
I think a solution like this might make more sense.
$("body").html(
$("body").html().replace(/<sup>®<\/sup>/gi, '®').
replace(/®/gi, '<sup>®</sup>').
replace(/®/gi, '<sup>®</sup>')
);
if you don't mind using jQuery:
$("p,h1,h2,h3,h4").each(function(){
$(this).html($(this).html().replace(/®/gi, '<sup>®</sup>').replace(/®/gi, '<sup>®</sup>'));
});
it works much faster than modyfying whole body tag (as in Robert's and Victor's answers)
If you are going to use regex, why not clean it up with one call
$("p,h1,h2,h3,h4,h5,h6,li,dd,dt,a").each(function(){
var $this = $(this);
$this.html($this.html().replace(/(<sup>)?(®|®)(<\/sup>)?/gi, '<sup>®</sup>'));
});
I don't recommend doing this on the body like the OP ended up doing. It could interfere with inline javascript that might have the symbol in it.
Related
TL;DR: Wondering if there's a CSS property that can break content where HTML doesn't naturally:
Baby
Buggy Bumpers
instead of
Baby Buggy
Bumpers
The only way I can think of to do it is to add where you don't want the line to break, but I'm working in WordPress, which strips those.
This is to graphically style a site's name on the home page. The site name is part of the nav, so it's inside an <li>, using grid layout.
Luckily in my case, setting the width with a dimension that is relative to the font size seems to break the way I want at all viewport widths:
.my-brand a {
width: 16ch;
text-align: end;
}
white-space: nowrap and such elements won't work with the "baby buggy bumpers" example because the need is to break after one specific word. Just wondering if there's some way to specify in a way similar to nth-child(2).
Made a Codepen to play with.
If you can't use Javascript and can't add tags in the string like :
<div class='string'>
Baby<span>Buggy Bumpers</span>
</div>
It only remain "hacky" CSS solution. There is one using pseudo-elements :
HTML :
<div class='string'>
Baby
</div>
CSS :
.string{
width: 11ch;
text-align: end;
font-size: 2em;
}
.string::after {
content: "Buggy Bumpers";
color: red;
display:block ;
white-space:nowrap;
}
Live exemple : https://codepen.io/camillewemajin/pen/JjWzWzN
But that's not really clean for many reasons, like SEO...
I want to Trim a string Using css .
example
my string is
"hi google how are you"
I Want to Get output
"hi"
Get first two letter . Using Css is it possible Trim a string .
Although not possible using CSS; but you can get some kind of illusion in ideal condition may be this workaround work for you. I've used here text-overflow: ellipsis;
you can check the DEMO.
<p>hi google how are you</p>
p {
text-overflow: ellipsis; /* IE, Safari (WebKit) */
overflow:hidden; /* don't show excess chars */
white-space:nowrap; /* force single line */
width: 17px; /*This property playing a major role just showing the first 2 letter*/
}
I'm not quite sure why you wanna do it with CSS (it makes more sense to this this with JS or your back-end server side language), I presume it's because you want to target one screen size with say the full sentence and another with an abbreviated one? If so, sadly CSS can't do this, however you could do something like this in your HTML:
<span class="widescreen-span">[pull full string here]</span>
<span class="smallscreen-span">[trimmed string here]</span>
Where you actually have both sets of text available in the HTML, however we will show and hide them accordingly.
Then have a stylesheet for each screen size (there are several ways of doing this...):
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
Then in widescreen.css you could do this:
.widescreen-span { display:inline; }
.smallscreen-span { display:none; }
And then in smallscreen.css you could do this:
.widescreen-span { display:none; }
.smallscreen-span { display:inline; }
AFAIK: There's no way to do that in CSS. The only way to achieve what you want is using some script language (e.g. JavaScript).
That is not possible with CSS.
The only possible solution is by wrapping the rest of the sentence in a span, and hide it, like this:
<p>hi<span> google how are you</span></p>
span { display: none; }
Or you should look into a Javascript or PHP solution.
I would personally do this with Javascript
var startText = "hi google how are you";
var endText = startText.substr(0, 3);
// endText is now "hi"
CSS is a method of describing the style of a page's elements. You are trying to edit the content of a page using a framework designed not to have any affect on the content of the page, just the style.
You should probably look at using JavaScript to do what you want. Formatting page elements in this way is not possible in CSS.
CSS is per se not a programming language.
On the other hand, there are good news for you. You can use a programmming language such as JavaScript or jQuery to accomplish this, or even a backend programing language such as PHP or Ruby.
CSS is a language used to apply styles in a cascade manner hence why it is called CSS (Cascading Style Sheets).
Just to give you some advice, what you're trying to accomplish is not called trim. Trim is to remove unnecessary white spaces from a string like the example here shows: JavaScript Trim() Function.
What you're trying to accomplish is called substring which is explained here: JavaScript substring() Function.
var str = "Hello world!";
var res = str.substring(0, 2);
/* Output: He */
Been a while since I had a CSS related problem but here I am. to cut a long story short I want to highlight text with a gradient background which I have managed to achieve using the <span> tag and setting a background image onto it. The problem is it startes to get a bit trippy and breaks when the text goes on to a new line.
I have managed to fix it but the HTML is horrible and I don't like compromising HTML code for style purposes as a rule.
The best way to describe this is just to show you.
http://jsfiddle.net/sambeckhamdesign/2HSqh/11/
The top <li> is the good HTML with the broken style and the botom <li> is how it's supposed to look but with awful HTML markup.
Any solutions obviously appreciated. Don't mind using Javascript or jQuery but I'd rarther do it in CSS if I could.
Ta pets :)
I can provide you the css hacks working only for firefox and safari
::selection {
background: #ffb7b7; /* Safari */
}
::-moz-selection {
background: #ffb7b7; /* Firefox */
}
Reference:
http://www.catswhocode.com/blog/10-astonishing-css-hacks-and-techniques
Hope this help :)
The only method (that does not need extra markup) that i can think of would be to use a repeating background-image that has exactly the height of a line. This should work properly and fast if your line-height is constant. All other approaches are likely to be quite slow or bulky.
The best way I could se to do this in the end was to use the <span> tag. I hate doing this and try to avoid it when I can but it needed to be used in this case. See the updated JS fiddle in the question for how I did it.
Maybe this provides what you want
ul#container li.hilight {
padding:3px 20px;
background:url('http://www.sambeckhamdesign.com/_images/rain_1.jpg') left repeat-y #c06;
line-height:30px;
color:#fff;
}
and
<li class="hilight">
This is how the text should look
<br />
but the HTML markup is messy
</li>
I'd like to define a CSS class that means all text inside is treated as though it were surrounded by the <code> tag. (In other words, it looks as though it is code: it doesn't need actually to have the <code> tags in the source.)
I guess the class should inherit from <code>.
Is this possible?
CSS is purely a presentational language -- it can make a DIV look as though it were a CODE element, but it can't actually add CODE tags. Depending on your requirement, this may or may not work for you. If you only want the looks, yes, you can use CSS. If you want the semantics of a CODE tag, no, CSS can't do it.
Edit: Since you just want the looks, you can do something like this:
div {
display: inline;
font-family: monospace;
}
Unfortunately, class is a misnomer in this case as CSS does not let you inherit element styles.
Your best bet is to set up a class with all of the appropriate attributes:
.code {
font-face: Courier, "Courier New", monospace;
white-space: pre-wrap;
/* ... etc ... */
}
I have to ask though ... why not simply use the <code> tag?
If I understand your question correctly, you cannot accomplish this from CSS alone. You must actually have the code tag within your markup for the browser to treat it as code to display, and not code to parse.
Well I know you can do this with jQuery:
<script type="text/javascript">
$('.myClass').each(function() {
$(this).html('<code>' + $(this).html() + '</code>');
});
</script>
Note: This has been typed in Safari, so I haven't tested it.
Is there a way to add special characters ♦ through CSS styles if so can you show an example that works on most browsers?
No, it is not possible, as such.
When using :after { content: }, you cannot specify HTML tags nor entities in the content string. You can, however, specify the symbols directly. (This is because the content string is not parsed as XML/HTML, but as plain text, and is inserted verbatim.)
In other words: a:after { content: "<" } will yield the equivalent visual to Some Link<.
a:after { content: "♦" }; will work perfectly, tho'.
You can use the :after and :before pseudoelements, however they are not supported by all browsers, have a look at
http://www.w3schools.com/css/pr_pseudo_after.asp
http://www.w3schools.com/css/pr_pseudo_before.asp
You should always avoid using CSS content because it's wrong to mix presentation with content of the page.
Additionally, CSS content is not supported by some browsers, i.e. by IE6 and IE7.
If I wanted to do it, I'd use CSS to attach background image and add some HTML element around the word:
<style type="text/css">
abbr { padding-right:20px;
background:url("http://img690.imageshack.us/img690/2005/blackdiamond.png") right no-repeat; }
</style>
<abbr>Something</abbr> very very Important goes here.
Result:
The only problem is - if I can modify the HTML to wrap my word with <span> or <abbr> or any other HTML element I could probably just wrtite ♦ in the code itself... your call.