subpixel

I've never worked with Java drawing methods before, so I decided to dive in and create an analog clock as a PoC. In addition to the hands, I draw a clock face that includes tick marks for minutes/hours. I use simple sin/cos calculations to determine the position of the lines around the circle. However, I've noticed that since the minute tick-marks are very short, the angle of the lines looks wrong. I'm certain this is because both Graphics2D.drawLine() and Line2D.double() methods cannot draw with subpixel accuracy. I know I can draw lines originating from the center and masking it out with a

I have a line that should get thinner the longer it gets. The problem is, that you can clearly see a jump when it gets a pixel thinner. Is there a way to do subpixel rendering/antialiasing on Android? canvas.drawRect() takes float values, but it's ignoring those. Here's the code: @Override protected void onDraw(Canvas canvas) { float width = getMeasuredWidth() / (float) getMeasuredHeight() * getMinimumHeight(); float left = (getMeasuredWidth() - width) / 2.0f; canvas.drawRect(left, 0, left + width, getMeasuredHeight(), paint); super.onDraw(canvas); } The paint object has ANTI_ALIAS_FLAG

I'm trying to create a fluid CSS grid, it works in Firefox and IE8+ but NOT in Safari/Chrome/Opera where the sub-pixel rounding issue becomes visible: http://jsfiddle.net/bJKQ6/2/ .column { float: left; width: 25%; } The main container has a width of 100%, and if you change the browser size in Safari/Chrome/Opera you can see how the rounded widths are inconsistent. After extensive reads about the problem I understood that "there is no right or wrong solution" for the sub-pixel rounding, but the Firefox way seems the best compromise to me. (For example, if I set 4 divs at a width of 25% I

i have a container that takes up 829px on a row, and has a background-image of the same size. i have a div within that container that calculates its width based on the 829px container. on safari, the divs width comes out to be something like 173.8px, but since safari/webkit round down, its truncated and becomes 173px in width. this 829px container has 3 divs inline on the same row. the first div, 1px is lost, the second, 2px is lost, and by the third, 3 pixels are lost, so the third div is shifted left by three pixels. on an ipad, thats 6 pixels lost. i've tried to search for subpixel

I noticed that Web-kit browsers like Chrome and Safari (Windows) tend to round em values to nearest pixel, while Firefox, IE, ? Opera ? can use sub-pixel values. This is normally not a big issue, but when I use em to precisely align letter spacing or use text-shadows for consistent effect in different client resolutions this causes me headache. Take a look in the following test case. You will see that in FF even the smallest letters still have a shadow, while Chrome rounds down the em value to zero and the first two paragraphs have no shadow. EDIT This is not about the units. If you replace 0

On Mobile Safari on an iPhone 4 or iPhone4S, can you have a border of a div that is 0.5px wide? I wrote an overview of different techniques : Half-pixel border border: 0.5px solid black; Cons: Works only in Firefox and Webkit Nightly. border-image border-width: 1px; border-image: url(border.gif) 2 repeat; border.gif is a 6×6 pixel image: Pros: It works! Cons: An external image. It’s only 51 bytes and it can be inlined using Data URI. You’d need to fire up Photoshop (or whatever you use) to change the border color, which isn’t very convenient. Multiple background images background: linear

Is it possible to have a border that is thinner than 1px and works in IE6+ and is not an image and renders properly visually? Thank you. I think you could define the width of a border using units like em which would come out to less than 1px, and it would be valid. However, like Will Martin said, for display purposes it would just round it up or down to a whole pixel. Edit: I have overseen then IE6 restriction, but I leave the answer here for others ... Its possible with transform:scale(0.5) and put a border element with border:1px; inside. So you get a half pixel border, that (although