It's probably just a syntax error but I can't find any thorough references on this kind of usage. Chrome is overstriking my background property, so I've obviously offended something.
http://jsfiddle.net/YbA39/2/
I want what's in the red box (an svg css background) to render just like the inline svg in the html. Simple, right?
Don't say it can't be done! My inspiration is this: http://jsfiddle.net/estelle/SJjJb/
You haven't escaped the '#' characters in the url() syntax. And it's 'viewBox' not 'viewbox'.
Here's something that works: http://jsfiddle.net/YbA39/3/ (just a quick urlescaped string).
The newlines in the declaration were breaking it. Removing all the newlines fixes it in all but IE, which requires base64 or URI encoding:
http://jsfiddle.net/YbA39/4/
Related
Using Stylus preprocessor, I'm looking to embed inline SVG code (not external files) in background-image properties in a manner that will allow me to set the fill attribute of the SVG in the CSS via a Stylus variable.
I've looked into Stylus' url and embedurl methods, but it seems to me that they only work on external files, and I don't know how I'd integrate my need to set the fill attribute with them.
Current (Working but Nasty) Attempt
I have a working solution, but it is ugly and I'm convinced there is an easier and cleaner way that I haven't been able to find.
My current efforts follow with the irrelevant parts of the encoded SVG removed.
myColorVariable = #FF0000
...
background-image 'url("[...]fill%3D%22%23%s%22[...]")' % unquote(slice(unquote(""+myColorVariable),1))
With a full SVG:
myColorVariable = #FF0000
...
background-image 'url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20data-icon%3D%22thumb-up%22%20width%3D%2232%22%20height%3D%2232%22%20data-container-transform%3D%22scale%281%201%20%29%20translate%280%20%29%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22%23%s%22%3E%3Cpath%20d%3D%22M17.688%200c-.4%200-.688.313-.688.813v2.78c0%203-2.912%206.32-4.813%208.22C11.287%2012.513%2010.2%2013%209%2013v17s2%201%205%201h11.187c.9%200%201.725-.605%202.125-1.405%200%200%203.8-10.494%204.5-13.594.1-.4.094-.61.094-.81.1-1.2-.92-2.19-2.22-2.19H22.5c-1.2%200-2.19-1.112-2.19-2.312C20.31%209.488%2022%207%2022%204V2.5C22%201.1%2020.9%200%2019.5%200h-1.814zM0%2013l2%2019h5V13H0zm5%2016c.6%200%201%20.4%201%201s-.4%201-1%201-1-.4-1-1%20.4-1%201-1z%22/%3E%3C/svg%3E")' % unquote(slice(unquote(""+myColorVariable),1))
Issues:
It only seems to work with latest versions of Stylus. For example, it doesn't work on Codepen, but it works in my setup with Grunt, and typing the following into the "Try Stylus Online" section of the Stylus website shows it outputting what is expected.
c = #FF0000
cString = "" + #FF0000
cMinusHash = slice(cString, 1)
cWithEncodedHash = "%23" + cMinusHash
unquote(cWithEncodedHash);
I have to have a series of string manipulation methods on my variable to try and cast it to a string and remove the hash tag of the hex color. I have to remove the hash tag of the hex color because the hash tag needs to be encoded and is thus included in the SVG string. The necessity for both of the unquote methods doesn't make sense to me, but it's what works. Also, the concatenation of an empty string with the color variable seems like a very hacky way to cast the color to a string, but I was unable to find a better way.
The SVG code has to have its quotes (double or single) encoded for the Stylus string interpolation to work, which is added hassle on top of the encoding that cross-browser compatibility requires.
In case it's helpful, here is my Codepen I made attempting to demonstrate my solution that works in my setup but not on Codepen.
Please forgive me if I omit necessary information or do something wrong; this is only my second question here. I'm happy to fix whatever I need to.
Thanks!
I cannot get Chrome on OSX to print emoji, is there any css trick or other?
Here are 2 emoji: 👍🇦🇹
When I try to print this page, the emoji space is preserved, but it's white. In Safari printing the emoji works just fine.
Here is a screenshot of the print preview of this page on Chrome:
After a lot of dialog in the question's comments, it seems you have a font rendering issue (perhaps a Chrome bug). I do not think this can be solved with any combination of HTML, CSS, or Javascript.
There is, however, the option to work around the issue by not using a font.
You can use a vector image like SVG to have the same kind of scaling capabilities as a font:
SVG for 👍THUMBS UP SIGN Unicode character
SVG for 🇦 REGIONAL INDICATOR SYMBOL LETTER A Unicode character
SVG for 🇹 REGIONAL INDICATOR SYMBOL LETTER T Unicode character
SVG for Thumbs up sign
SVG for Austrian flag
Just link to the SVG as an image and specify its dimensions either in HTML or in CSS as needed.
With a little work, you could automate conversion of user-generated emojis to images by using a dictionary of known images and supplement the misses with the either the SVG or the emoji PNG at FileFormat.Info. They have a list of emojis you could scrape (assuming it's not a violation of their terms of service) for PNGs as well as an SVG for every character (emoji or otherwise) which can be obtained from from just the character code. For example, here's U+1f44d (👍):
http://www.fileformat.info/info/unicode/char/1f44d
It'll be the only SVG link on the page, so you could do this in JS:
var svg_src = fileformat_info.querySelector('a[href$=".svg"]').href;
That said, it'd be vastly preferable to have this ready-made rather than creating from scratch. #pandawan's answer suggesting twemoji looks promising.
Perhaps there is a CSS-only workaround: I've also read elsewhere that you can properly print these characters by avoiding bold (and perhaps all font and text manipulation? perhaps just make the font size bigger?). This may depend on the fonts installed on the client system.
This is due to a rendering difference between Chrome and Safari, I would not named it a bug since I do not believe that the expect behavior is defined anywhere (Firefox has issues rendering your emojis too by the way).
If you want a full and simple emoji support across all platforms you can use twemoji, a small library developed by Twitter for this specific need.
I'm sorry for how ridiculous this question might seem and for my english.
I'm just stuck and can't understand this.
How can we still use the <u>....</u> in HTML5 and the result be the same with <span style="text-decoration: underline;">......</span> ?
Didn't it stop to have support?
I mean how isn't <u>....</u> supported in HTML5 if i can still use it on full way?
Thank you, and once again sorry
The u is not invalid in HTML5. It just changed it's definition (see here):
The u element represents a span of text with an unarticulated, though explicitly rendered, non-textual annotation, such as labeling the text as being a proper name in Chinese text (a Chinese proper name mark), or labeling the text as being misspelt.
So it's not recommended to use u to underline text as you're pointing out correctly. A proper way is to use CSS and text-decoration: underline;.
<u> has slipped back into HTML5 for a couple rare, non-conforming instances dealing with other languages and things like spell check. Essentially, to cover any instance when a user will expect an underline.
A helpful link on why <u> is back after being depreciated in HTML4 --> http://html5doctor.com/u-element/
As found out, thank to you
"Regardless of whether an element is deprecated (HTML 4, XHTML 1) or non-conforming (HTML5) or just plain uncool, browser makers still have to support it for backward compatibility with all those web pages".
Thank you guys!
The <u> and </u>tags DO work just like <span style="text-decoration: underline;">......</span>They both underline all the text in their enclosed elements. However, having all those formatting tags in your HTML code can make the code very difficult to read. As dersvenhesse says, an alternative would be to use the text-decoration property and set it to underline.
If you have something like this:
<h1 style="color:;"></h1>
will it ignore that and use whatever color would have otherwise been used if there was no inline style?
If the rule cant be parsed, it is ignored
Demo Fiddle
Per the w3c spec:
Malformed declarations. User agents must handle unexpected tokens
encountered while parsing a declaration by reading until the end of
the declaration, while observing the rules for matching pairs of (),
[], {}, "", and '', and correctly handling escapes. For example, a
malformed declaration may be missing a property name, colon (:), or
property value.
Yes, it should be ignored.
For this kind of thing though, instead of asking a question, I recommend just trying it. Slap it together in a test page and load it up in all the browsers. Even if the standards text disagrees, if all the browsers do the same thing, that doesn't really matter. Real world websites are loaded by Chrome, Firefox, IE, and Safari so if all four of them do the same thing (or even close to the same thing), that's a de-facto standard answer.
I have a div that is too narrow to text-align:justify (gaps too wide), but yet looks un-uniform when right- or left-justified, because then there is a large gap at the end of lines. Left-justified looks best, but could I use hyphenation, like in books? Using CSS?
You can use hyphens: auto provided that you have declared the content language in HTML, e.g. using <html lang=en-US>.
Browser support is still limited but getting better, see
http://caniuse.com/css-hyphens
For good quality, you may need to manually control hyphenation e.g. by using soft hyphens () in words that might otherwise be hyphenated wrong.
Hyphenation is language-dependent; you can't just put overflowing characters on the next line and get the same effect that you do in books. Hyphenation rules are actually pretty complicated (see http://dictionary2.classic.reference.com/writing/styleguide/division.html), and the only way that you can do it properly (like in books) is either manually or via a client-side or server-side script; I'm pretty sure it can't be done using only css.
You might want to use something like http://code.google.com/p/hyphenator/
For hyphenation in html, there are javascript programs to add what's needed to the text. such as http://code.google.com/p/hyphenator/
Support for brower buildin hyphenation is unreliable and improvement in its support is doubtful.