Is it possible to have the quotes in the following HTML bold and red, without altering the HTML code?
<div class="client_message">“ Ankit ”</div>
Basically I would like to have some CSS that results in the same effect as
"Ankit" but these quotes must be in bold.
Is this possible with CSS only?
You can't. CSS has very limited capability when it comes to selecting things which are not elements.
The nearest CSS has is ::first-letter, but that would select “ A.
If you can use JavaScript you could change the HTML to
<div><q>Ankit</q></div>
(mentioned in comment before)
Now selecting the elements is easy
q {
color: red;
font-weight: bold;
}
.client_message:before {color: red;font-weight: bold;content: "“";}
.client_message:after {color: red;font-weight: bold;content: "”";}
div.client_message:before {
position: absolute;
z-index: 2;
overflow: visible;
left: .0em;
color: red;
background-color: white;
font-weight: bold;
content: "“";
}
div.client_message:after {
position: absolute;
z-index: 2;
overflow: visible;
right: .0em;
color: red;
background-color: white;
font-weight: bold;
content: "”";
}
div.client_message {
position: relative;
display: inline;
z-index: -1;
}
css has a content property and a :before and :after selector class, you can use these to insert and style the quotes.
note CSS content property is not supported is old IE's less than version 9 http://caniuse.com/css-gencontent
EDIT You have to do a bit of fudging in the CSS but you can get it to work http://jsfiddle.net/wtceu/
EDIT 2 I've put a background-color so that the tails from the HTML entity quotes don't show through the new overlapped quotes. The only issue is if the text takes up more than one line, the ending quote won't position correctly (you can reproduce this by shrinking the width of the jsfiddle window).
Quotes require ‘possessive’ punctuation. In “[Css The Definitive Guide 4][1]”, pp. 786-788, Eric Meyer describes ‘Generated quotes’.
With quotes, you can define quotation patterns to as many nesting levels as you like. In English, for example, a common practice is to start out with a double quotation mark, and a quotation nested inside the first one gets single quotation marks. This can be recreated with “curly” quotation marks using the following rules:
quotation { color: forestgreen; display: block; }
quote { display: block; quotes: '\201C' '\201D' '\2018' '\2019'; }
quote::before, q::before { content: open-quote; }
quote::after, q::after { content: close-quote; }
<quotation>
<quote>
In the beginning, there was nothing.
And God said:
<q>
Let there be light!
</q>
And <abbr>there’s</abbr> some light, that’s [Mac keyb] good.
</quote>
The Holy Bible, Creation
</quotation>
“In the beginning, there was nothing. And God said: ‘Let there be light!’ And there was light.”
The hypotheses (nor acronyms) used in English abbreviation contractions do not respond to Meyer's simple quotation CSS. That's where ’ and ” are useful, working with the quotation, [abbr and acronnym][2] elements. Note that ABBR element (e.g., WHO) is distinct from the abbr attribute (it's one, he's done).
Note also that Apple device keyboards use Option and Shift-Option keys pressed-together with [ and ] keys to generate English opening and closing curly quotes respectively, in this and many other web environments. Meyer's CSS and simpler Apple keyboard shortcuts work well for ‹other languages›, such as French quotation punctuations.
Other devices and networks may similarly adapt or even block the simple display of HTML and CSS quotation code (and related punctuation). There's nothing wrong with offering HTML/CSS guidance, where appropriate. Curly quote styling can encompass more than simple quotes.
[1]: https://itebooksfree.com/book/css-the-definitive-guide-4th-edition/31410. Meyer and Weyl ©2018.
[2]: https://maxdesign.com.au/news/abbreviations/ ...no discussion of block elements that are a foundation of written language quotations. Contraction and quotation, CSS technology character string focus tends to ignore mainstream curly quotes development. Meyer being an important exception.
Clearly we can accomplish far more than most are aware of, without almost scripted neglect in our collective knowledge base. As an aside, it would be nice if Stack quotation marks were more legible.
Moving forward, perhaps to cover our bases better, the CSS should look like this.
quotation { color: forestgreen; display: block; }
quote { display: block; quotes: '\201C' '\201D' '\2018' '\2019'; }
quote::before, q::before { content: open-quote; }
quote::after, q::after { content: close-quote; }
quote { quotes: '\201C' '\201D'; }
blockquote { quotes: '"' '"' "'" "'" '"' '"'; }
blockquote p::before { content: open-quote; }
blockquote p::after { content: no-close-quote; }
Google finds many people unable to style the simple quotes. Still looking for contraction code: i.e., root’extension possessive single right curly quote styling. Can current DOM handle contraction single right quote without script... what's that trick?
Related
I got some example CSS code (well written and working) with many span statements inside, that I modified for my use. What exactly they do? VS Code shows me as an error, but browsers don't complain, and I couldn't find any references in the CSS documentation, as if this syntax does not exist.
Example:
h2 {
letter-spacing: 2vw;
font-size: 2vw;
font-weight: bold;
text-align: center;
span {
display: block;
font-size: 8vw;
letter-spacing: -1vw;
}
}
VS code complains:
"code": "css-colonexpected",
"severity": 8,
"message": "colon expected",
"source": "css",
If I add colon it would be suggesting keys right away, and would not accept anything in curly brackets{}
Thanks
the brackets { and } define scope so that
body {
color: #000;
}
Would define that the color (text color) of the body element type (css query selector) would be #000 (which is hex for black)
however, if you have an element in an element like this using a precompiler such as less for css using the less syntax.
body {
color: #000;
span {
color: #FF0000;
}
}
this would do as the previous css did, but in less you can create a hierarchy
the body's color will be set to black as before.
and then any span child of the body element will have its color set to red (#FF0000)
CSS/LESS are used in conjunction with the HTML DOM object model.
You're correct that this syntax doesn't exist for CSS, as it doesn't support nested selectors like this.
The correct syntax would be:
h2 {
letter-spacing: 2vw;
font-size: 2vw;
font-weight: bold;
text-align: center;
}
h2 span {
display: block;
font-size: 8vw;
letter-spacing: -1vw;
}
This syntax is of course perfectly acceptable if you use a CSS preprocessor, like SASS or LESS for example. CSS preprocessors compile CSS written like you've done into standard CSS syntax, and add extra functionality, like using variables and conditional statements.
I think that modern browsers are probably capable of understanding syntax like this in certain situations, but if you want to use to this sort of syntax then using a preprocessor is a safer option to avoid errors.
I am using :before pseudo-elements bound to particular classes to add symbols in front of p tags, with CSS like this:
td > p.markerclass1:before {
position: absolute;
left: -1rem;
content: '*';
}
I am using this in a Wordpress theme where the user can select that class for a p tag in the editor, in order to to put that symbol to the left of the current paragraph.
However, the website should be accessible, and the screenreader (at least NVDA, with which I am testing this) is reading that pseudo element and the included symbol, which I don't want. But since this element is not in the HTML code, I cannot add aria-hidden = 'true' to hide it from screenreaders.
Any idea what i could do to get the screenreader to ignore those pseudo-elements?
Know this is old, but recently had to answer this too and eventually found a better answer to this question
pseudo-elements; alternative text can be indicated after a /:
td > p.markerclass1:before {
position: absolute;
left: -1rem;
content: "*";
content: "*" / "";
}
In this case the blank alt text will cause this content to be ignored.
Note not all browsers support this syntax (basically just Chromium based browsers at this time of writing) so make sure you add a fallback first that works for all browsers and is only overridden by those that support this new syntax as well. Otherwise, without this fallback, browsers like Safari just ignore the unrecognised CSS line and fail to display anything when you use an / for alt text!
You can try using the speak property:
CSS:
td > p.markerclass1:before {
position: absolute;
left: -1rem;
content: '*';
speak: none;
}
Pseudo-element inheritates from the main class their visibility for screen and screenreaders.
For instance, the following code will hide everything including the *
p:before {content:'*'}
p {display:none}
If you want the content of the pseudo element not to be read, you have to use an unprounounceable replacement like an UTF-8 equivalent :
td > p.markerclass1:before {
position: absolute;
left: -1rem;
content: "\2022";
}
EDIT: \2022 announces "bullet" with NVDA while another code like \2023 for instance announces nothing
The scenario was "Send Mail" link associated with "Click Here To" text, but Screen Reader reads the whole text, but i want it to read only "Send mail".
Here i have solved that issue using "aria-label" attribute.
a
{
text-decoration:none;
}
a::before
{
content:"Click here to - ";
color:Black;
font-weight:bold;
}
Send Mail
Hope this will work for you guys.
I have tried to use display: run-in in order to create a semantic and nice-looking metadata name-value list, liks this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Run-in description list test</title>
<style>
dt {
font-weight: bold;
display: run-in;
}
dt:after {
content: ": "
}
</style>
</head>
<body>
<dl>
<dt>Subject</dt>
<dd>A Question</dd>
<dt>From</dt>
<dd>Mr Smith</dd>
<dt>Time</dt>
<dd>2013-08-05</dd>
</dl>
</body>
</html>
The expected result is
Subject: A Question
From: Mr Smith
Time: 2013-08-05
You can watch it live. (Actually, the idea to use display: run-in was given to me by Ian Hickson, after I started nagging about the di element from XHTML 2.0. One alternative is to use float, but that comes with a number of difficulties.)
Until recently, this worked wonderfully in every modern browser except Firefox (that is, it worked perfectly in Internet Explorer, Google Chrome, Opera, and Safari (I think)). But very recently I discovered that it doesn't work in Google Chrome anymore.
Question: Has Google Chrome dropped support for display: run-in? Is there an alternative that works the same way?
I'm not aware of any change to Chrome's support of display:run-in but the setting has always seemed unloved.
Hixie has been consistently opposed to <di> and I kind of understand why. HTML is a semantic language and the semantics are fully defined by dl/dt/dd. The only practical problems are presentational, and that makes it a CSS problem, not an HTML one.
Unfortunately, then current state of CSS doesn't seem up to the job. For dl/dt/dd, and for many similar problems, we really need a mechanism for wrapping groups of elements in a pseudo element which could then perform the role of the <di>.
Obviously, there is no current setting that does what display:run-in is supposed to do. Having said that, in your specific test case, you could achieve the same effect with this CSS:
dt {
font-weight: bold;
display: inline;
}
dt:after {
content: ": ";
}
dd {
display: inline;
margin:0;
}
dd:after {
content:'\0A';
white-space:pre;
}
I'd like to offer a different, more explicit approach to the solution. One that can be extended to a more general case of missing display:run-in behavior.
I.e. I'm using h4->p flow-in transition to compose a nicely formatted list of item properties:
h4 {
font-weight: bold;
display: inline;
}
h4::after {
content: ": ";
}
h4 + p {
display: inline;
}
h4 + p::after {
content: '\0A';
display: block;
}
Here, I'm using "immediate sibling" (+) CSS selector to select p elements immediately preceded by h4 elements. If h4 is followed by any other element, it will be displayed following the normal flow.
An alternate selector ~ will select not one but all elements of the said type, which is not what usually expected from run-in behavior, and will also extend to all tags of the same type in current scope regardless of the other intermixed tags, which could break the layout completely.
Anonymous replaced elements are content used with :before or :after
See https://developer.mozilla.org/en-US/docs/CSS/content
Here is an example:
.valid:after {
content: '<';
color: green;
}
.invalid:after {
content: '>';
color: red;
}
The problem is HTML entities are not replaced by their caracters and I still see their code.
CSS isn't HTML. Simply use
.valid:after {
content: '<';
color: green;
}
In case of need, you may also escape your characters using the unicode hexa.
For example for ▶ :
.valid:after {
content: '\25B6';
color: green;
}
But you don't need to escape < nor >, even if you embed your CSS in the <style> element of an HTML file.
Just in case (it might be less disturbing to your HTML editor), their codes would be \003C and \003E.
The precondition is that I use monospace as my font-family, but it doesn't seem to work properly, I've tried some solution but neight of them work, my HTML structure is as below:
<!DOCTYPE html>
<style>
body {
font-family: monospace;
letter-spacing: 0;
word-spacing: 0;
font-size: 32px; /* large enough to see the effect */
}
div:last-of-type {
padding-left: 1em; /* what's the value? */
}
</style>
<div>123456</div>
<div>abcdef</div>
use em
em should be equals to the computed font-size value, but padding-left: 1em; doesn't work:
use px
padding-left: 32px; makes the same output as padding-left: 1em;.
use ex
ex should be the computed height of the letter 'x', and it doesn't work either:
use ch
OK, webkit doesn't support ch as a css unit.
So how can I write the css to exactly indent the second div one character width, that is, the first '0' should be left-aligned to the letter 'b', without any deviation.
One possible way, although a bit hacky, would be to insert a space before the row using the :before pseudo selector with content:
div:last-of-type:before {
content: " ";
white-space: pre;
}
I have no idea as to which browsers support this, but I'd assume all modern browsers would.
http://jsfiddle.net/cavqM/
Based on the Tatu's approach you can use a unicode representation of a none breakable space like
div:last-of-type:before {
content: "\00a0"; /* this is */
}
HTH,
--hennson