I'm having a difficult time doing this probably because I'm not sure what to even call it. But a client wants me to put a small number one in some text at the end of a sentence - wich indicates that they should find the small 1 at the bottom of the page to read more details about that particular sentence. You see this type of thing a lot on container and supplement labels. Can this be accomplished with html? Please let me know if you need clarification.
Kind of like this except instead of an astrick, a small one:
*These statements have not been evaluated by the Food and Drug Administration. This product is not intended to diagnose, treat, cure or prevent any disease.
You must be looking for superscript.
<p>This is <sub>subscript</sub> text.</p>
<p>This is <sup>superscript</sup> text.</p>
In practice:
This is subscript text.
This is superscript text.
Use the character “¹” U+00B9 SUPERSCRIPT ONE. If you do not know how to enter it in your authoring environment (in Windows, you can usually enter it by Alt 0185), you can use the entity reference ¹.
Unlike <sup>1</sup> (which is what most people would use), this means using a character designed by a typographer to fit the font. The stroke width is correct, and so is the vertical placement. Using sup tends to mess up spacing between lines, among other things.
However, footnote references don’t work that well in HTML documents. Especially if you want to make the reference a link to the footnote itself, a tiny little superscript is very poor usability and accessibility. An expression like “[1]” is much better.
Well I think this problem has to do with citation-referencing a resource. You can do the following:
At the end of a sentence you can write the number of the reference(references are located at the bottom of a webpage most of the times) like this-actually is a HTML anchor tag:
The sentence goes here.<sub>1</sub>
Then at the bottom of the screen you can write the reference like this:
<a name="1">The reference details go here.</a>
Related
I'm fixing an old WordPress syntax highlighter plugin (the plugin owner abandoned it), and while fixing the PHP errors was easy, while I'm fixing it, I might as well improve accessibility as well.
My question is regarding the HTML structure for the code. I want to show the number on one side and the code next to it:
I figured the HTML would be something like this:
<section> <!-- Maybe article? -->
<header>
<h1>Sample HTML</h1> <!-- Maybe <h3> would fit my blog posts best -->
<div role="toolbar">toolabar buttons here</div>
</header>
<ol>
<li><span class="sh-r "><div </span><span class="sh-e ">class</span>=<span class="sh-s ">"grid"</span><span class="sh-r ">></span>
...
</ol>
</section>
But I'm not sure. Should the code be in an <ol> or a <table>? Are the spans for changing the color ok? Is the toolbar role appropriate? Am I missing something? If anyone has an example of an accessible code highlighter, I'd love to see it.
The way it is right now, it's a table with all numbers in one <td> and all the code in another!
Should the code be in an <ol> or a <table>?
I would say that <ol> is more appropriate than <table>.
Using a table here looks a bit like presentational purpose only. I wouldn't call a table with line numbers on the left and code lines on the right exactly a data table.
Are the spans for changing the color ok?
As as default and because you can't do better in HTML anyway, I would say yes, it's fine.
IF HTML has more specific elements to semantically indicate keywords, blocks, numbers, strings, variables, etc. then you would be strongly recommanded to use them instead of spans.
But there aren't really such specific elements, except maybe <var, <kbd> and/or <samp>; but their semantic signification has never been very clear.
However, as a higher level, you should be using <code> or <pre> to enclose the whole code, to mark it as such.
The problem is that, if you use those two elements, you can no longer use <ol> or <table>.
Perhaps the most acceptable compromise would be <ol><li><code>One line of code</code></li>...</ol>.
In any case, for specific things like marking keywords inside the line of code, you don't have another better choice than <span> in what HTML has to offer.
Is the toolbar role appropriate?
Given that you haven't given the code inside the div, it's a bit difficult to answer.
Normally, a toolbar should contain a set of buttons or occasionally other controls like dropdown menus, and in principle nothig else then that.
If the content of that div corresponds to this simple definition, yes, the toolbar is appropriate. Otherwise, no.
Not that it isn't very worth it to use the toolbar role for less than 3 buttons
As I can imagine here, this div contains only a single button to copy the code in clipboard. If it's indeed the case, then by the definition above, it isn't very appropriate.
I'm having a bit of trouble styling some text that is being gathered from a database. Is there a quick way of stylizing the article content inside?
This is where I have it being pulled from the database
<div class="col-4 col-fright">
<h1 class="article_title"><?=$this->article->name?></h1>
<?=$this->article->content?>
<?if(count($this->siblings) > 0){?>
<hr>
<strong>You may also be interested in these articles:</strong><br>
<?foreach($this->siblings as $s){?>
<?=$s->name?><br>
<?}?>
<?}?>
</div>
I figured I could just throw a span class around the article content but that would apply the style to all the text.
Here's an example of what the text may look like when I pull it
The title looks fine since I was able to put it into a tag, but everything else is needs work.
I can't think of a quick way. I suppose you could start by looking for the first occurrence of "[more]" and either removing it or properly formatting the content to show the rest of the article once [more] is clicked.
There's not much you can do unless you are reasonably confident about the structure of your source. For example, applying some logic like "if the number of works on a line are fewer than 7 and contain no periods, wrap it in tags" would produce sub-headers in this example, but might break in others that have unpredictable content.
It seems as though you're looking for artificial intelligence to format your document.
How do I put two spaces after every full stop in a paragraph using CSS?
Ah, the old "two-spaces-after-a-period" meme rears its ugly head again.
Two spaces after a period is something that pertains to the typewriter world, or the monospaced font world. We moved beyond it long ago, starting with TeX or even before. The point is not to have one or two space characters after a period, but to have a pleasing amount of space there. Algorithms like TeX go to great length to do so. The algorithms in modern web browsers are still primitive by comparison, but are starting to do better. Consider the following:
You'll see that the space after the period is (slightly) greater than the inter-word space, as it should be.
What about the case of justification? You'd hope the browser would put the extra space between sentences, in preference to putting it between words. And that's what happens:
Anyway, so you want more fine-grained control, to realize your own typographical vision on your web pages. The following has four characters between the sentences:
You could also use spaces of different widths from Unicode to get just the amount of space you want (see Wikipedia article).
So is there any way to do this automatically? CSS has a word-spacing property, but no sentence-spacing property (actually, it's not that easy to figure out what a "sentence" is, even in English, and less so in other languages). Of course, putting more spaces in your HTML is not going to do a thing, since HTML treats any run of white space as a single space. So you're going to have to write some code, or find a plug-in, which traverses the text in your page and inserts markup. Or, add a plug-in or something to your CMS to spit out code which is marked up appropriately. Your alternatives for doing so are:
Add or a combination of different-width Unicode spaces.
As another poster suggested, use span tags with margin.
As a variant on the above, use a <span class="sentence"> element, with a CSS rules like .sentence::after { content: "\2002"; }, where 2002 is the "en-space". This results in:
However, the bottom line is that the web is not a typographical environment, notwithstanding the many worthy efforts to nudge it in that direction. Depending on your goals, you might consider creating your documents in a high-end document preparation environment, and publishing them as PDFs, for example.
The two spaces concept after a sentence is not "ugly" - in fact, it's just the opposite. Because of modern font kerning as well as the variety of fonts that Web browsers now support, it's sometimes very difficult to determine if a sentence has ended or if there is simply a word that is abbreviated that requires a period, not to mention a look of constant run-on. With 'fat' letters beginning a sentence, such as an upper-case "W", it can appear as though there is actually no space at all. Adding an additional space after a sentence provides readers with clear breaks. However, I get it that it would be quite difficult to create CSS that could "understand" what a sentence is so that it would automatically insert an additional space after each.
You could put your full stop in a span-tag and give it some CSS attributes, like "margin-right: 5px;", if it's only the appearance you are looking for.
Can only be done if you put your full stop to a tag, like <span>. For example :
www<span>.</span>google<span>.</span>com
Then the css is :
span:after{
content : " "; /*two spaces*/
}
I have a website that displays in two languages - english and farsi. The title of a list item can be in both languages mixed at the same time. All ok until here as far as you have text only it will render ok using direction:rtl in css.
But the catch is that I can also have a number inside or at the end of title (which in farsi is written and read same as in english - left to right). This ends up with a problem since no matter where I put that number it will mess up the words order in the title (the number is an ad ID at the end of the title).
To solve this issue I use &rlm and &lrm infront of the id - but the catch is that I have to switch this two according which language is choosen.
My correct html is as this ( is what fixes the id number issue in farsi):
<h3>
The name of my خدمات باشد is long
<span style="color:#999;">#89798798</span>
</h3>
JS FIDDLE: http://jsfiddle.net/WzF2D/
I tried setting direction:ltr on the span wrapping around ID but it still won't work. I also tried to use unicode-bidi:embed on h3 but also no go.
How can I solve this by using css only without having to rely on ?
I will assume that the desired rendering uses overall right-to-left writing, even though the text (at least in the example) is mainly English, with some words in Arabic letters inside the sentence. Moreover, I assume that expressions like “#89798798” are to be treated as separate fragments, so that when it appears after an English word, it is not considered as part of English text but set to the left of it, in RTL layout.
Under these (rather astonishing) premises, the CSS solution is to make such a fragment a bidirectionality isolate:
<span style="color:#999; unicode-bidi: embed">#89798798</span>
if I'm already having person name under/over image then should i use same name in ALT text?
alt text http://easycaptures.com/fs/uploaded/227/6990285751.jpg
<p><img width="125" height="157" alt="George Washington"
src="media/gw.jpg"><span>George Washington</span><p>
<p><span>George Washington</span>
<img width="125" height="157" alt="George Washington" src="media/gw.jpg"><p>
Should i repeat <span> in alt in both condition ? image has no link.
Yes.
ALT Text is important for screen readers and such. Text 'nearby' to an image doesn't have much meaning to these programs.
Some more information from W3C on the subject.
No ... and yes!
No, I my opinion you should not just repeat the text.
However, you should see the ALT attribute as an opportunity to provide a (short) description of the image, e.g. "Portrait of George Washington, oil on canvas, circa 1790".
It this case the image does not only serve as page formatting. Instead, it is an information-carrying element. Users who cannot see the information (e.g. screen readers) should at least have a chance to know what they're missing.
No. Duplicate content is unhelpful. If an image merely illustrates something which already exists in the normal text content, it should have a blank alt attribute
As a useful test, use the Lynx browser to look at the page. If it looks stupid, the alt text is wrong.
Here is how it renders if you duplicate the alt text (copy/pasted from your example):
George Washington George Washington
No. Alt Text is shown as an alternative for the image when it cannot be shown.
Here is an extract from the specification that is quite straight forward:
Do not specify irrelevant alternate text when including images intended
to format a page, for instance,
alt=”red ball” would be inappropriate
for an image that adds a red ball for
decorating a heading or paragraph. In
such cases, the alternate text should
be the empty string (”"). Authors are
in any case advised to avoid using
images to format pages; style sheets
should be used instead.
Do not specify meaningless alternate text (e.g., “dummy
text”). Not only will this
frustrate users, it will slow down
user agents that must convert text
to speech or braille output. play
terminals, users whose browsers
don’t support forms, visually
impaired users, those who use
speech synthesizers, those who have
configured their graphical user
agents not to display images, etc.
So it says pretty clear not to repeat. "Red Ball" in the first case can be replaced by "George Washington".
Here is a good article how to use the alt-attribute properly: Alt attributes
EDIT:
Ok i think i got misunderstood. I did not say that he mustn't use an alt-attribute here.
We are talkin about screen readers and accessibilty here, right? I agree the image is important to us. But is it to blind people? Or is it just decoration for the text?
Remember the question was wether to repeat the name in the alt attribute. And i say "No". When images are not shown, the alt-text is displayed. I'd propably do it this way:
<p><img src="george.jpg" alt="Image of " />George Washington</p>
The alt-Attribute is the alternative for when the image is not shown and not a description (we have description for this).
Wouldn't hurt -- otherwise the screenreader user might be left to wonder if the image is in fact that of the person whose name comes next.
This info pertains to Jaws for windows but probably applys to other screen readers as well. Always put information in an alt tag. How jaws recognizes graphics is fairly customizable, you can have only graphics with alt tags spoken, graphics recognized by mouse over, title attribute, etc. In general with the default configuration alt tags will be spoken and any other information will be ignored. If an alt tag isn't available then the screen reader will do it's best to read the graphic but this is problamatic.
I am going for alt="" here.
Please check this article that provide a very nice examples:
http://webaim.org/techniques/alttext/
Quoting from that article:
The alt attribute should typically:
Be accurate and equivalent in presenting the same content and function of the image.
Be succinct. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as succinctly as is appropriate. Typically no more than a few words are necessary, though rarely a short sentence or two may be appropriate.
NOT be redundant or provide the same information as text within the context of the image.
NOT use the phrases "image of ..." or "graphic of ..." to describe the image. It usually apparent to the user that it is an image. And if the image is conveying content, it is typically not necessary that the user know that it is an image that is conveying the content, as opposed to text. If the fact that an image is a photograph or illustration, etc. is important content, it may be useful to include this in alternative text.