What is the maximum number of characters that a same-page anchor tag link can be on all mainstream platform browsers released from IE6 on up?
For instance, a link like:
http://example.com/#a789c4d8ecb0ec2201444bfa64b04696aa2bbaa41eb331535d1dd6d219558a02968d5af97ae74359973163337ef9b09c65dd70d40c3c79a4169355ea92db45e21fe30550dce4987987237652a347b97759f2753b412ee50d4121d0f6382580b5a62d1e02921c39c252c5e4731e38fc295ad6abcb22613513c4fd7599ab10d3f9c970b9eb3ddf5b2cf233af25005298590ce798b28092cecdc6756c8205e9a0650826e42a184267d0bfb5e3d7b3d1c25e324fe6329cf7681ffae7c01c86d4a70
Note the # symbol above.
Note I'm using XHTML transitional, if that matters any.
The better question is "how long can my url be?"
Unfortunately, we must build to the weakest link, internet explorer, which limits the url to about 2000 characters.
So, the max length you can use on an anchor tag would be:
length of anchor = 2000 - (size of url)
Related
When looking at the elements of a page that I am analyzing using Chrome DevTools, I am seeing the following weird display:
What is that "(1)" in the end? Since the source is user agent stylesheet, I can't drill down any further.
In the Elements panel, I see similar weirdness:
I thought parentheses were not permitted in CSS selector names. What is the "primaryNavId:(primaryLi1)" being used above?
UPDATE:
A more detailed screencap of the "inherited from" line (Styles pane):
When I click on the "inherited from" line, I get the following in the Styles pane:
UPDATE 2 - FIREFOX INSPECT:
Firefox displays the same information in the Elements pane for the item in question, but the Styles panel shows it differently, as follows:
What a mess. Now I understand why you tagged your original question (and this one) css-selectors.
To start, browser developer tools naïvely assume that classes and IDs don't contain any special CSS selector characters and can therefore be represented in CSS selector notation without any escape sequences. So what you get is something that looks like a selector, but on closer inspection is actually malformed. You can see evidence of this in pretty much every browser's developer tools. The breadcrumb navigation, for example, in every one of them will list the li element as li followed by a period (for a class selector) followed by the class name without any escape sequences. Evidently the same appears to hold true for IDs.
It would seem that Google Chrome uses this same notation for "Inherited from" labels. Firefox is smart enough to only list the element's element type (which is far more predictable), i.e. "Inherited from li", and display the actual style rule and the actual selector from the source CSS, but its breadcrumb navigation suffers from the same problem making it kind of moot.
What you're looking at in the element inspector, however, is not a selector. It's an HTML class attribute. The syntactic rules are completely different. And that's why I said that this answer of mine that you previously linked to was completely irrelevant to your original question. But I can see why you're confused, seeing as HTML and CSS are closely related and CSS has dedicated class and ID selectors. (I suspect there wouldn't be any confusion if we were forced to use quoted attribute selectors for all attributes from the beginning — but attribute selectors weren't even around until CSS2.)
As to why the class name that's reflected in the Styles pane is different from the one that's reflected in the element inspector, the reason for that is not clear. Either you're inspecting different elements altogether, or something else is at play (and judging by the cryptic-looking class names, it may well be some funky client-side scripting framework voodoo magic).
I generate web-page by Razor and sometimes browser show me question marks instead of one random unicode character.
For example:
I think, this question mark is displayed in place where the first byte of two-byte unicode character is in the one tcp-package and the second byte of character in the other tcp-package. But why browser does't paste them correctly?
All files encoded by utf-8. There is <meta charset="utf-8">.
Update
Question marks dependent on page content. If I change content before question mark, it may disappear or move to other place (replace other character)
Encoding the characters in UTF-8 encoding scheme is not the only thing you should consider while working with encodings. Font family also plays a great role in this thing for rendering the correct graphics for all of your characters; characters are after all just glyph drawn by graphics. Unicode takes care of all of the bytes (1, 2, 3, 4 which ever size) of your characters and shows the correct character on your screen; if your framework or font-family supports the glyph.
In your website, the font-family; probably a custom loaded, does not support this character, (or the code page to be more specific) that is why browser has to fall-back to display a question mark. You're also saying that the character is randomly chosen, so that defines the problem, for being a font-family based problem. I would advise that you try out your application in 'Segoe UI' font-family and see if that works; because that probably would work.
Apart from my suggestion, please make sure that the font-family does support that code page where this character exists. Otherwise, it will display a question mark.
On those Windows machines with Skype installed, it tends to convert all phone-formatted numbers to Skype links so you can click it in order to make a call on Skype.
The question is how do you prevent that to happen for a certain number on page?
Try not outputting the numbers as a single piece of text. Instead of
<span>888-555-1212</span>
try
<span>888-</span><span>555-1212</span>
and it will disable skype
Update
This answer is no longer accurate - see Daniel Byrne's answer for more information.
Using CSS only, it can be removed by overriding the styles used by Skype. Try adding these two lines to your stylesheet:
span.skype_pnh_container {display:none !important;}
span.skype_pnh_print_container {display:inline !important;}
Skype has taken to adding a randomly generated string of numbers to the end of their span tag, so the above response from Groo is not entirely accurate anymore. To correctly select all Skype tags on a page, use CSS3 wildcard selectors like such :
span[class^='skype_pnh_container'] {display:none !important;}
span[class^='skype_pnh_print_container'] {display:inline !important;}
the ^= operator causes an attribute selector to mach elements that have an class containing a value that STARTS WITH 'skype_pnh_container' and 'skype_pnh_print_container'
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />
The official solution is to add the following meta tag to the head section of your webpage. This will prevent skype from doing any reformatting on phone numbers.
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />
This is a vendor-specific tag. See Skype Toolbar meta tag
EDIT: Sorry, I just discovered that IE9 has issues with this solution as it does not support soft hyphens.
There is an alternative solution to this problem:
You can use a soft-hyphen character () inside the phone number to address the issue. For example, given the number
<span>0664 111 222 3</span>
change to
<span>0664 111 222 3</span>
and be happy :)
I just found that if you use the new HTML5 tel protocol it blocks the Skype junk from appearing:
1 800 123 4567
I saw over the interweb a lot of possible solutions javascript solutions, meta tags, css and maybe I found an hack actually working for my websites, I tested on some computers and it work and I think it will work until skype don't change something in their code.
I was looking what is the skype exactly doing on our pages, and it creates some span around the phone numbers, as you already said, but it even add an tag at the end of the document, just after the body closed tag.
And here I saw the trick! Just before that object there is a configuration tag:
<span id="skype_highlighting_settings" display="none" autoextractnumbers="1"></span>
This is added dynamically by the plugin! but here the solution become obvious, to finalle stop skype messing with your design and avoid changing phone number the solution is to insert very early in the document the following tag:
<span id="skype_highlighting_settings" display="none" autoextractnumbers="0"></span>
notice the autoextractnumbers="0", here is the trick. The document will not validate anyway with that tag because there is no attribute "autoextractnumbers" but i noticed that it works even if commented:
<!-- <span id="skype_highlighting_settings" display="none" autoextractnumbers="0"></span> -->
And that's it! Enjoy your webpages free from messy plugins! And your web page will still validate correctly. Hope it works for you too! I have tested on a couple of computer 3 different browsers and 2 different skype versions, for now it works for me, let me know if it works for you too and if it works share it :)
I added a space in the first term of the number.
Instead of (888) 222-3333 I entered ( 888 ) 222-3333
Granted: may look weird, but it works and it is simple.
I added a hyphen in a span before the number and then set display:none on the span style, which worked.
<span class="anti-skype-hyphen">-<span>01273 200 ***
All you need to do is insure your CSS selector is more specific than the selector Skype uses. In the current skype style sheet they use:
span.skype_pnh_container span.skype_pnh_highlighting_inactive_common span.skype_pnh_text_span {...}
You will need to add an extra class — your own website context — to this selector, i.e.
.myclass span.skype_pnh_container span.skype_pnh_highlighting_inactive_common span.skype_pnh_text_span {...}
Try this. It substitutes spaces in the phone number with an invisible span + the original space char. So skype cannot understand it is a number and our beloved phone number stays the same :) I had to use this approach since I usually let the content administrator change phone numbers at his will therefore I could not use a hard coded number inside javascript. Of course your markup should look like <span class="phone_number">your number with some spaces inside it<span>.
$(document).ready(function() {
if ($(".phone_number").length>0) {
$(".phone_number").each(function() {
$(this).html($(this).html().replace(/\s/g,"<span style=\"display:none\">_</span> "));
});
}
});
You can also leave the number alone and remove it with JS.
jQuery(document).ready(function(){jQuery('.skype_pnh_container').parent().html('(555) 222 - 3333');
jQuery('.skype_pnh_container').remove()}
It is harder to do in normal HTML, but Skype doesn't remove the parent container, so put the number in something with an ID, you can do a "getElementById" on it, set the innerHTML to the phone number.
document.getElementById('phoneNumberContainer').innerHTML='(555) 222 - 4444';
If you are using PhoneGap on iOS this can be a UIWebView issue (separate from Skype).
The following line fixes the problem if you don't want automatic links generated in UIWebView:
self.viewController.webView.dataDetectorTypes = UIDataDetectorTypeNone;
inside AppDelegate.m in -(BOOL)application:(UIApplication*)application didFinishLaunchingWithOptions:(NSDictionary*)launchOptions
I am having problem with css property of text:transform. When I set it to capitalize, it behaves differently in IE7 and IE8. The Product title of page[1] shows apple tree 'Gala' in other browsers while in IE it shows apple tree 'gala' . Note the 'g' letter after quote. I want the 'g' to be capital in both IE and other browsers.
Is there any hack or extra setting I need do, to get it working in IE ?
[1] - http://shop.shootcare.co.uk/pomonafruits/find/apple-tree-gala-apl026?path=&ref=mall
The property text-transform is seriously under-defined in CSS specifications. Its CSS 2.1 definition does not even specify what “word” means. In computer contexts, “word” as a unit of text means just a maximal sequence of non-whitespace characters, so in your case, the string 'gala' with the apostrophes included would be one word, and its first character is the apostrophe. So it could be argued that IE is most right here, but other browsers have adopted other interpretations.
The CSS3 Text draft proposes to change or clarify the meaning so that the first letter (which would really mean “letter or digit”!) would be affected. So this would make the g in 'gaia' capitalized. But it still does not define “word”, e.g. whether “cutting-edge” is two words or one, or how many words there are in “rock’n’roll”.
The conclusion is that almost any method for capitalizing words is more reliable than the CSS way. If possible, modify the software that generates the pages so that it performs the desired operation server-side, according to the rules you prefer. Even using JavaScript is safer than CSS here.
well the capitalize transform works differently on some browsers, for example for some browsers java-script would return Java-Script, some others would just return Java-script.
also keep in mind capitalize doesnt work with the rest of the letters of a word, it only changes the first one, so if you have the word intERNET, it would return IntERNET, leaving the reast as it is.
so my wild guess, is that ie7 & ie8 are taking 'gala' as a word byt making the ' the first character, so they are trying to capitalize a ' returning the same ', im dont know if there is a hack to it, but that might be something to get you started, try using gala instead of 'gala' just to test, and then see if there is a way to ignore the ' while capitalizing.
True or not: We should always use proper capitalization and never put whole sentences in all-uppercase. If we must do so, we should use CSS for this task."
Should we use the CSS property text-transform for other cases if we need them?
(Note that I'm not talking about HTML tags, I’m talking about text content)
Links to read:
http://blog.mauveweb.co.uk/2009/01/14/dont-use-uppercase-in-html/
http://www.webaim.org/techniques/fonts/#caps
Huh? For normal text? That sounds like a ridiculous idea to me. Every language has its rules about what's lowercase and what's uppercase. Why would one want to divert from that?
Update: Sorry Jitendra, I didn't read your update closely. Now this
I head Screen reader spell letter by letter if we use UPPERCASE.
could well be - say, for USA to be spelled like U S A. I could imagine some screen readers do this. But this would only mean not to put words in ALL CAPS - which is a rule you would want to follow anyway.
Having all text in lowercase and uppercasing the right words through text-transform, you would have to put a CSS class on every word that needs to be capitalized - extremely cumbersome, would result in horribleHTML soup, and wouldn't make sense. Just use normal capitalization, and don't use all caps.
You should write content of a page with proper grammar, spelling, and capitalization just as you would in an essay. Navigation and logos should start with an Uppercase (or if it's a name, the proper spelling for the name, e.g. iPhone, not Iphone or IPhone.) Only use CSS capitalization for stylization. So, if you want your site's name to be in all caps (MY WEBSITE) use CSS to make it all caps, but in the HTML make sure it's proper (My Website).
Hope this helps!
It's generally a good idea to concentrate on what's easy for people to read. Almost always, for almost all sorts of information presentation, conventional typographic rules for the language of the site are appropriate, and you should not do anything different without having a really good reason.
The W3C states that all XHTML elements and attribute names should be in lowercase:
XHTML documents must use lower case
for all HTML element and attribute
names. This difference is necessary
because XML is case-sensitive e.g.
<li> and <LI> are different tags.
As for web page content in between tags, of course it is not necessary.
Jaws does not spell out words if they are recognized as English words. FOR EXAMPLE "THIS IS PRONOUNCED NORMALLY." sounds the same as "This is pronounces normally." When dealing with abbreviations capitalization matters. For example "usa" is pronounced phonetically as one syllable. “USA” is pronounced as “u s a” Made up words tend to be pronounced the same regardless of capitalization, for example “FDIOSUF” is pronounced the same as “Fdiosuf”
I'm not talking about HTML TAG i'm talking about text content? I head Screen reader spell letter by letter if we use UPPERCASE.
my question was "Should we always use lowercase text in web page's content?" and use css text-transform for other cases if we need.
Just use natural text, as you did in your SO question. Screen readers will generally read ALL UPPERCASE as individual letters, as such text is generally an acronym (it'll likely vary from reader to reader - some handle things more intelligently than others, and may be able to figure out that a whole sentence isn't likely to be an acronym).
You don't have to lowercase every letter, though - a screen reader shouldn't have any problem with "This Is A Sentence."
UPPERCASE text that isn't an acronym should be done with CSS's text-transform: uppercase;.
It has nothing to do with screen readers. For actual content, you should use normal capitalization. For element names and attributes, you must use lower case if you're using XHTML, because it's case-sensitive and the spec says the tag names and attribute names are lower case. These are two completely different things (content vs.markup).
Edit Re your edited question: You should avoid incorrect use of ALL UPPER CASE TEXT (that would be an example of incorrect use), because screen readers may well spell that out on the theory that it's an acronym like HTML or W3C. But not doing ALL CAPS is not the same as doing all lower case. Use initial capitals at the beginnings of sentences, etc. Don't use ALL CAPS for emphasis, use <em> (or <strong>, depending on the type of emphasis). Doing so marks up your text semantically, which actually helps the screen reader do its job (by allowing it to put emphasis where it should be put).
yes you should, if you would like to modify the text letters use the css property text-transform http://www.quackit.com/css/properties/css_text-transform.cfm