- This topic is empty.
-
AuthorPosts
-
February 22, 2013 at 5:18 pm #42924PicnicTutorialsParticipant
Some crazy way possible?
February 22, 2013 at 5:19 pm #121241PicnicTutorialsParticipantHere is one option but that is no good for me http://www.myfonts.com/fonts/baselinefonts/rough-egyptienne/left-italic/
February 22, 2013 at 5:49 pm #120867AlenParticipantI’m pretty sure it’s impossible to do. And why would you want to? Give us some context. What are you trying to do exactly? Is it decorative piece or informative piece of text? Are you worried about readability and legibility?
If it’s a decorative piece maybe use Photoshop to mock up the right solution.
Here are some resources with similar question:
http://stackoverflow.com/questions/11976193/italicize-text-backwardFebruary 22, 2013 at 7:16 pm #125690MottieMemberI just updated that [StackOverflow question with my answer](http://stackoverflow.com/a/15035402/145346)… basically I used the skew matrix from the [Mozilla docs](https://developer.mozilla.org/en-US/docs/CSS/transform#Live_examples) and ended up with [this demo](http://jsfiddle.net/Mottie/dRQaw/510/):
HTML
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu metus nisi.
Integer non adipiscing massa. Etiam et diam magna. Mauris sit amet arcu dui, a
malesuada erat.jQuery
// html function requires jQuery 1.4+
$(‘#skewed’).html(function (i, h) {
h = h.replace(/s+/g, ‘u00a0’).split(”);
return ‘‘ + h.join(‘‘) + ‘‘;
});CSS
#skewed {
font: 24px Georgia, sans-serif;
background: #ccc;
padding: 10px 20px;
}
#skewed span {
display: inline-block;
/* see https://developer.mozilla.org/en-US/docs/CSS/transform */
-webkit-transform: matrix(1, 0, 0.6, 1, 8, 0);
-o-transform: matrix(1, 0, 0.6, 1, 8, 0);
transform: matrix(1, 0, 0.6, 1, 8, 0);
}February 22, 2013 at 7:20 pm #125691PicnicTutorialsParticipantHey good job! That is actually quite usable. Take care. :)
February 22, 2013 at 7:33 pm #125692February 22, 2013 at 7:47 pm #125693MottieMemberHmm, actually it would be easier to use and control by using skewx instead ([updated demo](http://jsfiddle.net/Mottie/dRQaw/511/)):
#skewed span {
display: inline-block;
/* see https://developer.mozilla.org/en-US/docs/CSS/transform */
-webkit-transform: skewx(20deg);
-o-transform: skewx(20deg);
transform: skewx(20deg);
}February 23, 2013 at 10:14 am #125714cnwtxMemberThis is where nth-line(n) would be really useful!
February 23, 2013 at 10:49 am #125718chrisburtonParticipantThis severely effects legibility. Why would you want to do this? By the way, you’re looking for an opposite of oblique, not italic.
February 24, 2013 at 1:34 pm #125815dfoggeParticipantplease don’t do these horrible things to innocent typefaces.
February 24, 2013 at 4:00 pm #125826PicnicTutorialsParticipantBetter question is why do you guys care what I do with one word on my site? Now you’ll say – “oh it’s only one word – ok then then”. Still why do you care what I do with my site?
I’m sorry this just carries over to from things in my life that I experience and see. I can’t stand it when people have nothing better to do than stick their nose in my bussiness. To those people I say – you run YOUR life the way you want and I’ll run MINE the way I want. That includes everything from taking a shit upside down (god forbid) to italisizing text the oposite direction. If its not directly affecting you you should not care.
February 24, 2013 at 4:10 pm #125828dfoggeParticipanthey you do you, buddy. i just feel that typography matters more than most design choices, especially on a site where you expect users to, ya know, read.
that being said, you’re right that doing things like this to a single word probably won’t effect much.
February 24, 2013 at 5:09 pm #125839Kitty GiraudelParticipantYou shouldn’t do this. It’s counter intuitive and visually unappealing.
February 24, 2013 at 5:33 pm #125842cnwtxMemberBefore y’all tar and feather him, I just used this exact thing to un-italicize a cursive font that was naturally tilted. It’s still perfectly readable.
February 24, 2013 at 7:16 pm #125851chrisburtonParticipant@cnwtx Majority of script faces are slanted. You could have just found an upright script. By the way, no one is ridiculing him, we are giving advice.
@websitecodetutorials Why do you come here if you’re just going to explode at those who give you relevant and professional advice? Also, you invited us into “your business” when you asked a question on this forum. What is clear to me is that even though it is your site, you don’t care about UX, which is obviously important for the type of site you’re running. Good luck with it.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.