Transparent objects and IE w/HTML 5 enabled

[Clifton]

If an object (of any color other than white) is set to transparent and the Enable HTML 5 support is checked in the PowerPac menu, then after export to DHTML the object will not retain its transparency.
Reason: ToolBook uses a stylesheet setting for transparency that is not supported in IE10+ when in standards mode (HTML 5).
Solution: Use the PowerPac function setOpacity( [object name], [transparency as integer 0-100] ) to set the transparency of the object "on load page".

NOTE: This issue has been fixed in the PowerPac v11.82.579 or above.

[John Robin Dove]

Hi Clifton,

In other browsers like Chrome this problem still exists, right? Presumably it would be possible to get around this by using the pgStyleObject to set the opacity but this changes the color. Is there a (scientific) way to know what color to use when opacity is applied?

[Clifton]

This issue only affected IE when Enable IE HTML 5 display is turned on in the PowerPac menu. The issue was resolved with the PowerPac version listed in the previous post.

HTML 5 browsers never had this problem because ToolBook already used the HTML 5 opacity style to define transparency. With IE, we had to ensure that style filters and the HTML 5 opacity were supported in the IE folder content based on the IE browser version and whether HTML 5 display was turned on. But as stated, this has been resolved.

If you are setting transparency for draw objects, they will tend to look washed out as you decrease the opacity levels using setOpacity() or pgStyleObject(). It is much more predictable to use a field with a background color and then set opacity based on the color chosen. The result should look very similar in all browsers.

[John Robin Dove]

Thanks Clifton. I'm a bit puzzled. Are you saying that if I export a transparent TB object it will remain transparent in the DHTML version?

I have a yellow field rgb(255,255,64) that is transparent in Toolbook 9.01 but when it is exported to DHTML it is NOT transparent. Are we talking about the same thing?

I have tried setting transparent to true with pgTBObjSet() but this doesn't work. I can make it semi transparent using pgStyleObject() to change the opacity but as you say the color then appears washed out.

[Clifton]

Here is a test case to demonstrate the transparency behavior from authoring mode to exported content:

1. Draw a field on the page and insert some text like "This is a transparent field."
2. Mark the field "transparent"
3. Change its background color to yellow.
4. Add NO PowerPac manipulation to the field to observe the exported result.
5. Draw a RED rectangle.
6. Layer the rectangle BEHIND the yellow field.
7. Mark the rectangle as NOT transparent for the sake of this experiment.
8. Export the result.
    
   
   Here is my export screen shot as shown in Firefox: (MSIE looks exactly the same.)
   
   

   

   Transparency from authored book to DHTML

   Image 1.png (2.96 KiB) Viewed 1500 times

   As you can see the yellow field is transparent and the red one bleeds through in the exported content. This is the way this is supposed to work. ToolBook automatically makes the opacity of objects 50% opaque when setting transparency to true. If the field color is which then ToolBook makes the background is completely transparent. To get other results, then developers would have to use PowerPac functions like setOpacity(), pgStyleObject(), or load a stylesheet with pgExtFiles() and set a classname from the stylesheet for the object with userProperty().

NOTE: Early versions of the PowerPac would not properly show the transparency from the authoring environment when using IE and HTML 5 display. But as you can see this has been fixed and object carry over their transparency from ToolBook's authoring mode into the DHTML content.

[John Robin Dove]

There would seem to be a problem. I have followed your instructions but only in IE does the exported content display correctly. In Chrome and Firefox the yellow field is not transparent.

IE:


Firefox:


Could this be related to Toolbook 9.01?

Here is the 9.01 tbk http://www.mediacours.com/tb_examples/transparency.tbk

[Clifton]

Umm ... when I export your transparency book I get the correct result and not like your screen shot for Firefox.
Without making any changes to your transparency.tbk, here is my Firefox screen shot using your file:

Screen shot from Firefox from transparency.tbk exported using ToolBook v9.01

Image 2.png (3.84 KiB) Viewed 1496 times

This was a ToolBook v9.01 export!

BTW: Chrome looks good too!

Suggestion: You may want to update your JAVA installation and see if that makes any difference. (Not sure why that would matter, but ...?)

[John Robin Dove]

I think I have updated my Java but it's a bit confusing. As far as I can tell I've gone from update 31 to update 51 but when I try to verify I'm told to update again!?

The problem is still there. I'll do some test on other computers.

When I installed Windows 8 on this computer I was not able to use the graphics card I had bought for Windows 7 so I am using the very basic one that comes with the motherboard but I don't see why the transparency is OK on Internet Explorer but not on Chrome. I've definitely got the latest version of Chrome.

[Clifton]

Once you update Java, you will have re-export the content.
Still not sure why that would matter. Can you zip you content that has trouble and let me take look?

BTW: This problem was never at issue with non-MSIE browsers. So it could be that the browser is having trouble displaying graphics properly??? Checking on a different computer is definitely a good way to eliminate some insanity.

[John Robin Dove]

I've now tried on 3 different computers. The results are the same on all 3. The mystery remains!

I've put the DHTML here:
http://www.mediacours.com/tb_examples/transparency

and the zipped exported folders here:
http://www.mediacours.com/tb_examples/transparency.zip