Does anyone know what is the maximum length I can enter for the html title attribute and whether special characters are allowed?
There is no limit for title length based on the current HTML 4 and 5 specs; but IE explorer has a limit of 512 characters for HTML 4.01.
Other browsers have trouble with long titles (you have to test it yourself each time). Also you may use almost anything, including alphabets, numbers, special chars (symbols) etc. in your title. But avoid Unicode.
Unicode titles creates some trouble. Refer to this Stack Overflow post Unicode HTML titles displaying as boxes in IE, Chrome.
From a comment by #Jukka K. Korpela:
The reason to avoid anything except the most common characters is that title attribute values are rendered, on mouseover, by browser routines that typically use a specific font, with limited character repertoire. There is no formal prohibition, just lousy implementations.
Practically there is no limit to the length.
However beyond certain characters, your browser wont show the whole title.
Special characters are allowed.
There is no limit in the specifications.
But when you go past 64 characters, browsers will treat it differently
Internet Explorer breaks the text to two or more lines
whereas other browsers do not.
Why make a title very long? Short and concise does the trick.
Related
I am a UX designer and we are working on a product where there needs to be a text input field for the user to insert their note. There needs to be a word limit indication, whether they're typing in Traditional Chinese or English.
So my question is:
If the character limit is 15, am I correct to say:
I am in Sweden (11/15 characters)
我在瑞典 (4/15 characters)
I was told that 1 Chinese character counts as 2-byte code and 1 English letter counts as 1-byte. How does this affect the character limit? I want to make sure my design is clear as possible for the developers.
So it’s about display size, right? Counting words won’t be useful in that case because a word can be as long as you want.
Counting characters is marginally more useful, but also doesn’t guarantee that the message will fit in the end because different characters have different widths. Just as an example, these four strings all consist of five characters each:
“”
“ ”
“WWWWW”
“﷽﷽﷽﷽﷽”
There really is no elegant way to solve this. You’d need to know the precise metrics of the font you’re using and then calculate the visual width of each input.
If you’re fine with a “close enough” solution, you can just use the <input> element’s maxlength attribute. HTML and JavaScript count UTF-16 code units, however, which means that characters in the so-called Basic Multilingual Plane count as 1 and everything else counts as 2.
The Basic Multilingual Plane contains 99% of all characters in common, present-day use, so the vast majority of users probably won’t notice anything wrong. You could do something fancier with JavaScript, but I reckon it’s not really necessary for this kind of task.
Just keep in mind that this approach still won’t guarantee that the user’s input will fit visually on the print-out unless you leave a lot of empty room just in case. Definitely play around with some narrow and wide characters to see how much space they really take up when printed.
Is there a HTML character that, on all (major) browsers (plus IE8 sadly) displays nothing and doesn't add any extra space?
So, an alternative to but which doesn't add whitespace to the page, and which won't ever show up as an ugly "unrecognised character" marker or ?.
Why: in my case, I'm trying to work around a problem on an old, proprietary CMS that is removing empty but necessary HTML elements that are required because other parts of the system will fill them dynamically.
Imagine something like (simplified trivial example) <span class="placeholder" data-type="username"></span> which is populated with a user's username if a user is logged in - but this old-school CMS sees it as being empty and removes it.
There seem to be two options that mostly fit the bill. They seem to reliably not show anything when in a <span>, but they (particularly the second option) might have a minor effect on copy/paste and word breaking in some cases.
Zero-width space
aka which behaves the same as the (now in HTML5) <wbr> - used to make words break at certain points without changing the display of the words.
<h1>This text is full<span></span> of spans with char<span></span>acte<span></span>rs that affe<span></span>ct word brea<span></span>king but don't show up</h1>
<h1>Especially in das super<span></span>doupercrazy<span></span>long<span></span>worden.</h1>
Seems to work fine on modern browsers and IE7+ (not tested on IE6).
Soft hyphen
- like a zero-width space but (in theory) adds a hyphen when it breaks a word across a line.
<h1>This text is full<span></span> of spans with char<span></span>acte<span></span>rs that affe<span></span>ct word brea<span></span>king but don't show up</h1>
<h1>Especially in das super<span></span>doupercrazy<span></span>long<span></span>worden.</h1>
<h1>Example where das superdoupercrazylongword contains no spans.</h1>
Fine on modern browsers and IE7+ (not tested on IE6), though as some comments note there are issues with these turning into regular hyphens when copied and pasted, for example, here's how it pastes from Chrome to Notepad, on Windows 8.1:
Within a span, it seems to never add a hyphen (but still better to use zero-width spaces if possible).
Edit: I found an older SO answer discussing these as a solution to a different problem which suggests these are robust except for possible copy/paste quirks.
The only other issue with these I could find in research is that apparently some search engines may treat words containing these as being split (e.g. awesome might match searches for awe and some instead of awesome).
There are two characters that are graphic characters but defined to be zero width: U+200B ZERO WIDTH SPACE and U+FEFF ZERO WIDTH NO-BREAK SPACE. The former acts like a space character, so that it is a separator between words and allows line breaking in formatting, whereas the latter explicitly forbids line breaks. It depends on the purpose and context which one you should use. The can be represented in HTML as and .
There characters work well in most browsing situations. However, in IE 6, they tend to be rendered as small rectangles, since IE 6 does not know these characters and tries to render them as if they were graphic characters (which lack glyphs).
There are also control characters that are allowed in HTML, such as U+200E LEFT-TO-RIGHT MARK and U+200D ZERO WIDTH JOINER. They have no rendering as such, though they may affect rendering of graphic characters, e.g. by setting writing direction, affecting ligature behavior, etc. Due to the possibility of such effects, it might be risky to use them as “dummy” characters.
Trying to get the 1/3 and 1/8 symbols to show on IE 8-9. It shows fine on earlier versions of IE and all other browsers.
Code I'm using:
⅓
¼
IE 9 and older do not recognize the references ⅓ and ⅛ (the latter is obviously what you meant, instead of ¼, which is well supported) but instead render them literally. These references were not defined in HTML 4.01, and they were added to browsers relatively late (around 2011). Use the numeric references instead: ⅓ and ⅛ (or type the characters themselves, using a suitable editor and UTF-8 encoding).
You would still have a font problem, because the font you use for normal text may not contain these characters. In some situations, browsers are unable to use a fallback font unless you give them a helping hand with a font-family declaration. Besides, there is a risk of getting these characters in a style different from other characters, including more common vulgar fractions like ½. Thus, a careful choice of a font list is recommended; see my Guide to using special characters in HTML.
They aren't in the HTML4 spec, which is what IE9 and lower use. Only 1/4, 1/2 and 3/4 are supported.
Here is a list of what works and what doesn't.
http://stanford.library.usyd.edu.au/symbols/entities.html#Math
Is it advisable to have the ® symbol in <img>'s tag alt attribute or not? I am interested in knowing if there are problems with using the Registered symbol, such as not rendering properly in some browsers.
It all depends on your character encoding for the file. If the encoding is set correctly, the browser should display it correctly. There is nothing in the spec that suggests otherwise.
By the specifications, an alt attribute value may contain any character (though some characters need to be escaped in HTML markup). In practice, old browsers had many limitations in this area, but this is hardly relevant these days.
The main questions are: 1) When the attribute value is rendered as text, will the fonts available contain the character? Most probably. The “®” character is present in all normal fonts. 2) When the attribute value is rendered in speech or Braille, what will happen? I would not be so sure of this. Speech browsers might not know what to do with special characters. And would you really like to have alt="ACME® and Foobar® products" read e.g. as “ACME registered sign and Foobar registered sign products”? What purpose would it serve?
There are also font quality issues. Many fonts contain “®” in a rather small size, whereas a few fonts like Cambria contain a rather large “®”. The font used to render alt attributes might be outside the author’s control. (In many browsers, it is affected by CSS, but e.g. IE 9 uses a font determined by system settings.)
The bottom line is: No, it is not advisable, but it is technically possible, with various risks.
When giving title to a web page is it possible to change the font of the title?
for example:
<html>
<title> Question </title>
</html>
Now if i want to set the font of title 'question' to be what i want,then how can i do it?
No. See the standard.
Titles may contain character entities (for accented characters, special characters, etc.), but may not contain other markup (including comments).
http://www.w3.org/TR/html401/struct/global.html#h-7.4.2
No it's not possible with all of the most commonly used browsers.
This is not possible. The only special thing you can do with title text is changing the text direction between left-to-right and right-to-left
I presume you'd like to add style to the title as it appears in the Search Engine results? Alas, web crawlers don't support this functionality (though one of either category could actually be built to support title styles). However, you can achieve a distinct look by using non-ASCII characters (IPA or Greek or Russian) or punctuation.
If you're looking for a distinct look in your title in the browser window (e.g. in the tab) a custom favicon may be of use (it's the tiny image that appears in the browser next to your title). This thread discusses how to do that: How do I put image in url in HTML?