textfield css stopped working -- help!

tksharpless · February 20, 2014 at 6:23 PM

Using 1.17pr2 to make an HTML5 tour, with textfield for popup info boxes. With the code below in defaultskin.xml, I expect to get white text in 2 different sizes according to [span class=txt] or [span class=smtxt]. Each pano's xml has something like this
" <layer name="info"
html="[span class='txt']Are You Asleep In There?[br]Ed Wilcox[/span][span class='smtxt'][br][br]in the Red Room at iMPeRFeCT Gallery[/span]"
/>
"
That worked once, both locally and from web, with several browsers; but somehow I lost it. Something in cache kept it working on some browsers for some time, but after clearing cache now all my desktop browsers show small black text in Times New Roman -- exactly what I do not want. And they do it with the same defaultskin.xml and textfield.swf files that once showed large white text.

I am completely baffled where to look for the cause of this. Can anyone help?

From defaultskin.xml:

tksharpless · February 20, 2014 at 6:57 PM

Update:
The problem is only in HTML5. Forcing Flash gives the expected text display on desktop. So maybe it never worked at all rather than "stopped". But anyhow I really need this to work on mobile.

tksharpless · February 20, 2014 at 7:22 PM

Worse news:
I tried putting the desired text styles inline with [/span style="..."]
In HTML5 the result is small, left-aligned white sans-serif text -- i.e. color and font OK, size & alignment not.
In Flash, this alternative gives small, black, left-aligned sans-serif text -- i.e only the font is as specified.

So in summary it seems that HTML5 textfield ignores css altogether and implements only a few of the specified styles, while Flash textfield implements most styles if given with css= but not if given with style=.

Tuur · February 20, 2014 at 7:25 PM

Hi Thomas,

I think your syntax is wrong.
Look here.. That works.
http://www.krpano.com/plugins/textfield/#css

And also maybe do onloaded="if(device.mobile, set(css, blablablab));

Hope it helps
Tuur

tksharpless · February 20, 2014 at 7:52 PM

Attached image of screesnshots showing the problem

Tuur · February 20, 2014 at 10:42 PM

Is thst with the code you wrote in your previous post?

Tuur

tksharpless · February 20, 2014 at 11:44 PM

Yes. that code

a.pu · February 21, 2014 at 10:23 AM

~~Fools seldom differ~~ Great minds think alike.

I have quite the same problem but using this style:

Code

css="text-align:left; color:#FFFFFF; font-family:Arial; font-size:16px; leading:8; text-indent:14;"

Leading and text-indent work fine in flash and don't at all in html5. Tested in FF 26, safari+ios 7.0.4.

Tuur · February 21, 2014 at 11:54 AM

So when they don't work, leave them out.
Thomas, i would first try with the right syntax.
Tuur

tksharpless · February 21, 2014 at 4:05 PM

Tuur, Leaving out these labels is not an option.

I think you are right that my code is bad. The stock krpano vtour skin makes extensive use of similar css code, and its text displays work fine in both html5 and Flash -- I have just verified this with version 1.17pr2.

However I am totally unable to see the syntax errors I have made. Would you be so kind as to show me explicitly what you mean?

klaus.krpano · February 24, 2014 at 9:06 AM

Hi,

the problem here is that the Flashplayer doesn't support real HTML/CSS and the same CSS code that is working in Flashplayer will not automatically work also in real HTML5 browsers.

E.g. there is no 'leading' in real CSS code, but an alternative can be 'line-height' (with font-size+leading as value), and all sizes in real CSS code need to have units like px work correctly.

So it would be possible to mix the CSS style - the Flashplayer will only take the ones he knows and the real Browsers will only take the correct ones that they know.

In your case - try changing this:
css="text-align:left; color:#FFFFFF; font-family:Arial; font-size:16px; leading:8; text-indent:14;"

to this code:
css="text-align:left; color:#FFFFFF; font-family:Arial; font-size:16px; leading:8; text-indent:14px; line-height:24px;"

Best regards,
Klaus

tksharpless · February 24, 2014 at 6:13 PM

Klaus, it seems that Flash textfield and the built-in html5 one behave differently in several respects. I have been able to get the desired result in html5 by eliminating tagged styles, which the the hmtl5 module seems to ignore. So in the layer declaration in skin xml I put

css="text-align:center; color:#F0F0F0; font-family:Arial,Helvetica,sans-serif; font-size:20px"

and in each pano's xml I put local style changes in the html text:

<layer name="info"
html="[span style='font-size:16px;']
Blink[br]Jill Saull[/span]
[span style='font-size:12px;']
[br]in the Red Room at iMPeRFeCT Gallery[/span]"
/>

Unfortunately the Flash textfield does not respect those inline syles, so all text comes out at 20px size.

I am still looking for a workaround, hopefully one that will not require a lot of code conditional on Flash or html5.

Of course the ideal solution is that you would revise the html5 textfield to more closely emulate the Flash one; e.g. to make tagged css styles work.

Best regards, Tom

klaus.krpano · February 25, 2014 at 5:09 PM

Quote from tksharpless

Klaus, it seems that Flash textfield and the built-in html5 one behave differently in several respects.

I know and therefore I'm already considering several approaches as replacement for the textfield plugin. But instead of implementing a full html parser and render (would be much too huge) or trying to emulate or hack around some limitations and bugs of the one or other system, I'm more considering an independent text system with clear rules and without html/css support - this way it should be possible to avoid Flash/HTML5 differences. But as said I'm still considering here several approaches, when something new will be ready here, it will be in the news of course .

Regarding your example itself - Flash doesn't support <span>+style - there <font size='16'> need to be used instead.

e.g. try it this way to get the same fontsize in Flash and HTML5:

Code

[font size='16' style='font-size:16px']fsfsdfsdfsdf[/font]

Best regards,
Klaus

a.pu · March 4, 2014 at 8:37 AM

Quote from klaus.krpano

E.g. there is no 'leading' in real CSS code, but an alternative can be 'line-height' (with font-size+leading as value), and all sizes in real CSS code need to have units like px work correctly.
So it would be possible to mix the CSS style - the Flashplayer will only take the ones he knows and the real Browsers will only take the correct ones that they know.
...
Best regards,
Klaus

Thank you for explanation!

Participate now!