You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

  • "tksharpless" started this thread

Posts: 68

Location: Philadelphia, Pennsylvania

Occupation: Retired S/W engineer

  • Send private message

1

Thursday, February 20th 2014, 6:23pm

textfield css stopped working -- help!

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:

<layer name="info" url="textfield.swf"
html=""
width="240" height="80" align="leftbottom" x="20" y="20"
css=".txt {font-family:Arial,Helvetica,sans-serif; font-size:18; text-align:center; color:#F0F0F0}
.smtxt {font-family:Arial,Helvetica,sans-serif; font-size:12; text-align:center; color:#F0F0F0}"
visible="true" onclick="toggle_info();"
children="false"
autoheight="false"
vcenter="true"
background="true"
backgroundcolor="0x0F0F0F"
backgroundalpha="0.5"
border="false"
roundedge="7"
/>

  • "tksharpless" started this thread

Posts: 68

Location: Philadelphia, Pennsylvania

Occupation: Retired S/W engineer

  • Send private message

2

Thursday, February 20th 2014, 6:57pm

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" started this thread

Posts: 68

Location: Philadelphia, Pennsylvania

Occupation: Retired S/W engineer

  • Send private message

3

Thursday, February 20th 2014, 7:22pm

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

Sage

Posts: 3,164

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

4

Thursday, February 20th 2014, 7:25pm

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 *thumbsup*
http://www.virtualtuur.com
Skype:studiotuur

  • "tksharpless" started this thread

Posts: 68

Location: Philadelphia, Pennsylvania

Occupation: Retired S/W engineer

  • Send private message

5

Thursday, February 20th 2014, 7:52pm

Attached image of screesnshots showing the problem
tksharpless has attached the following image:
  • krpano-textfield-problem.jpg

Tuur

Sage

Posts: 3,164

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

6

Thursday, February 20th 2014, 10:42pm

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

Tuur *thumbsup*
http://www.virtualtuur.com
Skype:studiotuur

  • "tksharpless" started this thread

Posts: 68

Location: Philadelphia, Pennsylvania

Occupation: Retired S/W engineer

  • Send private message

7

Thursday, February 20th 2014, 11:44pm

Yes. that code

a.pu

Trainee

Posts: 80

Location: Default city, Russia

Occupation: Vtour dev, design, UX and photography

  • Send private message

8

Friday, February 21st 2014, 10:23am

Fools seldom differ Great minds think alike. *g*

I have quite the same problem but using this style:

Source code

1
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.

*confused*

This post has been edited 1 times, last edit by "a.pu" (Feb 21st 2014, 11:20am)


Tuur

Sage

Posts: 3,164

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

9

Friday, February 21st 2014, 11:54am

So when they don't work, leave them out.
Thomas, i would first try with the right syntax.
Tuur *thumbsup*
http://www.virtualtuur.com
Skype:studiotuur

  • "tksharpless" started this thread

Posts: 68

Location: Philadelphia, Pennsylvania

Occupation: Retired S/W engineer

  • Send private message

10

Friday, February 21st 2014, 4:05pm

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?

11

Monday, February 24th 2014, 9:06am

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" started this thread

Posts: 68

Location: Philadelphia, Pennsylvania

Occupation: Retired S/W engineer

  • Send private message

12

Monday, February 24th 2014, 6:13pm

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

13

Tuesday, February 25th 2014, 5:09pm

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:

Source code

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


Best regards,
Klaus

a.pu

Trainee

Posts: 80

Location: Default city, Russia

Occupation: Vtour dev, design, UX and photography

  • Send private message

14

Tuesday, March 4th 2014, 8:37am

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!