Register
Blog
Zero width space in long word in header Hi, I'm looking to find out why in certain browsers, the code Code:
[size] is inserted between each letter in a long word in the Title of a .tel. (I've added spaces between the code so you can read it). This results in long words being oddly broken up in web browsers, but not, as far as I can see, in mobiles. I can understand why this might be the case, but surely there's an option to allow for decent hyphenation, or to switch it off? I'm looking to set up a directory of psychotherapists - with the word "Psychotherapist" inserted after each name in the title of the tel - but at the moment somewhere, it's being returned in some browsers as Code: [/size]
[size] This results in the word breaking up as follows in the Title of a sample tel: Jane Doe, Psychothera pist Any idea how this can be changed? Thanks Dermod[/size] |
Hi Dermod, Never seen this. Sounds like your browser is sending weird Unicode characters. Which browser and version are you using? Mark |
Hi Mark, Thanks for replying. Latest versions of browsers all: Mac: Chrome, Firefox, Safari PC: Chrome, Firefox Chrome and Safari don't display the http://en.wikipedia.org/wiki/Zero-width_space in the word "Psychotherapist" when I "Inspect" the element in Developer Tools or Firebug. Firefox on both PC and Mac, however, clearly reveals in Firebug the text produced in the
and the only word that has the Zero-width Spaces inserted in between each letter is Psychotherapist, not any other word. All of them split the word, either with apist on a new line, or pist. On the Mac, all of them first show the word complete, and then split it up in front of my eyes. I can't see the any h1.word-wrap-header in retro.css. Whatever about the nuisance value, there is the real concern that the word-break might not work out in the most helpful of ways. http://dermod-moore.iahip.tel is an example Dermod[/size] |
just tried and its appearing fine in my versions of chrome, firefox and ie... strange... |
Doing it on iPad too....weird, see it change right before my eyes! http://gallery.me.com/boracay/100075/IMG_0102/web.png Actually, this maybe related (and sorry for the long post, cant quickly crop images on iPad) but I have always noticed that the heading field, just after the page fully loads, is re-rendered.... See below, part way through loading, then after fully loaded (the numbers are changed from small to large)....is this to do with how a browser is told by HTML to redraw for allowing clicks, touches, etc within a "webview" ? http://gallery.me.com/boracay/100075/IMG_0107/web.png ....and After fully loaded.... http://gallery.me.com/boracay/100075/IMG_0106/web.png |
dermod, Welcome to the forum. Just to let you know that this isn't something I've seen before, but I've asked our testing team to look into it. I'll get back to you shortly. |
Dermod, I've had feedback from the technical team on this and it's unfortunately something which can happen if there is a very specific combination of characters and word length that cannot be fitted within the width confines of the title space. The title space in the .tel has restrictions in terms of depth and width because of the design of the page. To meet these it will automatically reduce the size of the text to fit it in the space. There are times, however, when the length of the word means that the width of the title would still be compromised. The problem is that different browsers will react very differently when a string is too large for the space allocated and there is no obvious way to split the string (e.g. no space or hyphen characters). Some browsers will truncate the string, some will wrap correctly and some will display everything on a single line (which would have a serious affect on the whole layout of the page). A generally accepted way to avoid this and produce consistent behaviour is by the introduction of zero width space characters in long text. Given that they are zero width they don’t display to a user but do give the underlying browser all it needs (i.e. a space) to determine that wrapping can occur if required. Unfortunately on rare occasions the split that is used is not suitable, as you have demonstrated above. With regards to avoiding this, have you tried modifying the title text somehow, for example using a hyphen in there. Sometimes the smallest change can improve the formatting. Alternatively I see that you are duplicating the content in the Header, so you could remove some parts from the title. |
Hi Aled, Thanks for getting back to me. Quote:
Could I have the logarithm? In other words, if I know that the word spanning character 32 in a title is going to be disintegrated like this, I'd fill my first 32 characters with names and non-breaking spaces, then I'd introduce my long word, to ensure that it starts a new line. Quote: [/size]
Who is generating this? Quote: [/size]
I can't put a hyphen in - then the title of the page will be Jane Doe Psycho-therapist Can I put a zero-width space in the long word myself? I've tried, but it just appears in the title of the page. If I know how this glitch is created, exactly, then I can work around it. If there's a stylesheet being generated by telnic, then surely that can be changed? If I know which script is kicking in to literally "move the words in front of my eyes" then maybe I can understand how to avoid it. I have 750 psychotherapists to create tels for, each with different names. I would like the word Psychotherapist to appear in the title, for obvious SEO reasons, and I would like to ensure that it never, ever happens that the word "rapist" appears on its own on a tel. There must be a workaround.[/size] |
What we need is a bit of control over text. I've asked several times to allow insertion of formatting tags, eg
Telnic, can we please see these soon? Mark[/size] |
Aled, I tried an experiment in SOAP with Quick Update tool to replicate insertion of \010 line breaks in title text. This is allowed in header and free text to control paragraphs. However, this failed as the Soap code filters these out for update title command. A simple change would be to allow \010 insertion for title display purposes. I can see why it is not allowed as the text also appears in the
tag, but this change would give us limited control. Mark[/size] |
Mark, no it's not permitted in the title field as it could affect the height of the title bar and knock out the formatting aspects of the proxy page with regards to that area. Dermod, with regards to the actual number of characters before this happens, it depends on the actual characters, so it's not a simple number (e.g. the I takes less space than an O). Placing the psychotherapist first would avoid the issue completely for all the names that you have. |
Dear Aled, This is all about SEO, and looking good. I think something has been overworked in how the problem of long titles has been solved. Browsers tend to work out for themselves how to break up long collections of words, and don't need to be told how to do it. For some reason, telnic has truncated the title fields in web browser templates, but there is no reason to do so. Will the next generation of design options include ones with long title fields? I'm sorry, but I do think that telling me to put the word psychotherapist in first, if you are a representative of telnic, is really not good PR! I asked you for the logarithm, the exact script that does this, so I could find a workaround. As I'm now at the stage where I am going to go ahead and there will be 750 psychotherapists with their own tels, I find it odd that the only option right now is to remove the word psychotherapist from the title, and to keep it in the description. Putting it first is not an option - this is a calling card, not a spammy gimmick. Appearance matters, and you aren't the one who has to bear the brunt of 750 unhappy psychotherapists if this decision of mine to go with a .tel directory goes wrong! Believe me, it's not a pretty sight. :-) |
Aled, why can't code for the html object that controls the title for example
be optimized better? As Dermod asked for the algorithm, just explain it so we understand how to help your team improve it. But it must be improved! We have an opportunity to showcase 750 people so why not do it right ASAP? Mark[/size] |
PS. I have written code in PHP to create dynamic text images for my tel pages. I have to consider font size and character width. I also have written code in Javascript to center text using the new font metric methods. So there is some knowledge to share. Mark |
Quote:
Aled, is there an update to the header field issue? I will jump in here, and ask that UNICODE in the header be handled better too... please see my example screenshot below of (boracay.tel CHINESE sister site) 长滩岛.tel you will see that "长滩岛.tel" text in the header area is in fact being pushed off the template header area! (in contrast to the KOREAN version at bottom, which is fine) 보라카이.tel chinese version https://files.me.com/boracay/rall0p and korean version https://files.me.com/boracay/qufzy6[/size] |
Boracay, are you still seeing this issue on 长滩岛.tel? I've checked on FF, Chrome and IE and it's looking fine on those. If you are, can you let me have the browser and version please? Thanks |
yes, its still happening. safari 5. Mac osX10.6 |
ok - I'll have that raised as an issue. Thanks for letting us know, Will respond on thsi thread when I have a response from our engineers. |
thank you. just to let you know... ok on firefox mac OSX 10.6 ok on Safari mobile iPhone4 (iOS 5 beta) horrible (the worst so far) on Safari mobile iPad2 (iOS 5 beta) |
boracay, I've had an initial report back on this issue and I'm afraid there isn't a quick fix available. The specific combination of these Chinese characters within the Safari browser is unfortunately causing the .tel name to be pushed below the title space. We shall continue to look at this problem to see how it can be overcome but in the immediate term I would suggest that an alternative title string is used so that this doesn't happen. |
