I'd like to rotate a text by 90 degrees counter-clockwise. Firefox and Chrome are no problem, using:
-webkit-transform-origin: top left;
-webkit-transform: rotate(-90deg);
-moz-transform-origin: top left;
-moz-transform: rotate(-90deg);
For Internet Explorer, it should be this line, as far as I know:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
(The other method, writing-mode, can only rotate text clockwise 90 degrees).
However, in IE the rotated text looks like a badly scaled image on its side (comparison below).
Firefox / Chrome -- vs -- Internet Explorer:
Is there any way that Internet Explorer can rotate the text in a more elegant way (possibly Javascript/jQuery)? I've been Googling, but I can only find more references to this method...
It is Def the text rendering engine in IE; however, it's doable.
filter: requires the element to have layout (ie. zoom). You can beat the rendering problem (most of the time), by giving the element a background color. Try the following on your example:
zoom:1;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
background-color:white;
The RenderEngine of IE is awful... I would try to work with background images. Maybe a Font Replacement like Cufon would do a better Job. Cufon generates Images of your Text. Works good in IE as far as i know.
I would suggest either Google Fonts API or Cufon (as #swishmiller said), or disabling Anti-Aliasing (ClearType) in IE so the fonts always look unsmoothed (is that a word)?
Google Font API: http://code.google.com/webfonts
Cufon: http://cufon.shoqolate.com/generate/
Disable ClearType:
/* This will force IE into thinking there is a filter actually doing something, so it'll disable ClearType */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
[edit] I should mention that I've not tried the Google Font API fix...
Try -ms-writing-mode property:
http://msdn.microsoft.com/en-in/library/ie/ms531187%28v=vs.85%29.aspx
Related
I'm currently using a table structure with the native HTML5 Drag&Drop functionality. I'm applying some "transform" CSS to the table.
The problem here is that after applying "transform" property on the element, if I try to drag&drop via Firefox, the ghost image is positioned far of the cursor ( as I can see, on its original position).
Its working fine on Chrome and Edge, but Firefox gives this bug.
Do you know anything I can try so I can modify the position of the ghost image or fix this issue?
JSFiddle: https://jsfiddle.net/6j3fbq17/
Thanks!
transformations are different for firefox than they are for chrome.
I haven't read your code completly, but i assume that the problem is that you forgot to add a fallback variant for mozilla.
firefox needs a special prefix, e.g. -webkit-transform: translate(100px) rotate(20deg);
taking a look at this might help.
Currently I am using FireFox latest version and IE8
To change the orientation of printing , I used
#page {
size: portrait;
}
in my css file.
#page reference
Although it claims that the #page is supported in both browsers , after my testing it is not working at all besides Chrome. I would like to know how to print the page in different orientation in FireFox / IE8.
No application should depend on this feature to work cross browser right now because the CSS3 standard on page orientation for printing is still under implementation in most browsers.
For Google Chrome it works just fine: http://dev.activisual.net/test.html
Ultimately the decision of changing the orientation relays on the user during the printing process (even if it works), so you could simply let the users know that they should print the page in landscape or portrait, but in general there won´t ever by a way to prevent the users from changing the orientation while printing on desktop browsers.
Here is a bug report for FF reported very recently:
https://bugzilla.mozilla.org/show_bug.cgi?id=851441
You can read the accepted answer on this question for reference:
Landscape printing from HTML
As the MDN reference says:
You can only change the margins, orphans, widows, and page breaks of
the document. Attempts to change any other CSS properties will be
ignored.
As far as supplying you with markup that achieves what you want, that would be outside the bounds of what's allowed on SO. In addition, it could be a bit of work since you are wanting a two generation back version of IE to attempt to perform as well as a current generation Firefox.
Page printing layout is portrait by default, to change to landscape and see the difference try the below.
The the below css code is supported since version 19.0 , try it, it should solve your problem:
For IE8 you should use HTML5 directive in your html
<!doctype html>
Css code :
#media print{#page {size: landscape}}
Firefox: https://developer.mozilla.org/en-US/docs/Mozilla_CSS_support_chart
IE http://msdn.microsoft.com/en-us/library/hh781508(v=vs.85).aspx
It's weird that this
{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
doesn't work for you for the latest version of Firefox as i tested it myself and works fine.
If you can't find anything have a look here even though this isn't exactly the right portrait mode (for printing) but you might get some ideas.
Lastly if you get desperate and u really need to find a way to do this, you can always take a screenshot of the web page with for example html2canvas rotate the image and then print the image instead of the webpage...
Not an ideal solution but this way you bypass the browser.
I ran into this issue a little wile ago while making a simple form.
Chrome does seem to be the best browser for limiting a users control over the printing process. However it is still limited, and Firefox/other browsers don't support #page.
My solution was to add a #media print to the style sheet to "encourage" the user to print the page in portrait. The #page is just for chrome. display: none; on the header, nav, and footer gets rid of the unwanted browser additions (this only works in chrome and firefox, in ie you still have to select no headers) I have a border:0; on input fields, because it was for a form...
Finally I put a width and height on the container div, similar to the size of a standard 8.5 x 11 piece of paper. So it would fit the page nicely.
#media print{
#page {size: auto; margin: auto;}
header nav, footer {display: none;}
input {border: 0px;}
#container {width:9.1in; height:10in;}
}
Ultimately webpage printing is still very browser/user dependent, and there really isn't much that can be done about it. Making #media print helps, but really the only way to get the page to print exactly as you want would be to generate a pdf version of the page that the user could export.
Just go to file, click on page setup and change the orientation. This works for me
I have a pure CSS menu and would like to provide a little visual feedback. As the cursor passes over an item, I would like it to magnify to 110% or 120% of its normal size.
I just use text in an unordered list, no images.
Can this be done easily?
Update: MS IE 7+ (any thing else is a bonus & probably free anyway)
You don't really need JavaScript for this. CSS has the transform property to apply affine transforms to elements. Just do something like li:hover { transform: scale(1.2); }.
It works in all recent version of Safari and Firefox, and IE 9 and newer — and if you're open to JavaScript solutions, Transformie adds support for 6+.
I made a Fiddle to illustrate (includes all the browser prefix versions, but I didn't actually test it in all the browsers, so I might have bungled something somewhere).
Your best bet is to just adjust the font-size on hover:
li:hover {
font-size : 1.2em;
}
if you've defined everything in ems, the entire thing will adjust. If you have static margins/etc you want to scale, you're still better off just re-defining those in CSS, but you can also use the zoom or transform properties as Chuck pointed out.
I would like to enhance a depth effect by hiding the mouse cursor as it passes over a div, is there a method that will work across all browsers?
Finding something that works across browsers is a pain.
The code below works on Chrome, IE, and Firefox.
IE likes .cur files, Chrome likes the embedded png, and some browsers actually respect the none :)
#div {
cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjbQg61aAAAADUlEQVQYV2P4//8/IwAI/QL/+TZZdwAAAABJRU5ErkJggg=='),
url(images/blank.cur),
none !important;
}
Looks like:
/* css */
div {
cursor: url(url/to/transparent.gif), auto;
}
should do the trick or:
divEl.style.cursor = 'url(path/to/transparent.gif), auto'; // javascript
But hiding the cursor can annoy visitors immensly.
Addendum: In the examples I wrote .gif files, but you might actually need to convert to .cur or .ani files for better browser support.
Why don't you simply reduce the size of the cursor as it gets closer to the center of the deep field?
You can change the type of cursor you use (pointer, help, crosshair,...) but to hide it... Even if this would be possible in modern browers, older browsers won't support this. Also I can't imagine why you would hide the cursor.
EDIT: in firefox when adding cursor:none; to the body element it hides the cursor untill I go over a link, it's maybe a start.
Using a full transparent picture will not help. (It won't let you do that:()
You should use a 1x1 1% transparent image instead, plus cursor:none.
I was asked to implement a menu bar that is neither horizontal nor vertical. Here are two example buttons:
This is something new to me, so to learn how to make this work I'm looking for a site (or better yet, a tutorial) that uses a similar menu bar. Any ideas?
You should look at here
http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/
or use like this
Update:
/* for firefox, safari, chrome, etc. */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
/* for ie */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
/* for opera */
-o-transform: rotate(-90deg);
see example http://jsbin.com/ajoqe/4
Update: 2
or use this extension
Universal CSS Transforms: Rotate(free extension) : http://www.dmxzone.com/go?17422#Overview
* Pure CSS based - No Flash required!
* Fully cross browser compatible - The Universal CSS Transforms: Rotate
is a jQuery based, build only with
HTML & CSS - no Flash what so ever! It
even supports IE6 next to the other
major browsers.
* Search engine friendly – The Universal CSS Transforms: Rotate is
pure HTML and CSS based and generates
search engine friendly HTML code that
can be nicely indexed by all search
engines and web spiders.
update 3
or use this http://code.google.com/p/jquery-rotate/
Two JavaScript image handling
implementations are supported:
using DXImageTransform filter for Microsoft Internet Explorer
using Canvas object for other browsers
The library has been tested with:
* Mozilla FireFox 2.0.0.2
* Internet Explorer 7.0
* Opera 9.1 (note Opera 8 is not supported)
Just because the image is at an angle doesn't mean the hit area (the link) needs to be at an angle...
Stuff like this is usually done using images and - if you want a non-rectangular click area - using image maps. It's not very difficult to do but a lot more work than a straightforward ul.
The CSS rotate capabilities are not wide-spread enough yet to achieve a consistent effect in all browsers, but it might be an option to build a cross-browser menu that looks okay unrotated, and great when rotated.
CSS Transformations are currently supported only via vendor-specific CSS attributes. See this blog for cross-browser support.