scaling font size in newWebView for help text

Solar2D General Questions/Discussion
#1

I’m using newWebView to show help overlays for different screen, so I can just edit the HTML help files using a HTML editor, which makes things easy.  

Issue is that for iPad’s I have a different config.lua screen “width” and “height”, so the overall application (including UI components) scale appropriately.  This has the impact of the help text in the webView being too large for iPads.  

Question - This is the approach I think I’ll have to take, so would be interested if there is something easier that I’m overlooking. 

Approach:

a) Set the content “width” for the newWebView via putting a “meta” tag in the html.  This seems to be the way to get control over the size of the text appearing.  e.g. set standard size HTML text, then use content width to scale overall HTML appropriately for the webview

\<html style="font-size: 20px;"\> \<head\> \<meta content="text/html; charset=windows-1252" http-equiv="content-type"\> \<meta name="viewport" content="width = 640"\> \<title\>\</title\> \</head\>

b) Now I need a different value of width above for iPad versus other so I was actually going to do this:

 - when someone clicks on help

 - read in HTML text from file

 - search/replace the  content=“width = 640”  to the right value, depending on device

 - write to temp file

 - then load into webview

Any comments/thoughts?  thanks.

#2

@greg886, I am tackling the same challenge, following you a month behind. Have you been able to find a way to make this work? My plan is to supply one html file formatted for iPad and one for iPhone and load selectively at run time. I would love to hear of a better way to do this though. Thank you very much for any information you might be able to share. 

#3

Hi ksan - this is what I ended up doing here.  Using the HTML “viewport” meta tag.   I didn’t work it out perfectly in terms of width settings, just got it to work roughly how I wanted for my app…

&nbsp;&nbsp;&nbsp;&nbsp;local displayW = display.contentWidth &nbsp;&nbsp;&nbsp;&nbsp;local widthToUse = Device.is\_iPad and (displayW \* 1.2) or (displayW)&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;local zoomTag = [[&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\<head\> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\<meta name = "viewport" content = "width =]] &nbsp;.. widthToUse .. [["\> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\</head\> &nbsp;&nbsp;&nbsp;&nbsp;]]

Background: The reason for the is_iPad was just the app I was using it I was shrinking the widgets more for the iPad devices:

local aspectRatio = display.pixelHeight / display.pixelWidth local width = aspectRatio \> 1.5 and 320 or math.ceil( 480 / aspectRatio ) local height = aspectRatio \< 1.5 and 480 or math.ceil( 320 \* aspectRatio ) if string.sub(system.getInfo("model"),1,4) == "iPad" then &nbsp;&nbsp;&nbsp;&nbsp;local iPAD\_SCALE = 1.4 &nbsp;&nbsp;&nbsp;&nbsp;width = math.ceil(width \* iPAD\_SCALE) &nbsp;&nbsp;&nbsp;&nbsp;height = math.ceil(height \* iPAD\_SCALE) end application = { &nbsp;&nbsp;&nbsp;&nbsp;content = { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width = width, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height = height, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale = "letterBox", &nbsp;&nbsp;&nbsp;&nbsp;}, }
#4

Super. Thank you very much for sharing. Most appreciated.

#5

I tried the <meta name=“viewport” content=“width = 640”> and it works great! Will try to find a way to edit the text file at runtime and post back.

#6

Ok. Here it goes. The following code opens information.html, reads it line by line, looks for “ToBeReplaced” & replaces it with a parameterized width and writes it back into information2.html. This is just a skeleton that will get you where you need. Thanks much for sharing the viewport idea. 

By the way, the viewport meta tag does not seem to make a difference when you run your code on the simulator (Mac) and look at your html file using the webView on the simulator but it works super once you build for the device. 

function doesFileExist( filePath ) --filePath will be 'nil' if file doesn't exist and the path is 'system.ResourceDirectory' if ( filePath ) then filePath = io.open( filePath, "r" ) end if ( filePath ) then print( "File found" ) --clean up file handles filePath:close() results = true else print( "File does not exist" ) end return results end local function updateViewPortWidth( sourceFile, destinationFile, path, textToLookFor, viewPortWidth ) local pathR = system.pathForFile( sourceFile, path ) local pathW = system.pathForFile( destinationFile, path ) --check & remove destination file if doesFileExist( pathW ) then os.remove(pathW) end; local fileR = io.open( pathR, "r" ) local fileW = io.open( pathW, "w" ) local saveData = "" local line = "" for line in fileR:lines() do --print( line ) line = string.gsub(line, textToLookFor, viewPortWidth) saveData = saveData .. "\n" .. line end fileW:write(saveData) io.close( fileR ) fileR = nil io.close( fileW ) fileW = nil --file.writeLine end local newViewport = "320" updateViewPortWidth( "information.html", "information2.html", system.DocumentsDirectory, "ToBeReplaced", newViewport )
#7

thanks for posting back ksan

#8

You’re most welcome. Hope it works well for you. If you improve it please post back. Thanks much!

#9

@greg886, I am tackling the same challenge, following you a month behind. Have you been able to find a way to make this work? My plan is to supply one html file formatted for iPad and one for iPhone and load selectively at run time. I would love to hear of a better way to do this though. Thank you very much for any information you might be able to share. 

#10

Hi ksan - this is what I ended up doing here.  Using the HTML “viewport” meta tag.   I didn’t work it out perfectly in terms of width settings, just got it to work roughly how I wanted for my app…

&nbsp;&nbsp;&nbsp;&nbsp;local displayW = display.contentWidth &nbsp;&nbsp;&nbsp;&nbsp;local widthToUse = Device.is\_iPad and (displayW \* 1.2) or (displayW)&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;local zoomTag = [[&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\<head\> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\<meta name = "viewport" content = "width =]] &nbsp;.. widthToUse .. [["\> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\</head\> &nbsp;&nbsp;&nbsp;&nbsp;]]

Background: The reason for the is_iPad was just the app I was using it I was shrinking the widgets more for the iPad devices:

local aspectRatio = display.pixelHeight / display.pixelWidth local width = aspectRatio \> 1.5 and 320 or math.ceil( 480 / aspectRatio ) local height = aspectRatio \< 1.5 and 480 or math.ceil( 320 \* aspectRatio ) if string.sub(system.getInfo("model"),1,4) == "iPad" then &nbsp;&nbsp;&nbsp;&nbsp;local iPAD\_SCALE = 1.4 &nbsp;&nbsp;&nbsp;&nbsp;width = math.ceil(width \* iPAD\_SCALE) &nbsp;&nbsp;&nbsp;&nbsp;height = math.ceil(height \* iPAD\_SCALE) end application = { &nbsp;&nbsp;&nbsp;&nbsp;content = { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width = width, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height = height, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale = "letterBox", &nbsp;&nbsp;&nbsp;&nbsp;}, }
#11

Super. Thank you very much for sharing. Most appreciated.

#12

I tried the <meta name=“viewport” content=“width = 640”> and it works great! Will try to find a way to edit the text file at runtime and post back.

#13

Ok. Here it goes. The following code opens information.html, reads it line by line, looks for “ToBeReplaced” & replaces it with a parameterized width and writes it back into information2.html. This is just a skeleton that will get you where you need. Thanks much for sharing the viewport idea. 

By the way, the viewport meta tag does not seem to make a difference when you run your code on the simulator (Mac) and look at your html file using the webView on the simulator but it works super once you build for the device. 

function doesFileExist( filePath ) --filePath will be 'nil' if file doesn't exist and the path is 'system.ResourceDirectory' if ( filePath ) then filePath = io.open( filePath, "r" ) end if ( filePath ) then print( "File found" ) --clean up file handles filePath:close() results = true else print( "File does not exist" ) end return results end local function updateViewPortWidth( sourceFile, destinationFile, path, textToLookFor, viewPortWidth ) local pathR = system.pathForFile( sourceFile, path ) local pathW = system.pathForFile( destinationFile, path ) --check & remove destination file if doesFileExist( pathW ) then os.remove(pathW) end; local fileR = io.open( pathR, "r" ) local fileW = io.open( pathW, "w" ) local saveData = "" local line = "" for line in fileR:lines() do --print( line ) line = string.gsub(line, textToLookFor, viewPortWidth) saveData = saveData .. "\n" .. line end fileW:write(saveData) io.close( fileR ) fileR = nil io.close( fileW ) fileW = nil --file.writeLine end local newViewport = "320" updateViewPortWidth( "information.html", "information2.html", system.DocumentsDirectory, "ToBeReplaced", newViewport )
#14

thanks for posting back ksan

#15

You’re most welcome. Hope it works well for you. If you improve it please post back. Thanks much!