When I select an entry in the Element Inspector, the appropriate area on the web page is overlaid with translucent blue which is very helpful in determining where elements actually appear on the web page. However, at times an additional area is shown in a dark beige overlay. This area is always adjacent to the blue overlay. I have no idea how to interpret the meaning of the beige overlay but I suspect that the answer to this question may help me debug other layout problems I am having.
This area represents margin of a block element.
Related
I am replacing the cursor with an SVG, and it doesn't match the color of other elements on the page.
I have attached an image below (taken with my phone, because I cannot screenshot the cursor) Both SVGs were saved from the same file, both have a color value of #FF0000. This persists across all browsers.
The TOP button is applied as a background to the element.
How can I fix this?
Apparently, the two colors appear to be identical on some monitors, but drastically different on others. In particular it's the Apple Color LCD profile on Macbook Pros that creates a drastic difference. Unfortunately this isn't something I will be able to solve.
I am seeing a strange issue in Safari 10 that may be present in earlier versions. When SVG content is present in the document along with a content editable div the text is disappearing. This happens mostly when selecting text, but also while toggling the display property of the svg content. Here are a few videos showing the behavior: http://www.screencast.com/t/CeyFqYyfeFZW
http://www.screencast.com/t/eRAGsopA
I can't make the application available publicly. We have a pretty complex document composition layer which is probably to blame. I'll try posting an isolated test later. I have only observed this issue on Mac OS X Yosemite (10.10.05). iOS seems to be fine. If anyone has seen this issue before please let me know. Thanks!
After a bunch of tests I figured out that in this particular example the problem is caused by the situation when editable text has higher z-index than image (raster or svg). Image can be placed anywhere, but not geometrically below the text. This issue also is specific to Safari 10+. Testing the original example in 9.1 everything works.
I have created a simple example testing z-index https://jsfiddle.net/xngmocxm/9/
There is a background element, which is jpeg, it has z-index = 0, 2 svg path elements (grey and red), 2 editable text elements and svg image (HomeSmart in the top left corner).
Z-index of the left text element is set to 30, right one has z-index 20, svg image z-index is set to 25, i.e. in between 2 text elements. In test browser I can see that in this case only the left text disappears, right one is shown and selected just fine.
So the svg that is above the text does not manifest the issue, but if the SVG is below the editable text this issue occurs.
If image content is jpeg, it also causes same issue:
img src https://jsfiddle.net/xngmocxm/12/
Anyway I was able to fix this by setting overflow to hidden on image wrapper of the problematic image element. I think this a is Safari bug and not intentional behavior.
So here is the problem:
I am trying to create dynamic buttons that have text. The text will be generated dynamically so the svg object doesn't know the size of the text. There are two things that I am looking to do and I hope that SVG will do this
First I want the left and right edge of the svg element to stay the same even if I scale the element horizontally
The problem is that I have to set a width on the svg otherwise it doesn't show up when I display the page. Also on the Home and blog buttons you can see that the edge is compressed. I want the edge to stay the same no matter how much text is in the element.
Also I can't seem to set the scale or width properly even with a javascript .getComputedTextLength()
Any help or a point in the right direction would be very helpful
Buttons that are sized to their text content is functionality that can be adressed with Raphael's getBBox()
The use of this js library means that you are implicitly using SVG or VML and this functionality is more easily addressed by referencing this JavaScript library
To see the getBBox() function in action you could visit the Autobox example here:
http://www.irunmywebsite.com/raphael/additionalhelp.php?v=2
I'm trying to process an image using ABBYY OCR SDK using the sample code placed in this question but I'm not able get the co-ordinates right for a specific word say "OCR" on the screenshot below.
I want to draw an overlay (yellow rectangle over the word "OCR") and sometimes the rectangle is placed very far away from the actual word.
The XML you get is synthesised according to this schema.
For each recognized character it will contain an instance of charParams element as shown in the answer you linked to. The element will contain the coordinates in page pixels - the same XML also contains a page element:
<page width="..." height="..." resolution="..." originalCoords="...">
where the image width and height are stored. So l and r for each charParams element is in range 0..width-1 of the corresponding page and t and b for each charParams element is in range 0..height-1 of the corresponding page.
Also it's worth mentioning explicitly that all coordinates are in pixels - they are completely resolution-agnostic. This is why whenever you try to highlight anything on an image you have to take zoom into account - the image will likely not be always displayed as is by your device software, but will be downscaled and so you have to map page coordinates onto your zoomed-out image coordinates and highlight appropriately.
Have you checked the DPI of the original image and also check the documentation to make sure the OCR engine is using the same DPI and not returning the image in points or some other measurement system.
It could be that rectangle you are drawing in iOS is not based on pixels but on some other measurement system also.
You just need to work through the process, testing as you go, and work out where the problem is coming from. It is most likely a uniform scaling and the distance from the actual word is proportional to the distance of the word from the top left of the page.
I have a website with some text on the body and a fixed menu bar on top.
I want the text to 'fade-out' as you scroll, instead of disappearing behind other element.
My website's background is grey, so II made a gradient that goes from grey to transparent.
It works great, except that you can sort of tell that there's a grey band across the website.
Notice the band (starting right above the red arrow) on this screen I printed
Why does irt show an off color?
I know about PNG gamma correction, but this is not it, I have removed the gAMA part, I have also tried "fine-tuning" it, nothing will work. (I know I am doing this right because I tried it on a solid PNG, stripped the gamma data, and it perfectly matches the CSS background).
Any ideas on how I can achieve this?! (I can use any other method, doesn't need to be a PNG gradient, but I do need it to be a fade-out).
Make a gradient from opaque gray to transparent white.