I am using an embedded font for the top navigational elements on a site
Helvetica65 and at 16px it is the perfect WIDTH but I need it to be
about 90% of it's current height.
In Photoshop, the solution is simple - adjust the vertical scaling.
Is there a way to do essentially the same thing using CSS? And if so, how
well is it supported?
Here is a jsFiddle of the basic nav coding.
The transform property can be used to scale text.
It's for blocks, so you'll need to also add display: inline-block in order to use it on HTML elements like <a>, <span>, <em>, <kbd>, etc.
body {
font-family: "HelveticaNeue-Medium", sans-serif;
font-size: 12px;
}
a.vertical-scaling {
display: inline-block;
transform: scale(1, 1.5);
/* Safari and Chrome */
-webkit-transform: scale(1, 1.5);
/* Firefox */
-moz-transform: scale(1, 1.5);
/* IE 9+ */
-ms-transform: scale(1, 1.5);
/* Opera */
-o-transform: scale(1, 1.5);
}
<ul>
<li><a class="vertical-scaling" href="/">HOME</a></li>
<li><a href="/expert-witness">EXPERT WITNESS<a/></li>
</ul>
Related
Is there a CSS code that changes this text
This is it
to this one
ti si sihT
Try this
.cssClassName { direction:rtl; unicode-bidi:bidi-override; }
EDIT:
apply this class to a paragraph tag and you should get the results your looking for.
Yes, there is:
.reversed {
direction: rtl; unicode-bidi: bidi-override;
}
Thats not right to left, thats mirroring.
CSS:
direction: rtl;
unicode-bidi:bidi-override;
#victor-jalencas gave the answer.
The other thing some people here started talking about is flipping and it is done with replacing the normal text with Unicode flipped equivalents.
Example can be found here: http://www.revfad.com/flip.html
You can use CSS filter filp (Only supported in IE)
<div style="width: 300; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: FlipH">CSS Tutorials</div>
Try this, IE does seem to have a bit of a hard time rendering fonts smoothly, but it works like a charm in all browsers. I have tested IE 7-9, Ff, Chrome and Safari on Win 7
.flipText {
display: block;
-moz-transform: scaleX(-1); /* Gecko */
-o-transform: scaleX(-1); /* Opera */
-webkit-transform: scaleX(-1); /* webkit */
transform: scaleX(-1); /* standard */
filter: FlipH; /* IE 6/7/8 */
-ms-filter: "FlipH";
}
I tried to change the size of the paper-checkbox by changing the width and height attributes in my css-file, and by using transform: scale(2,2)
Scale makes it blurry, width and height only changes the clickable area.
How would I achieve this?
I think you found the correct solution already. You can't change the resolution, therefore there's nothing you can do.
For those who don't care about the blur, here's the css:
paper-checkbox
{
/* Double-sized Checkboxes */
-ms-transform: scale(2); /* IE */
-moz-transform: scale(2); /* FF */
-webkit-transform: scale(2); /* Safari and Chrome */
-o-transform: scale(2); /* Opera */
padding: 10px;
}
In polymer 1.0 and paper-checkbox 1.2 it works with this simple style
paper-checkbox {
--paper-checkbox-size: 30px;
}
When I was first trying to use paper-checkbox bower installed version 1.0 for me. And this version had issues. So maybe this might be the case for you as well.
I have this stylesheet
.rotate div img
{
-webkit-transform: translate(-18cm, 2cm) rotate(-90deg); /* WebKit */
-webkit-transform-origin: top right;
-moz-transform: translate(-18cm, 2.5cm) rotate(-90deg);/* Mozilla */
-moz-transform-origin: top right;
-o-transform: rotate(90deg); /* Opera */
-o-transform-origin: top center;
-ms-transform: translate(-18cm) rotate(-90deg); /* Internet Explorer */
-ms-transform-origin: top right;
-sand-transform: translate(-18cm, 2.5cm) rotate(-90deg);
-sand-transform-origin top right;
max-width: 100% !important;
}
I'm having trouble with IE, the transforms are applied and are showing on screen
but when I click on the print button, the printed result is without the transforms applied to it.
(added screen in the media to see the effects, before printing)
It works fine with Firefox and Chrome
EDIT
Yes, I was testing on IE9.
Having played with it a bit more yesterday, I noticed that the image did in fact do the transform part, but what is sent to the printer is the image without the transform applied to it.
-ms-transform does not exist in IE10+. IE8 and older have no support for CSS transforms, IE9 uses only -ms-transform, and IE10 and newer use only the unprefixed transform.
See http://caniuse.com/#feat=transforms2d for more info if needed.
I has same issue but resolved by setting up media attribute to style tag as follows
<style type="text/css" media="print">
No need for fancy prefixes, just use normal transform to target MS IE!
I have a customized content management system. I'm using CKEditor to change the content. I want a live preview of the webpage when I click submit button after edit. I'm using iframe but it shows horizontal and vertical scroll bars because the webpage is bigger in size.
I want to do it in a specific dimension to view a complete page means render the webpage in a smaller size. Even it is a image of webpage I don't have any problem.
I love css3please:
<style type="text/css">
.box_scale {
width:300px;
height:300px;
-webkit-transform: scale(0.5); /* Saf3.1+, Chrome */
-moz-transform: scale(0.5); /* FF3.5+ */
-ms-transform: scale(0.5); /* IE9 */
-o-transform: scale(0.5); /* Opera 10.5+ */
transform: scale(0.5);
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');
}
</style>
<div class="box_scale">
<iframe width="300" height="300" src="http://example.org"></iframe>
</div>
The only thing besides selecting a scale was to add a width and height to the div. of course, you might want to add some rules for transform origins as well. See also: https://developer.mozilla.org/en/CSS/transform
I have a page that houses an asp GridView and I would like to display the text vertically to allow it to print better. Currently I'm using css to do that:
.rotate { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); width: 25px; }
Which works in FF except the 25px width is ignored and in IE the width is being set correctly but the text isn't vertical. Anyone know how to make this work in both browsers?
Here's a -90 degree rotation using CSS that should work in IE:
.box_rotate {
-moz-transform: rotate(-90deg); /* FF3.5+ */
-o-transform: rotate(-90deg); /* Opera 10.5 */
-webkit-transform: rotate(-90deg); /* Saf3.1+, Chrome */
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',
M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17)"; /* IE8 */
zoom: 1;
}
For your reference http://css3please.com/ is a good tool for generating these kind of CSS effect with pretty good cross browser support.
I can't really say why the width isn't applying in FF without a concrete example, but you might try setting display:block;