I really dislike "smart quotes" for one simple reason - when I copy text containing them, it no longer has the original "" as was typed, instead I end up with Unicode symbols.
The smart quotes are a visual improvement, so shouldn't really be "baked into" the text, so.. I was wondering, it is possible to display the smart quotes using CSS?
Basically, the text would be displayed as..
This is an “example”
..but viewing the source, or copying and pasting would show:
This is an "example"
In theory HTML has <q> element to solve that problem.
Unfortunately in practice you'll get either no quotes copied at all (IE doesn't support it, Gecko doesn't copy quotes) or smart quotes copied.
If you style the "s with font-style: italic they appear to closely mimic the smart-quotes, but I'm not sure that you'd be any happier surrounding each and every instance with <em> and </em>.
.magic-quotes {font-style: italic; }
<span class="magic-quotes">"</span>quoted-text<span class="magic-quotes">"</span>
Or, possibly if you use the :before and :after psuedo-classes,
.stuff-to-magic-quote:before
{content: '"';
font-style: italic; }
.stuff-to-magic-quote:after
{content: '"';
font-style: italic; }
<span class="stuff-to-magic-quote">this text would be quoted</span>.
But then you're not going to get the quotes in the copy & paste.
I think you might need some form of JS to achieve what you want; to style the quotes automatically, and allow for their being copy & pasted in non-magic-quoted format.
Edited to add that I share your dislike of magic-quotes and their copy & paste issues. And later edited to amend the heinous <em> tags, and make them, instead, <span>s.
...it occurs to me, now, that perhaps you could go a little further, but it might be too much typing for too little -real- reward.
.original-quotes-open {margin: 0 -2em 0 0;
z-index: 0; }
.original-quotes-close {margin: 0 0 0 -2em;
z-index: 0; } /* the idea of the -2em and z-index is to position the original non-magic quotes behind the text, but not remove them from the document */
span.quoted-text {z-index: 2; /* or higher than the .original-quotes... classes */
span.quoted-text:before {content: "“"; }
span.quoted-text:after {content: "”"; }
<span class="original-quotes-open">"</span><span class="quoted-text">This text is quoted</span><span class="original-quotes-close">"</span>
But, honestly, I'm not seeing a positive outcome from the extra effort.
Related
Imaging this markup for a dialogue:
<p><q>Come here!</q> he said. <q>Why is taking you so long?</q></p>
Now, to punctuated this paragraph base on Spanish grammar, the output must be:
—Come here! —he said—. Why is taking you so long?
(Notice the position of the em-dashes, the spaces around them, and the period in the description.)
Is there a pure-CSS solution to output this without changing the HTML?
[In English, the quotation marks surround the spoken text. In Spanish, however, after the initial em-dash (with no spaces around it) the description is the one being surrounded, by two em-dashed with no spaces in the inside.]
You can sort of fake the quotation marks with some psuedo elements, taking care of deleting the last one.
p{font-size:1.5em;}
q:before{
content: "— ";
}
q:after {
content: " —";
}
q:last-of-type:after {
content: "";
}
<p><q>Come here!</q> he said. <q>Why is taking you so long?</q></p>
Moving the dot cannot be done with pure CSS, or I cannot think any way to do so atm. I believe you'll need to parse it either server-side or with some javascript
Edit:
Well, there might be a way, but this is ridiculously specific.
p{font-size:1.5em;}
q:before{
content: "—. ";
margin-left:-12px;
background:white;
}
q:first-of-type:before{
content: "—";
}
q:after {
content: " —";
margin-right:-4px;
}
q:last-of-type:after {
content: "";
}
<p><q>Come here!</q> he said. <q>Why is taking you so long?</q></p>
That's pulling the dashes towards the clarification (in a px based arbitrary magic number, which depends totally on the selected font and it's size), then using background-color (which should match the true background) to paint over the actual dot liquid paper style, and adding the dot after the dash on each quote start that's not the very first.
So as I said, ridiculously specific, and fragile. The moment you change the font, font-size or background-color, or simply have a clarification that doesn't end on ". ", it will break.
This is my website's main menu:
As you you'll notice, the text inside main menu's items isn't wrapping. I've tried many solutions suggested but nothing seems to affect these items. Here's the css code:
#pt_custommenu .parentMenu a{
width: 100px; height: 59px;
line-height: normal;
padding-top: 0; padding-bottom:0;
float:left;
display: inline-block;
position: relative;
text-transform: none;
word-wrap: normal;
white-space: normal !important;
}
I'd like to make text break into two lines, like it would normally do, since the <a> element has a standard width and height.
Any suggestions?
Remove
This code inserts a space without wrap. Normal spaces don't do that.
You can retrieve more info about here:
http://www.sightspecific.com/~mosh/www_faq/nbsp.html
EDIT: I'm going to copy the relevant info in case this link someday dissappears:
is the entity used to represent a non-breaking space. It is
essentially a standard space, the primary difference being that a
browser should not break (or wrap) a line of text at the point that
this occupies.
Many WYSIWYG HTML editors insert these entities in an effort to
control the layout of the HTML document. For example, such an editor
may use a series of non-breaking spaces to indent a paragraph like
this:
<p>
This first line of text is supposed to be indented. However, many browsers will not render it as intended.
</p>
[...]
There are some times when it is "acceptable" or "advisable" to use the
entity so long as the consequences are understood:
Its intended use of creating a space between words or elements that
should not be broken. The only problems that can be associated with
this use is that too many words strung together with non-breaking
spaces may require some graphical browsers to show horizontal
scrollbars or cause them to display the text overlapping table
borders.
You want text to be broken so use following:
word-wrap: break-word;
I checked again and saw you didn't use any spaces, thats why it can't. Replace with normal space character. Otherwise browser will read it as a block without spaces.
I have a regex puzzle for you all!
A week or so ago, I decided to change the formatting of my Sass file from this:
a {
color: red;
text-decoration: none;
&:hover: {
color: blue;
text-decoration: underline;
}
}
div { ... }
To this:
a {
color: red;
text-decoration: none;
&:hover: {
color: blue;
text-decoration: underline; } }
div { ... }
The second syntax seems nice -- it saves you lines and improves readability -- but it is actually a disaster for writing code. Imagine if I wanted to add another line after a:hover's text-decoration: I'd have to bring those two parentheses with me.
Anyway, I've been trying to find the perfect regex to change the formatting back but to no avail.
My thinking:
Match and capture 2 spaces since all closing brackets are indented at least one level: (\s{2})
Match and capture all additional spaces: (\s*)
Match and capture all other characters (my CSS code): (.*)
Match space + closing bracket: }
Replace that with two lines:
\1\2\3\n\2}
Doesn't exactly work quite yet. Appreciate any ideas.
Regex won't really work, as you've discovered, because the meaning/desired position depends on the parsing of the Document that has come before.
You need a parser or a filter for this job.
Fortunately, a standard JS beautifier, or a CSS indenter should whip that file right back into shape.
PS: Also consider more frequent backups and version control. (^_^)
Another easy way to do it is to do a quick replace on your editor, no regex, just make it match the spaces, replace with the new brackets/lines. Might not be as quick as using a css re-indenter though.
I'm hoping this is simple. I'm not a CSS guy.
I'm trying to make some code look a little better on a blog and I have the following <code> CSS style.
code {
display: block;
white-space:normal;
background-color: #eeeeee;
font: 1em, 'Courier New', Courier, Fixed;
padding: 7px;
margin: 7px 7px 7px 7px;
}
This is working fine for me, except where there are line breaks in the code contained in my <code> tag, the background color is white not light gray.
Is there a CSS tweak I can make to force my entire <code> block have a background color of gray?
Thanks.
Comment: If I put a space on the empty line, I get what I want - a gray background on that line.
Comment2: I have only plain text inside of my <code> </code> tags. Ideally I don't want to mark up my code w/ tags. Just cut and paste inside of the <code> tags and have it look decent.
Final Comment: After reading this as suggested by mercator below, I finally went with this. I subclassed the <pre> tag and got want I needed. A nicely shaded boxes to offset my example code blocks.
pre.code {
color: black;
border: solid 1px #eeeeee;
font-size: 1.1 em;
margin: 7px;
padding: 7px;
background: #eeeeee
}
It appears to work fine for me, but then I don't know what the contents of your <code> tags are.
There's a few oddities in your CSS in any case:
I probably wouldn't use display: block, but wrap the tags in a <p> or <pre> instead. Changing it to a block like that still won't allow you to nest block-level tags inside it, and it would still need to be inside a block-level tag itself. CSS doesn't change the HTML syntax and semantics. Do you have any block-level tags within your code tags?
Why did you set white-space: normal? That's a little unusual for a code block. How exactly are you formatting your code? Are you adding <p> or <br> tags in there? Why don't you use white-space: pre, or perhaps white-space: pre-wrap?
Your font declaration is broken. There shouldn't be a comma between the 1em and the font names. Browsers would now simply parse that as if 1em is the name of a font family, I think, and then fall back on Courier New, since 1em doesn't exist.
I think you meant to say monospace instead of Fixed. Or is Fixed the actual name of a font face? You'd better add the generic monospace anyway.
More of a nitpick: you can collapse those 4 margins down to one value too.
I'm not sure if any of these are really the cause of your problems. The first two are the most likely candidates. Nothing strange happened on the quick tests I did, but some of your other CSS might be creating the problems in combination with some of these points.
Ah, wait a minute... I see now that you're talking about making "some code look a little better on a blog". The blog software is automatically adding paragraph tags around blocks of text separated by blank lines. Those are responsible for the white.
I suppose that's also why you added white-space: normal. The blog software is already adding line breaks and everything automatically (with <p> and <br> tags), so using pre added a whole bunch of extra space.
Try using the <pre><code> tags combination like StackOverflow does. Using the <pre> tag will probably (hopefully) prevent the blog software from messing with your code.
For WordPress, have a look at their article "Writing Code in Your Posts."
Try setting an explicit width. Not sure why that would work. I sometimes add a border while testing to see where my box is and what it looks like. I know you can do that with web debuggers like firebug, sometimes it's simpler and might even have side effects.
add:
width: 100%;
border: 1px solid #eee;
See if that helps, maybe change the border color to #000 to see where the boundaries are.
Without some HTML and/or a test page, it's quite difficult to know what could be causing the problem. I would look at the line-height property though - it often causes these kind of problems.
I don't make anything particular. I use Safari, and when I use <strong>blabla</strong> it doesn't work, but <b>blbla</b> does. any idea about what can be the reason?
Regards...
I use Yahoo Reset.css, if it may cause the problem.
sample code:
<p><strong>Address:</strong> bla bla bla blaabllb</p>
Yes, the Yahoo! CSS reset removes formatting from STRONG tags (as well as all other tags).
You'll need to explicitly declare the formatting as noted in the other answers...
strong { font-weight: bold; }
The Firefox plugin Firebug will let you right-click on an element and say "Inspect Element", which among other things displays what CSS has been applied to that element and from what stylesheet that CSS comes. Very helpful for running down what's causing an issue like this.
Yahoo's reset.css has this:
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
This indeed means that it won't be bold.
It can be that the browser has somehow lost default settings for the "strong" element.
Try to make it "recall" by specifying it explicitly in your CSS:
strong
{
font-weight: bold;
}
You shouldn't use the tags "strong" and "b" to achieve just bold text. Instead use stylesheets to make text appear bold and only use strong if you want to emphasize something. You can also use stylesheets to make strong appear bold in safari.
Well it all depends on what the CSS is doing.
strong {
font-weight:bold;
}
will make it appear bold. Some browsers will have that set as a default CSS rule, others might not. Have you set anything that says explicitly that strong or <b> will result in bold text?
Generally you shouldn't rely on the browsers to style elements on their own. For example, Safari might say:
strong {
font-weight:bold;
font-size: 1.2em;
}
while Firefox may have:
strong {
font-weight:bold;
color: #000000;
font-size: 18px;
}
or something like that. So when different users view your page, it may or may not look the same.
Investigate reset.css files (maybe here) and think about telling the browser WHAT you want it to look like via CSS.
Do you have strong declared in your css file? if you have a declaration:
strong{}
then nothing will happen.
You need to have:
strong{
font-weight:bold;
font-style: italic;
}
<strong> is a semantic element used to emphasize the enclosed text, while <b> (though "deprecated") is more of a typographic convention.
strong {font-weight:bold}