I need to know if it's possible to load text from a TXT file with the CSS "content" attribute? I searched around and didn't find anything.
I have the following CSS:
.custom div.ot-loginPageCopyright::after {
content: url('copyright.txt');
text-indent: 0;
display: block;
line-height: initial;
}
The browser does request and download the .txt file, but nothing is displayed. It will display the text when it is a string literal in the CSS, but I was hoping to have some copyright information stored separately from the CSS in a text file, in case it needs to be updated, you could just update the text file without touching the CSS.
Note: I know how to do this via JS, but this has to be done via CSS, as no changes can be made to the HTML or JS. So please: no comments suggesting that this should be done in some other way except CSS (if it's possible).
Thanks!
Thanks for the comment #rawnewdlz! I saw the hack for using a SVG, but I was wondering if it was at all possible feeding in a text file into the content, which is not possible.
This is one I have not had to tackle before. I need to use alt tags on all images in a site including those used by CSS background-image attribute.
There is no CSS property like this as far as I know, so what is the best way to do this please?
Background images sure can present data! In fact, this is often recommended where presenting visual icons is more compact and user-friendly than an equivalent list of text blurbs. Any use of image sprites can benefit from this approach.
It is quite common for hotel listings icons to display amenities. Imagine a page which listed 50 hotel and each hotel had 10 amenities. A CSS Sprite would be perfect for this sort of thing -- better user experience because it's faster. But how do you implement ALT tags for these images? Example site.
The answer is that they don't use alt text at all, but instead use the title attribute on the containing div.
HTML
<div class="hotwire-fitness" title="Fitness Centre"></div>
CSS
.hotwire-fitness {
float: left;
margin-right: 5px;
background: url(/prostyle/images/new_amenities.png) -71px 0;
width: 21px;
height: 21px;
}
According to the W3C (see links above), the title attribute serves much of the same purpose as the alt attribute
Title
Values of the title attribute may be rendered by user agents in a variety of ways. For instance, visual browsers frequently display the title as a "tool tip" (a short message that appears when the pointing device pauses over an object). Audio user agents may speak the title information in a similar context. For example, setting the attribute on a link allows user agents (visual and non-visual) to tell users about the nature of the linked resource:
alt
The alt attribute is defined in a set of tags (namely, img, area and optionally for input and applet) to allow you to provide a text equivalent for the object.
A text equivalent brings the following benefits to your website and its visitors in the following common situations:
nowadays, Web browsers are available in a very wide variety of platforms with very different capacities; some cannot display images at all or only a restricted set of type of images; some can be configured to not load images. If your code has the alt attribute set in its images, most of these browsers will display the description you gave instead of the images
some of your visitors cannot see images, be they blind, color-blind, low-sighted; the alt attribute is of great help for those people that can rely on it to have a good idea of what's on your page
search engine bots belong to the two above categories: if you want your website to be indexed as well as it deserves, use the alt attribute to make sure that they won't miss important sections of your pages.
In this Yahoo Developer Network (archived link) article it is suggested that if you absolutely must use a background-image instead of img element and alt attribute, use ARIA attributes as follows:
<div role="img" aria-label="adorable puppy playing on the grass">
...
</div>
The use case in the article describes how Flickr chose to use background images because performance was greatly improved on mobile devices.
I think you should read this post by Christian Heilmann. He explains that background images are ONLY for aesthetics and should not be used to present data, and are therefore exempt from the rule that every image should have alternate-text.
Excerpt (emphasis mine):
CSS background images which are by definition only of aesthetic value
– not visual content of the document itself. If you need to put an
image in the page that has meaning then use an IMG element and give it
an alternative text in the alt attribute.
I agree with him.
As mentioned in other answers, there is no (supported) alt attribute for a div tag only for the img tag.
The real question is why you need to add the alt attribute to all background images for the site? Based on this answer, it will help you determine which route to take in your approach.
Visual/Textual: If you are simply attempting to add a textual fall back for the user if the image fails to load, simply use the title attribute. Most browsers will provide a visual tool tip(message box) when a user hovers over the image, and if the image is not loaded for whatever reason, it behaves the same as an alt attribute presenting text when image fails. This technique still allows for the site to speed up load times by keeping images set to backgrounds.
Screen Readers: The middle of the road option, this varies because technically keeping your images as backgrounds and using the title attribute approach should work as hinted above, "Audio user agents may speak the title information in a similar context." However this is not guaranteed to work in all cases, including some readers may ignore it all together. If you end up opting for this approach, you can also try adding in aria-labels to help ensure screen readers pick these up.
SEO/Search Engines: Here is the big one, if you were like me, you added your background images, all was good. Then months later the customer(or maybe yourself) realized that you are missing out on some prime SEO gold by not having alt's for your images. Keep in mind, the title attribute does not have any weight on search engines, from my research and as mentioned in an article here: https://www.searchenginejournal.com/how-to-use-link-title-attribute-correctly/. So if you are aiming for SEO, then you will need to have an img tag with the alt attribute. One possible approach is to just load very small actual images on the site with alt attributes, this way you get all the SEO and don't have to readjust the existing CSS in place. However this may lead to additional load time depending on the size and google does indeed look at the images path when indexing. In short if you are going this route, just accept what has to be done and include the actual images instead of using backgrounds.
The general belief is that you shouldn't be using background images for things with meaningful semantic value so there isn't really a proper way to store alt data with those images. The important question is what are you going to be doing with that alt data? Do you want it to display if the images don't load? Do you need it for some programmatic function on the page? You could store the data arbitrarily using made up css properties that have no meaning (might cause errors?) OR by adding in hidden images that have the image and the alt tag, and then when you need a background images alt you can compare the image paths and then handle the data however you want using some custom script to simulate what you need. There's no way I know of to make the browser automatically handle some sort of alt attribute for background images though.
This article from W3C tells you what they think you should do
https://www.w3.org/WAI/GL/wiki/ARIATechnique_usingImgRole_with_aria-label_forCSS-backgroundImage
and has examples here
http://mars.dequecloud.com/demo/ImgRole.htm
among which
<a href="http://www.facebook.com">
<span class="fb_logo" role="img" aria-label="Connect via Facebook">
</span>
</a>
Still, if, like in the above example, the element containing the background image is just an empty container, I personally prefer to put the text in there and hide it using CSS; right where you show the image instead:
<a href="http://www.facebook.com"><span class="fb_logo">
Connect via Facebook
</span></a>
.fb_logo {
height: 37px; width: 37px;
background-image: url('../gfx/logo-facebook.svg');
color:transparent; overflow:hidden; /* hide the text */
}
The classical way to achieve this is to put the text into the div and use an image replacement technique.
<div class"ir background-image">Your alt text</div>
with background-image beeing the class where you assign the background image and ir could be HTML5boilerplates image replacement class, below:
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Image replacement
*/
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}
Here's my solution for Immediate fix:
Once the background image is removed the alt text will be visible from Img tag.
.alt-image {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.background-image{
background:url("https://www.w3schools.com/images/picture.jpg") no-repeat;
width:100%;
height:500px;
position:relative;
}
<div role="img" aria-label="place alt text here" title="place alt text here" class="background-image">
<img src="" alt="place alt text here" class="alt-image"/>
</div>
Here's my solution to this type of problem:
Create a new class in CSS and position off screen. Then put your alt text in HTML right before the property that calls your background image. Can be any tag, H1, H2, p, etc.
CSS
<style type="text/css">
.offleft {
margin-left: -9000px;
position: absolute;
}
</style>
HTML
<h1 class="offleft">put your alt text here</h1>
<div class or id that calls your bg image> </div>
It''s not clear to me what you want.
If you want a CSS property to render the alt attribute value, then perhaps you're looking for the CSS attribute function for example:
IMG:before { content: attr(alt) }
If you want to put the alt attribute on a background image, then ... that's odd because the alt attribute is an HTML attribute whereas the background image is a CSS property. If you want to use the HTML alt attribute then I think you'd need a corresponding HTML element to put it in.
Why do you "need to use alt tags on background images": is this for a semantic reason or for some visual-effect reason (and if so, then what effect or what reason)?
You can achieve this by putting the alt tag in the div were your image will appear.
Example:
<div id="yourImage" alt="nameOfImage"></div>
I want to change the beam looking I thing that appears when you hover over text. However, I've only been able to change the pointer cursor. Is this possible in CSS?
Edit: I wanna change the way the text version of the cursor looks like. Instead of being the I beam, I want it to be a custom image. Is this possible?
you need to use css to style the cursor with " cursor: someStyleName "
ex that makes it a crosshair:
span.myclass {
cursor: crosshair;
}
this link shows a use (in html, but the code is the same in css) and a demo of what it looks like, as well as many of the different style types:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor
ps: this site in general is great for web dev info.. even java/jquery stuff.
I copied CSS code for bs-example from the Bootstrap 3.0.3 docs site. I'm kind of a beginner with CSS, so if anyone could explain me this I would be thankful.
The following code:
/* Echo out a label for the example */
.bs-example:after {
content: "Example";
position: absolute;
top: 15px;
left: 15px;
font-size: 12px;
font-weight: bold;
color: #bbb;
text-transform: uppercase;
letter-spacing: 1px;
}
It works as expected,
but I would like the title, EXAMPLE, can be changeable. I would like to use a tag like let's say <zd></zd>.
Thanks in advance.
Prior to writing this answer, I didn't realise that editing Pseudo Elements (::after) with JavaScript was a little trickier. Although with this question/answer on StackOverflow made it relatively easy with JavaScript.
The concept was still the same, upon Page load the browser renders what is stated on the Style sheet, there after you must use JavaScript to manipulate it's contents to render something different.
Hence the CSS looks at the attr(data-content), which means it'll look for the data-content attribute within the HTML.
.bs-docs-example::after {
content: attr(data-content);
}
This looks for the data-content="":
<div class="bs-docs-example" data-content="Example Header">
Which renders:
To change it there after, all you have to do is change it's data-content attribute with JavaScript, in the demo I use jQuery to quickly select the DOM element and adjust it's data-content attribute.
$('.bs-docs-example').attr('data-content', "New Header Title" );
Demo Fiddle: http://jsfiddle.net/u2D4M/
If you wanted to do this without jQuery:
<script>
var getHeader = document.getElementById('bs-header');
getHeader.attributes["data-content"].value = "Hi, New Title";
</script>
Demo Fiddle: http://jsfiddle.net/9wxwxd4s/
The :after selector Insert content after every .bs-example class.
Here, the Word Example will be added after every .bs-example.
[please refer this link]http://www.w3schools.com/cssref/sel_after.asp
Instead of using content:"Example", you can edit your titles in html and assign the same class to all titles. header tags are preferred. ie., You should definitely create a new custom stylsheet and override the classes you want to modify. This is a way you can always go back to the default styling provide by bootstrap.
This is a simple and easy step followed by all web developers as per W3C std.
Still you want to change title by code, you can get help from jQuery or JS.
Tip from Christofer Eliasson: If you want to redesign your page, you can just exchange your custom stylesheet with a new one. Instead of getting a completely new bootstrap file to be able to start over. Also, if you just want to go back to the default styling on just a few elements, it would be a mess to remember what changes you have made. So, write your custom css code in a separate stylesheet.
Is it possible to place an image inside of a heading using Restructured Text?
Something like:
Introduction .. image:: path/to/img.png
---------------------------------------
This renders as text, i.e. the image syntax is not parsed. I have not seen any examples of this leading me to believe it might not be possible, but perhaps someone has a work-around.
I intend to output to HTML (so a modification to the derived CSS is possible, though I would prefer to alter the RST source. This is because I also intend to output to pdf (latex).
I think that a better result could be achieved using aliases (i.e. substitutions).
Here an extract from the documentation that can be helpful:
The |biohazard| symbol must be used on containers used to
dispose of medical waste.
.. |biohazard| image:: biohazard.png
I hope this helps
This can be achieved by using a substitution in the header:
Header Text |foo|
=================
.. |foo| image:: path/to/img.png
Here foo is just an example substitution text. It can be anything, but should not start or end with a whitespace.
The abstract substitution syntax is as follows:
+-------+-----------------------------------------------------+
| ".. " | "|" substitution text "| " directive type "::" data |
+-------+ directive block |
| |
+-----------------------------------------------------+
As we would like to insert an inline image, we should choose the image as the directive type.
With HTML and CSS there are a number of ways to add an image to an element which yield different results. A couple that I can think of are:
Use an image in place of any text. Here we keep the text, but send it off screen, so it is still accessible.
h1 {
background: url(images/image.jpg) no-repeat top center;
display: block;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
width: XXpx;
height: XXpx;
}
Place an image to the left of the text (or could easily be to the right)
h1 {
background: url(images/image.jpg) no-repeat top left;
padding-left: XXpx;
}
Use a background image, behind any text
h1 {
background:url(images/image.jpg) no-repeat top center;
}
More specific CSS selectors can be used to target only certain headers.
You can include custom CSS easily within reStructuredText documents using the raw directive, like so:
.. raw:: html
<style>
<!-- One of the CSS styles above. -->
</style>
Alternatively, you can include custom CSS stylesheets from the command line using the --stylesheet option of rst2html.py.
In terms of achieving the same with PDF output, I will steal part of another one of my answers:
Obviously the above targets HTML output. However, I have not used rst2pdf, so can't comment on how the above needs to be modified to work with this program. Hopefully someone else will provide an answer to this. As far as I know, rst2pdf does support a cascading stylesheet mechanism, so it should be straightforward (for someone who knows rst2pdf style sheet syntax) to add an additional .. raw:: pdf role and to modify the above list styles.