What is preferred method to link PDF(with icon) on a page in terms of semantic, accessibility, usability and SEO?
for example
this is a name of PDF "01ccc5.pdf"
but inside PDF this is the title of
PDF "How to search in long PDF"
Should i use PDF subject as a file
name like "How-to-search-in-long-PDF?
and I want to show link of PDF as a
PDF icon on the page, What is the
best way in terms of accessibility
and usability.
Should i insert pdf icon as a
inside or i should use as a css
background?
Which method is better? this
a{text-indent:-99999px}
<a href="How-to-search-in-long-pdf.pdf" title="PDF, 25KB, Opens in a new window">
How to search in long PDF
<img src=pdf-icon.jpg" alt="How to search in long PDF" />
</a>
or this
a{text-indent:-99999px;background:url(pdf-icon.jpg);width:32px:height:32px}
or this method http://www.askthecssguy.com/2006/12/showing_hyperlink_cues_with_cs_1.html
<a href="How-to-search-in-long-pdf.pdf" title="PDF, 25KB, Opens in a new window">
How to search in long PDF </a>
I have to link multiple PDF
Note:
Title of PDF is also will be available before PDF but without any link
like this:
Title PDF
How to search in long PDF PDF icon (with link of PDF)
How to search in long PDF PDF icon (with link of PDF)
How to search in long PDF PDF icon (with link of PDF)
Easy way to bring pdf or other icon with each link using CSS3:
1. icon through background image -> CSS Code:
a[href$=".pdf"]
{
background:url("your-pdf-image.png") no-repeat left;
padding-left:25px;
}
2. bring icon from FontAwesome -> CSS Code:
a[href$=".pdf"]:before
{
content:"\f1c1 ";
font-family: fontawesome;
}
The last one is the best since everything is in the CSS. However, it doesn't work in IE6- and as much as we would all like this browser to die, it is still well used.
So, I'd use the second one, with a special class (e.g. a.pdf). And if you have multiple links with different file types, use sprites.
Edit: I've just understood why you used a negative text-indent. I'm not sure it will work properly with a background. In that case, I'd probably use an img with an alt text and no text content for the a. I nearly always favor using a text and an image, especially for download links.
Related
I’m trying to implement an app that will combine a text, and an audio of the text being read, with “read-along” functionality: the line of text being read is highlighted. Also, clicking on a specific line, jumps to that position in the audio. I have a program in Angular that can do the “read-along” (each sentence being an object, with info about its position in the audio, displayed as individual ’s one after the other).
Here’s some code.
<p>
<span *ngFor="let sentence of sentences"
[id]="sentence.line"
[ngClass]="{'active': sentence.active}"
[ngClass]="{'inactive': !sentence.active}"
[ngStyle]="(currentTime >= sentence.start_time && currentTime < sentence.end_time)
? playingStyle
: (hoveredID === sentence.line)
? hoveredStyle
: normalStyle"
(mouseover) = "showHovered(sentence.line)"
(mouseout) = "showNormal()"
(click)="sentence.active && play(sentence.start_time)"
[innerHTML]="sentence.text"
>
</span>
</p>
The difficulty I’m having is that the text is to be displayed in a specific position and shape, on top of a background picture, so that it resembles the original book. The text is in Hebrew and needs to be displayed as RTL. (See for example CircularFLO, but I don't have a Mac, or InDesign, and I had trouble using it to display Hebrew RTL)
It seems that the CSS shape-inside has not been implemented, and it needs to be mimicked using shape-outside… I don’t find this practical for my needs.
I have looked at the following, among others:
https://www.html5rocks.com/en/tutorials/shapes/getting-started/#toc-inside-shape
https://css-tricks.com/using-css-to-set-text-inside-a-circle/
https://codepen.io/noahblon/pen/pjvPPN
So: Is there any other option I could look into? I’m willing to try other technologies, and am not limited and stuck to creating a web application. But I do want it to be available to people without a Mac (including myself as the programmer).
Would SVG <tspan> be the way to go?
Thanks!
I'm not sure whether the title is correct But I have a custom png file that I want to apply as an icon in an existing application. Because this is an existing application, I can't make too many changes in order to keep the consistency. The only thing that I have to do is by using icon tag.
<i class="icon name" />
I've tried to create a new class and set the background image.
.new-icon {
background-image: url("./img/icon.png")
}
After that I applied that class in an icon tag like
<i class="new-icon" />
But the image didn't show at all. What I should do?
You can use <img> tag for png files but if you want to create something that you use in <i> you should create your icons as a font file, I suggest you to use <img> tag.
You should design your icon as SVG, then you can make it web fonts from here: https://fontello.com/
You can not use png as an icon.
I add <img src="man/figure/logo.png" align="right" height="138.5"/> in README.md
And also put logo.png into that file. (ps. I design the logo using IDesign)
However, the logo does not shows up in my README file at Github
I wonder whether if my size of logo is too big? (105kb)
I tried to change picture size in IDesign through change the parameter of quality & Resoulution, however if I change it too small, it would be hard to recognise the pattern on the logo.
Or there is something else I need to fix
I use in below way for my avatar image
in the same way, you can also use
Hope I was able to solve your problem
I'm using Material Design Lite tabs (as with the template shown at https://getmdl.io/templates/text-only/index.html). I would like the links to have an icon as with the Github and download link on the MDL site itself: https://getmdl.io
However, on the MDL site they are actually using a navigation bar, so I'm at the moment unsuccessful to repeat this look with the tabs.
The answer is actually quite simple, although the alignment of the icon and the following text seems to be off a bit (icons is a bit too high). You just add a span with the correct classes:
<a href="#download" class="mdl-layout__tab">
<span class="icon material-icons">get_app</span>
<span>Download</span>
</a>
What is the best way to show along with an image a comment form, comments and other image related information with colorbox? Like in facebook's profile photos bar images?
Just opening an image node in colorbox like 'node/196?iframe=true' is much slower than opening an image.
the inline config parameter would be one solution
<style type="text/css">
.hide-colorbox{display:none}
#cboxLoadedContent .hide-colorbox{display:block}
</style>
$(".example8").colorbox({inline:true, href:"#inline_example1"});
<div id="inline_example1" class="hide-colorbox">
<p><strong>This content comes from a hidden element on this page.</strong></p>
</div>
You can either output the required html on page load and then hide with css, or you can create the content based on the page layout.