Everything I've read says that you can't and furthermore, that there are no plans to make Cufon justifiable.
https://github.com/sorccu/cufon/wiki/Known-bugs-and-issues
A bummer, 'cause I think it's the most elegant solution solution to typeface replacement that I've seen--great text rendering regardless of the browser's rendering engine (or lack-there-of), and easy to implement. So, I'm using sIFR. I'd really love to be using Cufon, though... Before I walk away from it--I want to be sure there's no way to justify the text... Any thoughts?
Related
I'm using <em> to make part of an #font-face styled <h1> italicized. The problem I'm having is that it's too italicized.
I'm using the font Impact, which, to my knowledge, does not have an italic version. In Photoshop, the text is only partially slanted using the slanted text option in the charter panel. With <em> on the site, though, it's extremely slanted. Is there any way to adjust this with CSS? Or does anyone have a truly italic version of Impact I can use?
If using Impact is, for whatever reason, absolutely mandatory, you can mimic italics using CSS3.
http://www.w3schools.com/css3/tryit.asp?filename=trycss3_transform_skew
However, this isn't supported in a lot of older browsers (and some newer ones) so I'd be hesitant. Considering you want to change how Impact actually wants, you probably just want a different font, but that still requires CSS3 to load properly, unless you intend to generate some images on the server side for your headers, which I hugely don't recommend.
http://www.w3schools.com/css3/css3_fonts.asp
My recommendation? Just use the CSS3 skew on the <em> tag. In worst case scenario, a browser doesn't support it, and it's slightly too italicized. That's not a big deal. In best case scenario, your site looks great! If the original italics are wayyyyy too much for you, I would remove them on the <em> tag, and just do my solution anyway. That way, if CSS3 isn't supported, you still get a nice, Impact header.
The Impact font does not have an italic version. So what you get by asking some software to italicize it is just the upright version or some mechanically (algorithmically) slanted distortion of it. The algorithm is up to the software but does not produce italic. So just don’t do it.
Hey guys I have a question, I plan on making a website for a friend that wants a nice description about them, for in terms of design they want something like this:
dsdsdsds
sdsdsdsdsdsdsd
sdsdsdsdsdsdsdsdsds
sdsdsdsdsdsdsdsdsdsdsdsd
sdsdsdsdsdsdsdsdsdsdsdsdsd
sdsdsdsdsdsdsdsdsdsdsdd
sdsdsdsdsdsdsdsdsdsd
sdsdsdsdsdsdsds
sdsdsdsdsdsd
sdsdsdsd
So basically small line of text at the start, and increase for the middle, then decrease in size near the end, so basically a circle type. Any ideas?
One bad way is to have a fixed number of lines (and maybe no word-wrap). Just do spans and have the id's of each span have a pre-defined width.
A better (somewhat) way is to do something along these lines css circle via stack-overflow. You may have to tweak it though (and I haven't tried it), but you could play around to see of you like it.
I'm pretty certain the latter is the way you would go, but the ease of constructing it may not be overly fast.
Good luck!
After looking around in Google, I have found this:
CSS Text Wrapper
It involves javascript, but you dont really need to know javascript in order to use it.
if you want to achieve that use
<pre></pre>
then apply the css to the text.
Its the easiest way to do that.
I need to do a CSS layout. I need to know the best practices to avoid the pain of the CSS multi-browser compatibility.
What I should use to avoid issues in this regard? Should I use a CSS Framework? If yes which one?
Best Regards,
First, know your audience; this lets you know what browsers your site will be accommodating. Second, make sure you have a good grasp of CSS. Third, get familiar with the concept of "progressive enhancement." Lastly, consult this website: Do websites need to look exactly the same in every browser?
For starters, good clear code, thats styled once, and once only helps LOADS. When i say this, I mean, insure all your CSS is in an external file, and no in page or in line css calls are made.
Second, start with a good body,html statement. Get everything defaulted from the work go, your margins, your padding, font size and family, maybe simple calls, but doing it as this step, will save you countless calls of code later on. Even more so when dealing with large sites with 100's of lines of CSS code.
Lastly, keep your CSS organised, make comments, put them into catagories.
Most cross browser related issues are down to one thing, user error. Style it right, style it once, and you and your users will be happy!
I use HTML5 Boilerplate as a a starting point for css and html.
For a grid-based site, I might also use Fluid 960 GS
I write my code to be standards compliant first, and cross-browser friendly second. Don't kill yourself for the bad browsers.
You can use something like Modernizr to feature Progressive Enhancement. Here are some good reasons to do this
For bad browsers, let's just call it IE, wherever something is breaking, just give it more space, and make sure everything is readable. If you do that, it should look ok, but don't kill yourself trying to make it pixel perfect to the design. You can use that link in point 4 to explain to your client / boss why it isn't the same in every browser, and why that's a good thing, not bad.
If you can do all that, your code will be nicer to write, quicker to run and much closer to being future-proof.
If all else fails, use padding instead of margins whenever you can, and things will be more consistent when viewed in IE. And if you're supporting IE6 try and not use too many transparent png images.
There are some other good suggestions here, but I'll add one: YUI's reset CSS stylesheet. It gets rid of some of the more obvious incompatibility problems, without adding a whole lot of page weight.
QuirksMode.org is an excellent resource for browser compatibility information.
I'm working on a project which will deliver small pieces of text to a display engine that will show them to the user. One of the requirements is rich styling: position, color, font, the works. Each transmission should stand alone, with its own embedded style information. I have already built a web service to deliver the text.
How should I represent this style metadata so that it's compact, flexible, easy to parse and easy to render? I haven't decided on a client to display the text, so it should be as presentation-agnostic as possible and easy to transform if I need to. I was thinking of using CSS, but I'm not on top of all the different ways to style text these days. What would you recommend?
Some more specifics about what you're trying to do might be useful. As far as I can tell though, I don't see any real reason not to use CSS or something similar.
It's easy to type, easy to learn, widely known, and there are pre-existing engines for rendering it. It can do all the basics of text styling and positioning. (And CSS3 transforms can give a lot more flexibility in terms of text positioning.) And if you end up implementing your own rendering engine for some reason, it's easy to parse and there aren't too many rules if you only need to worry about text and absolute positioning.
There are a couple of reasons I can see for not using CSS. One is if you need more advanced transformations--say, you want to skew or distort the text (in cases like this, you're going to need to end up rendering an image instead of text). In that case, I don't know of anything pre-existing that will fit your needs. (I think the closest match in that case would be SVG, but then you lose any prospect of it remaining at all simple or easy to use.)
I would say this is a perfect place for using XML. You can go way beyond the permissible values of CSS in defining your meta-information.
If you wanted something more compact you could send back objects via json with the same information.
CSS is really meant for rigid web-browser-compatible display. If that's not what you're doing here I wouldn't recommend it myself.
EDIT:
Example:
<data>
<font>Garamond</font>
<text>This is the message I'm sending back</text>
<font-weight>bold</font-weight>
<color-of-the-third-letter>green</color-of-the-third-letter>
</data>
CSS ultimately cannot be as specific as custom XML. It all depends what you want from it, though.
I'd love to know how long a string is when it appears on the screen. We're not using a fixed width font, so:
"Our mother's tummy makes dummy noises."
is much wider than:
"Lilly Leadbetter lives life leisurely."
Is there a way to tell how long something is by the characters? I don't need pixel perfect accuracy, just long enough to ellipse at roughly the right spot. CSS overflow won't help, because I can't attach the ellipse after CSS has determined how long it is.
Here's a related question with at least a partial solution. Basically the technique is to render the text in a hidden <span> and then (using JavaScript) measure the pixel width of the span, then chop off characters until it fits in your target width.
And here's a jQuery plugin that encapsulates this sort of functionality, linked from this related question.
Ordinarily I'd agree with fsb that you have to understand that on the web you don't have pixel-perfect control over everything. It's not print. Choose a reasonable length and chop it off server-side, you can avoid chopping in the middle of a word to make it look a little better.
If you insist on a perfect length though, check out ThreeDots, a jQuery plugin.
Unless you're using a fixed width font, I don't think there's any simple way to tell. Perhaps the easiest way is to render the candidate text and see how long it is.
Server-side, this is a bit hit-and-miss because you don't know for sure what the browser is going to do with the text. You could use GD (or something like that) and your best guess what font and size the browser will use but is it worth the trouble when you can't trust your guesses?
Client side in javascript (or whatever) you can have the browser render the text and look to see how long the rendered DOM object is (as Jordan said).
One solution, though perhaps very hard psychologically, is to understand that web page rendering is not typography. You do not have control. You do your best, accept the limitations and move on to the next problem. Technically simple but maybe hard to accept.
You can use the truncate helper function. Even if you know about the visual length, you cannot probably optimize it for all browsers/browser window resizes.