I'm working with Course Management System Moodle and in the admin the folder tree (which uses folder icons) displays for about a second the alt attribute given (In this case "Open Folder") then it hides and shows the image when the image is ready.
The system is kind of slow so I assume Firefox thinks at first that the images don't exist.
This is a problem because during that split second the layout stretches to fit the wider words making it look unprofessional in my opinion.
Is there a way I can hide this tag without having to remove the alt tags? (which would be labor intensive) maybe using JQUERY or CSS.
displays for about a second the alt attribute given (In this case "Open Folder") then it hides and shows the image when the image is ready.
Yes, that's what alt text is for: it provides a textual alternative for when the image isn't available — whether that's because there's an error, or images are turned off in the browser settings, or, in this case, the file just hasn't arrived yet.
Is alt text really what you want? Unless the image in question actually contains the words “Open Folder”, the above is inappropriate alt text. If we're talking about one of those little plus/minus icons that opens a tree, a better alt text would be ‘+’. “Open folder”, as a description of what the image does (as opposed to what it contains), would be better applied to the ‘title’ attribute used for tooltips.
Note that if you're using Quirks Mode and the image has a fixed size specified, Firefox will use a ‘broken image’ icon with the alt text overlaid and cropped inside, instead of the plain alt text on its own. This is to match IE's old behaviour. But you don't really want to use Quirks Mode, and in the common case where the fixed size is small, the cropping makes the alt text unreadable and useless.
This is a problem because during that split second the layout stretches to fit the wider words making it look unprofessional in my opinion.
I'd recommend: getting over it. That's how the web rolls, any page can move about a bit as it renders progressively. For images you should only ever see it happen once, then the image will be cached and will appear straight away. If it doesn't, there's something wrong with the cacheing setup.
Depending on what kind of layout you are talking about, you can perhaps fix that to not respond to the changing image size, too. For example if using a table, setting “table-layout: fixed” on the table and “width: (some number of)px” on the top row's image cell will make it stick to that width even if the text inside is smaller. Possibly causing the alt text to run over into the next cell though, mind.
If the images are part of the layout, I'd recommend moving them to CSS. You should also optimize your images wherever possible whether they are CSS or otherwise. You could also move your JavaScript files to the bottom of the page where possible as they block parallel downloads. In general, applying a lot of the techniques here would probably help.
If the images have to be a certain width, give them an explicit width.
Related
While in class I like to take handwritten notes, afterwards I scan them and then type them up (helps me remember them and also makes them easily searchable). The main issue is I have is I use A LOT of drawings and complex math and converting the math formulas into latex (or word) is very time consuming and the drawings require that I keep the PDF and the text document. What I would like to do is take the basic text that I have typed myself (no OCR) and add a text layer to the PDF's that way the PDF's will be searchable and I can save a lot of time by not converting the math or drawings.
I've looked into Preview, PDFpenPro, acrobat, a couple of linux programs but so far I haven't really found anything that will do this.
Any idea of how I could do this or a program to use?
I also scan my notes. Sometimes I go back and add some text to them using this technique:
Open up the scanned pdf in Preview, then click on the "Edit" button in the top right corner, then the "Text tools" button on the left side (its a little box with Aa in it). From there you can drag open a text box and type into it.
Now the secret trick is that if you save it here as it is and try to open it in your ipad using PDFExpert or some other program then the text might not be there. So here's how to go through that slight hiccup: After you've annotated your notes how you want instead of just saving it as a pdf, use the Print option: File->Print or Command+P. Now click the PDF button on the left to "Save it as a pdf". Now that its printed you can open it and search it in any program that reads pdfs. Attached is an example.
One other thing, it seems like maybe you want to write over your existing handwritten text with typed text? I'm not sure if this is the best way. But if that's what I was trying to do I would:
Scan my notes
Read through them, typing them up as you said
Open the scanned notes in Photoshop or some other program
Draw a giant White Fill White Stroke rectangle over the handwritten text
Save it as a pdf
Do the technique above and copy and paste the typed text from step 2.
I hope this helps. And I wish you luck, I'm still working out the kinks myself for scanned notes but the possibilities have me pretty excited!
EDIT: I just checked out PDFpenPro, which I highly recommend because you don't have to go through that printing trick, you can just save the pdf document after annotating and other programs will recognize the annotations.
I have the following problem:
I want to use images for my navigation, because I want to use a special font (Meta).
I know that images for navigation suck very much, so I am wondering what the best way to build such a navigation would be.
I have 2 main concerns:
Google findability.
Usability.
It is for my design portfolio so I am not overly concerned with screen readers (not much sense in my opinion, since it is all about designs in any case).
Is it better to use real images ( incl. alt tags) or should I just hide the text using a negative text-indent and use a css background image. Maybe there is even a third and better way.
Thanks.
Images with alt text will be fine for web spiders, but not ideal for usability (you can't search a page for alt text in most browsers). Negative text indents are searchable, but the highlight won't be visible and IMO that's actually worse.
The best solution is to use a web font instead of images. You can generate one from your desktop font easily with Font Squirrel.
I need to develop a desktop application which will
1.) have a list of the Different Application logos (Background Transparent) e.g. IE, FIREFOX, CHROME, PHOTOSHOP ETC.
2.) User will take a screenshot of desktop and save the image.
3.) Now my application need to search all the logos in the screenshot image and tell which all logos are present and where.
4.) I used OPENCV, it's working, but when user changes the desktop background & captures screenshot, it's not working as the transparent area of logo is getting the desktop background content.
Can somebody provide a solution or libraries open source, commercial to do this job.
This is easy to do using cross-correlation.
See my answer to this question.
Basically:
Start with desktop image and one template image for each icon
Apply edge detection (e.g. Sobel) to the desktop image and template images.
Throw away the original desktop image and templates, you won't need them anymore cause we'll be using the edge-detected images
For each template
Do template matching as you normally would
Threshold the maximum of the result. If it's above the threshold, you have a match at that position. Otherwise, no match.
If your icons are aligned in a grid on the desktop, you may be able to speed up your processing by only checking those specific grid positions.
EDIT
You can also save a lot of time by knowing which icons to search for. If you have access to the file system, then just look for *.lnk files (or any other extensions you may be interested in) in the directory that corresponds to the desktop (can't remember exactly what it is, but for Windows7 it's something like c:\users\misha\desktop). That will tell you what icons are there on the desktop. This will allow you to shorten your template candidate list before you go and do the template matching.
I like misha's answer and I think it should work for you. But it that doesn't work you could try replacing the transparant pixels in your reference logo with uniformly distributed random noise before trying the match. This will make the transparant pixels irrelevant for any matching computation because they will match just as bad no matter what there is on the desktop in those pixels.
I'm not familiar with the tools you're using, but I'm guessing you have to either:
a) Tell your program to ignore transparent pixels in the icon images during the comparison operation.
OR
b) Tell your program to treat transparent pixels in the icon images as "wildcards" which can be any color.
At which level in Firefox the active zone around active areas (text and image hyperlinks) is defined ? I would like to experiment ways to extend them to ease the use of touchscreens for the web...
After discussions with some Mozilla folks, I tried to implement a solution using javascript with a Greasemonkey script available at http://www.splitted-desktop.com/~flepied/touchscreen/touchscreen.user.js. It tries to find the nearest link when you click on something that is not active.
The only way I know of is via the CSS property padding.
This is mostly not browser-specific, but determined by the layout information (in html or css). Basically, the area that the "link" element occupies is the clickable area. If you need a larger area, you have to make the element larger .. increase the text that is clickable, increase the font-size, increase padding (which might look strange).
I'm developing a Vista/Win7 Desktop Gadget that uses a translucent g:background (doc) area with g:text (doc) on top. I'm adding the text via addTextObject (doc), and this all works as expected.
However, I can't figure out how to set that text to bold style. There doesn't seem to be a way to do this directly via the exposed properties that I can see, and I can't use regular text + CSS in this case due to the fact this text is placed onto a g:background object.
I have also tried specifying a bold font directly, such as Arial Bold (doesn't work) instead of Arial (works).
So how can this be done?
Edit: I have tried setting font-weight:bold for both the body and the g:background object that parents my text; no luck.
See Flip Calendar, by Jonathan Abbott. His code is usually well commented so maybe you can get some ideas from that.
EDIT
The source of my information was from the early days of Vista Beta 2 where that was the official word from MS. I also found the following response to a thread on the MSDN forums regarding the Flip Calendar gadget itself:
http://social.msdn.microsoft.com/Forums/en-US/sidebargadfetdevelopment/thread/841e9d5e-32e9-453f-bd0e-dc5a4e607c33/
The gadget has options for setting bold font on the day of the month (a g:text object) but on closer inspection it doesn't work. Sorry about that. The MS guys have been known to be wrong as well on one or more occasions. I can honestly say that I don't use the g:text object.
This means your only (well, non activex route) option is VML text, which provides a lot of flexibility on layout. However, you will have to place it on a fully opaque area of the gadget which is probably why you wanted to use the addTextObject in the first place. Gary Beene's site really helped me out when I was getting started, but it doesn't go into any detail on the v:textbox element and the v:textpath element, though the MSDN documentation goes into enough detail on these.
If you need to place the text on a non-fully opaque area of the gadget, then you could still go the VML route and place an image behind the text that acts as a shadow, starting out fully opaque and fading to fully transparent. This is how Microsoft does text in window title bars with aero enabled.
Alternatively, you could create an ActiveXObject that draws the text you need in the font you want and saves the image to a temporary file in the gadget folder. Then you set that to the src of an addImageObject. I've done something similar in a gadget and it's fast enough not to be noticeable. You can also set min/max dimensions so shrinking/stretching to fit becomes a breeze.