Digital Workshop

I have a full Opus-professional Pub with a Browser object displaying local html files.

It seems that Ctrl+MouseWheel will not create the Zoom-in/Zoom-out. So what are the options?
How do I give the User a button or other control to Increase/Decrease font-size?
The Pub will be displayed in a resizable Pub Window and I want to give the User some means to scale the font or the content. I am open to even making an automatic adjustment based on window size.

What I have tried:
I tried creating a JS variable in the HTML file, and reference that in the in-line style sheet. So this is my first step. Hardcoding a fixed starting size.
Later, I will add more JS code to read the URL Query String pairs and pick-up that value dynamically. I will have Opus script to append those parameters to the URL (well, append to the file path). [Lar EDIT: I said 'in-line style sheet', but what I am really doing is 'Internal CSS Stylesheet']

Here I use a JS variable: SetMainFontSize = 24 ;
Here is excerpt of the HTML and JS code
-- mainly, see the line font-size: SetMainFontSize+"px" ;
The CSS styles continue with other spans, e.g. span.rvts1, which use 'em' relative font sizing. If I can change that first size setting, the rest will scale relatively.

The above code does nothing to change the font-size, but I am missing seeing what I've done wrong.

Okay, here is a bit of an update. I have some progress with javascript variables, but still not able to use a variable to change the font-size displayed in a Browser object. (again, this is all regarding HTML page and is not about Opus or OpusScript here or yet).

Here is what I found and fixed. What does not work:
Change that tag to the following everywhere the script tag is used. This works 'better'.

I have success placing the following code in the HTML Body, but it does not work up in the inline stylesheet. It is not possible to directly reference JS variable by name inside the HTML sections. It seems the way to do it is with 'document.write( functioncall_OR_variablename );'.

So, remaining to solve:
1. getting the variable to work inside the style tags. I have: <script type="text/javascript">document.write(myFONTSIZEexpr);</script>

which writes: font-size: 44px; when placed in the Body section, but does nothing in the CSS/style area.

The 'style-type' tag may be preventing JS from being seen? I will look more into that.



2. The only reason I am chasing the above javascript approach is that I cannot figure out how to zoom or scale text (of Browser content) using Opus. Is there a way in Opus/Opusscript?
Scaling the Browser object does not appear to be an option since it needs to stay in its layout area on the Page. While it gets 'physically larger' when Pub Window is dragged larger, the reported width and height for browser properties do not change as the Window is resized).


TIA
Larry

Success.
Here's the solution for posterity.

In the inline CSS Stylesheet, write the line this way. The getSIZE function will return: 36px as a string. Of course, javascript functions need to be in the proper place.

Do not place a semicolon inside the parentheses of the CSS expression.
Also, suggest you Google for 'CSS expression' as it seems there are lots of opinions against using it.

This one took tons of hunting as well as 'try and test' iterations to get it working. This was just to get a variable into the style section. Next step is to solve getting Opus variable into the HTML or Javascript.

Cheers.

Whoops! Not solved.

CSS expression does work, but it runs away with some CPU cycles... because it calls the function numerous times per second.

Update. It seems this cannot be done within internal CSS stylesheet and javascript variables. So I have abandoned it.

I think I will be able to create a 'plan B' workaround with Opus overwriting some files and achieve the dynamic font size changes. However, this may get complicated if the content pages use greatly different html/css styles.

Latest thoughts.
HTML javascript: use <body... style.zoom... >
Then will require JS parsing the URL's query string.

Found this another place and thought it might work for you. What you would be doing to switching up the style sheet to increase/decrease the font size. I have not tried this out, but believe this would work for you and thought you might give it a go.

These would be the links to call the function:
<a href="#" onclick="decreaseSize(); return false;">
or
<a href="#" onclick="increaseSize(); return false;">


These would be the links to the stylesheets:
<link rel="stylesheet" type="text/css" title="small" href="/css/fontsmall.css" />
<link rel="alternate stylesheet" type="text/css" title="medium" href="/css/fontmedium.css" />
<link rel="alternate stylesheet" type="text/css" title="large" href="/css/fontlarge.css" />
<link rel="alternate stylesheet" type="text/css" title="xlarge" href="/css/fontxlarge.css" />




and here's the Javascript:
var globalTitle = "small";
var sizesArray = new Array();

function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style")!= -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) {
a.disabled = false;
globalTitle = title;
}
}
}
}

function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style")!= -1 && a.getAttribute("title") &&!a.disabled) return a.getAttribute("title");
}
return null;
}

function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style")!= -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

function loadSizes() {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style")!= -1 && a.getAttribute("title")) {
sizesArray.push(a.getAttribute("title"));
}
}
}

function increaseSize()
{
var pos = indexOf(sizesArray, globalTitle);
if (pos!= sizesArray.length-1)
{
++pos;
}

setActiveStyleSheet(sizesArray[pos]);
checkBlogueFrame(sizesArray[pos]);
}

function decreaseSize()
{
var pos = indexOf(sizesArray, globalTitle);
if (pos!= 0)
{
--pos;
}

setActiveStyleSheet(sizesArray[pos]);
checkBlogueFrame(sizesArray[pos]);
}

function indexOf(arrayToCheck, valueToCheck)
{
for (var i=0; i<arrayToCheck.length; i++)
{
if(arrayToCheck[i] == valueToCheck)
{
return i;
}
}
}

window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}

window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}

loadSizes();
var cookie = readCookie("style");
var title = cookie? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

You may also want to look here:

http://www.dyn-web.com/code/fontsizer/

Thanks bwpatric.

That's a lot of code to digest. I am just starting to get familiar with html structure, js, and execution. I will have a go at it later and learn how this works.

Meanwhile, I have two possibilities so far. The browser zoom scaling. That works, but a side effect is that browser object scrollbars get fat or narrow. Not too bad at under 200%, otherwise it is not a great 'look'. I am also working on this to react to 'Ctrl+mousewheel'. So far the results are quirky.

The other approach I tested does all the work in Opus.
Basically have one external css-stylesheet and just overwrite it after changing the Opus variable (e.g., myFontSize). Then reload the webpage.

I more or less have 'set this aside' for now, looking for better ways. This works fine and I only have to add one line of code in each HTML content file to reference that ext-CSS file. (here, the Browser obj is not used for web surfing)
In Opus, I simply Open the CSS file with 'overwrite' privileges... and rewrite it. I do not even have to read it.
This writes the 1st part of the CSS file, inserts the new value for font-size, and then writes the remaining parts of the style-sheet. That stylesheet uses a fixed font-size in px which is what is changed. The other html content sections 'flow' since their font-sizes are relative. Added advantage is that this acts like a User preference... generally being applied to subsequent browser pages (local content anyway).

Thx again for the JS and link -- will look at it.

Would this work?

Mack

P.S. Sorry for the rubbish in the first file - grabbed some extra garbage of the desktop when zipping. The Aliens and .reg files are not part

Hi Mack,

Thanks. Nice clean and ~simple. However, it does not fit my situation I think.

All the content files to be viewed in the Browser are local HTML files. So .php is not part of the scenario I think.
I did a meager attempt to put the bit of PHP code (echo GETsize...) inside my local html file, but either it cannot work where/how I placed it inside style definitions or I would need to install webserver functionality on my laptop (and so every client machine...).

BTW, the content files are authored in Rich Text and output to html. I will have to subsequently do batch changes to insert JS, external links, or other mods needed.


Garbage day here is Friday, so I'll throw it out then. I wondered what the relevance was... or what was the cryptic message there.

Yeah, you'd need XAMPP or the like.

The aliens are coming...

Mack

BW,

I've had a look at this now. I'd say in general and for normal web development where designers 'agree on their sytlesheets', this looks to be a pretty robust solution. I would have one concern which is the licensing from 'another place', so will bypass this. Did check out the link.

In the way I am producing content, the primary (internal) stylesheet is generated by the writing application. Different documents' stylesheets follow the same pattern, but are each potentially different stylesheets. So I have to be cautious about wholesale swapping out of the css sets. But if I kept those external, alternative stylesheets to change ONLY the font-size of the first font, with the link tag properly set... it would not affect the other style attributes in the internal css code. Here's the minimal ext. css stylesheet:(this is what I am testing with Opus changing and overwriting one common external .css file -- so just keep changing the value, e.g. 36)

It's good you put that solution here as I think it could be useful for others perhaps.

Thanks and cheers.
Larry