I tried to embed three fonts. Its showing different fonts however.
It's true. I have no clue why
Kind regards
Piotr
I tried to embed three fonts. Its showing different fonts however.
It's true. I have no clue why
Kind regards
Piotr
Hi all,
i found some problems with safari and google fonts since the latest OS updates.
In chrome and firefox it seems no problem.
Visit this page http://www.virtualtuur.com/krpano/font-align-safaribug/1/
the two red boxes are aligned righttop and x=0
refresh the page some times.. on osx it seems to go wrong 50% of the time. (x offset of aprox -20/30 px)
on iOS 100%.. sort of..
When it shows wrong click the second box, then the css will be changed to a none google font, just helvetica.. then it sets it right.
Here an example with no google fonts at all
http://www.virtualtuur.com/krpano/font-align-safaribug/2/
no problems...
anyone has a clue?
Tuur
Hi,
thanks for the example!
The problem here is the delayed loading of the web-font. When krpano does the alignment and the font is not loaded at that time, it will get the wrong sizes of the text and so the alignment will be wrong.
Here more to make that more visible:
Instead of adding the web-font in the html file like this way:
it would be also possible to load/add it dynamically via Javascript - e.g. like this way in the xml in a krpano Javascript action:
<action name="add_web_fonts" autorun="preinit" type="Javascript" devices="html5"><![CDATA[
var styleNode = document.createElement("style");
styleNode.type = "text/css";
styleNode.textContent = "@font-face{ font-family:Fira; src:url('" + krpano.parsepath("tests/FiraSans-Light.ttf") + "'); }";
document.head.appendChild(styleNode);
]]></action>
When using this way, it's possible to play more with it - e.g. adding 3 second delay before adding the font to make the changes better visible and reproduce-able:
<action name="add_web_fonts" autorun="preinit" type="Javascript" devices="html5"><![CDATA[
setTimeout( function(){
var styleNode = document.createElement("style");
styleNode.type = "text/css";
styleNode.textContent = "@font-face{ font-family:Fira; src:url('" + krpano.parsepath("tests/FiraSans-Light.ttf") + "'); }";
document.head.appendChild(styleNode);
},3000);
]]></action>
When using that code, there would be first the browsers replacement-font visible and then after ~3 seconds when the font is loaded and added, the font of the texts will change, but the position itself will not update.
A solution for that problem would be waiting for the browser until the fonts were loaded. At least in modern browsers there is a (still-experimental) browser API for that:
https://developer.mozilla.org/de/docs/Web/API/FontFaceSet
Here a Javascript code (in a krpano action again) that waits for the font-loading and once done it forces all textfields to update theirself:
<action name="check_for_web_fonts_loading" autorun="preinit" type="Javascript" devices="html5"><![CDATA[
function new_fonts_loaded()
{
var layers = krpano.get("layer").getArray();
var hotspots = krpano.get("hotspot").getArray();
var i;
for (i=0; i < layers.length; i++)
{
if (layers[i].type == "text")
{
// force an update by changing the vcenter setting two times
layers[i].vcenter = !layers[i].vcenter;
layers[i].vcenter = !layers[i].vcenter;
}
}
for (i=0; i < hotspots.length; i++)
{
if (hotspots[i].type == "text")
{
// force an update by changing the vcenter setting two times
hotspots[i].vcenter = !hotspots[i].vcenter;
hotspots[i].vcenter = !hotspots[i].vcenter;
}
}
}
if (document.fonts)
{
document.fonts.addEventListener("loadingdone", new_fonts_loaded, true);
}
]]></action>
Display More
That would work for browsers like Chrome and Firefox, but unfortunately not for iOS 10 because iOS 10 has especially a bug here that causes not firing the 'loadingdone' event for the fonts...
I think I will add the font-loading check directly into krpano, but I'm currently not aware about a 'good' universal solution or workaround for iOS 10...
Best regards,
Klaus
Good !
Hi,
as the detection of loaded fonts doesn't work in iOS 10 (due an iOS bug), here a solution for loading web-fonts that should work everywhere where web-fonts are supported:
<action name="load_web_fonts" autorun="preinit" type="Javascript" devices="html5"><![CDATA[
if (window.FontFace)
{
// the browser has FontFace support
// load the font
var fontFace = new FontFace("Fira", "url('tests/FiraSans-Light.ttf')");
fontFace.load().then( function(loadedFontFace)
{
// when loaded, add it
document.fonts.add(loadedFontFace);
// and update all textfields to make sure the resize and align correctly
update_textfields();
});
}
function update_textfields()
{
var layers = krpano.get("layer").getArray();
var hotspots = krpano.get("hotspot").getArray();
var i;
for (i=0; i < layers.length; i++)
{
if (layers[i]._istextfield)
{
// force an update by changing the vcenter setting two times
layers[i].vcenter = !layers[i].vcenter;
layers[i].vcenter = !layers[i].vcenter;
}
}
for (i=0; i < hotspots.length; i++)
{
if (hotspots[i]._istextfield)
{
// force an update by changing the vcenter setting two times
hotspots[i].vcenter = !hotspots[i].vcenter;
hotspots[i].vcenter = !hotspots[i].vcenter;
}
}
}
]]></action>
Display More
Here the specific font will be directly loaded.
Best regards,
Klaus
Hi Klaus,
thanks for all explanation and code help.
A very nasty problem. Never seen it before the latest OS updates. Some projects are 'broken' sort of.
should this:
not be hotspots in those 2 lines?
EDIT: we were posting at the same time.
I will make an example 3 with your code.
I changed the first example a bit.
You can now also click the first red box. Then it will set x to 0 again (not happening) but the code thinks it does.
Somebody got 800 billion dollar to buy apple and fire some engineers?
Tuur
Here an 3th example with the last code implemented.
http://www.virtualtuur.com/krpano/font-align-safaribug/3/
Tuur
I changed the first example a bit.
You can now also click the first red box. Then it will set x to 0 again (not happening) but the code thinks it does.
That's because the internal layer itself is already at 0, it's the further internal text layer that changes its size and the other layer doesn't know about the font changes.
Therefore the 'load_web_fonts' example above - there the font gets loaded and once loaded the textfield be updated. Then all internal sizes will be correct and the alignment should be okay.
Additionally it would be possible to use that example as base for further improvements - e.g. hide the involved textfields until the font as loaded - and then show them only when the font is there. This would avoid jumping/moving texts.
Best regards,
Klaus
Here an 3th example with the last code implemented.
Here the:
could be removed from the html file.
I added a second font face by just copying the whole 'if' thing and changing the names of the font.
Not sure if that is the right way, but it works.
<action name="load_web_fonts" autorun="preinit" type="Javascript" devices="html5"><![CDATA[
// load the font FIRA
if (window.FontFace)
{
// the browser has FontFace support
var fontFace = new FontFace("Fira", "url('fonts/FiraSans-Light.ttf')");
fontFace.load().then( function(loadedFontFace)
{
// when loaded, add it
document.fonts.add(loadedFontFace);
// and update all textfields to make sure the resize and align correctly
update_textfields();
});
}
// load the font JULIUS
if (window.FontFace)
{
var fontFace = new FontFace("Julius", "url('fonts/JuliusSansOne-Regular.ttf')");
fontFace.load().then( function(loadedFontFace)
{
document.fonts.add(loadedFontFace);
update_textfields();
});
}
function update_textfields()
{
var layers = krpano.get("layer").getArray();
var hotspots = krpano.get("hotspot").getArray();
var i;
for (i=0; i < layers.length; i++)
{
if (layers[i]._istextfield)
{
layers[i].vcenter = !layers[i].vcenter;
layers[i].vcenter = !layers[i].vcenter;
}
}
for (i=0; i < hotspots.length; i++)
{
if (hotspots[i]._istextfield)
{
hotspots[i].vcenter = !hotspots[i].vcenter;
hotspots[i].vcenter = !hotspots[i].vcenter;
}
}
}
]]></action>
Display More
if that should be different or smarter i want to know.
Tuur
Here an example for loading several fonts:
if (window.FontFace)
{
var fonts_to_load = [];
fonts_to_load.push( (new FontFace("Fira", "url('fonts/FiraSans-Light.ttf')")).load() );
fonts_to_load.push( (new FontFace("Julius", "url('fonts/JuliusSansOne-Regular.ttf')")).load() );
fonts_to_load.push( (new FontFace("Font3", "url('...')")).load() );
// ...
Promise.all( fonts_to_load ).then( function(loaded_fonts)
{
loaded_fonts.forEach( function(font){ document.fonts.add(font); } );
update_textfields();
});
}
Display More
Hi,
It seems the 'edge' browser still gives problems... like it doesn't accept text-align center... or so..
Not sure if this has something to do with the stuff above..
I tried in my tour the old and new option for this text thing but it seems to make no difference on ' Edge'.
Is this a known issue?
Is the only option to use for device edge renderer css3d or graphics?
A bit hard, i have no edge running, so that's why i ask.
On mac, all browsers it's fine.
Tuur
What should we do if we want to load more than one url for each font so we can make it compatible with all browsers ?
@font-face {
font-family: 'myfont';
src: url('fonts/myfont.eot'); /* IE9 Compat Modes */
src: url('fonts/myfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/myfont.woff') format('woff'), /* Pretty Modern Browsers */
url('fonts/myfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/myfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
I get that error in version 1.19-pr12
ERROR: loadwebfonts(loadwebfonts) - invalid variable name: 123456
same here
ERROR: set(font-bold,Roboto-Bold) - invalid variable name: 123456
seems like preinit is doing something wrong
Hi,
can you please show the full example?
Best regards,
Klaus
I think it comes from another side, I've been checking more deeply, and I saw it was beacause a initvar, that has numbers as value. so let's say you can try it like this :
embedpano({
swf:"tour.swf",
id:"krpanoviewer",
xml:"tour.xml",
target:"pano",
html5:"prefer+webgl+preservedrawingbuffer",
consolelog:"true",
initvars:{
newvar:"123456",
oldvar:"abcde"
},
passQueryParameters:true,
mwheel:true,
focus:true
});
Display More
and on tour.xml
<action name="skin_deeplinking_update_url_process">
copy(adr, browser.location);
indexoftxt(qi, get(adr), '?');
if(qi GT 0, subtxt(adr, adr, 0, get(qi)));
copy(si, scene[get(xml.scene)].index);
copy(h, view.hlookat);
copy(v, view.vlookat);
copy(f, view.fov);
copy(d, view.distortion);
copy(a, view.architectural);
clamp(d, 0.0, 1.0);
clamp(a, 0.0, 1.0);
set(pp, calc(f LT 10 ? 6 : 2));
roundval(h, get(pp));
roundval(v, get(pp));
roundval(f, get(pp));
roundval(d, 2);
roundval(a, 1);
set(adr, calc(adr + '?' + newvar + '&startscene=' + si + '&startactions=lookat('+h+','+v+','+f+','+d+','+a+');'));
js( history.replaceState(null, document.title, get(adr)); );
</action>
Display More
But it's not the name of the variable, it's the value
ahh yeah it's the name of variable once I put it on url ...
will need to find a new solution thanks and sorry for the inconveniences
Don’t have an account yet? Register yourself now and be a part of our community!