Back on the perennial problem. Thought I had the solution. Re-did the Portrait background image. Much happier with the latest version. It keeps the whole of the abacus in the background, much more balanced. However, for some reason, the information that is supposed to overlay on top of the image is now appearing below the image. need to resolve this, but the problem is, everything looks correctly configured.
The effect is now almost perfect. Image and left and right text margins vary depending on orientation. The only slight issue revolves around text height on the iPad / iPhone in landscape mode. Text is relatively too large and text writes off the bottom of the image. The effect is fine on PC (at least with reasonable landscape ratios). Somehow I need to adjust text point size for screen width. I need 128 chars in 60% of screen width in Landscape mode.
However what all the above goes to prove is that I cannot use this style of screen for general web pages. For fixed/known content pages, it is possible to manually construct the page. However it is completely disregarding the flow nature of the content. To retain that, I have to go down a more traditional route page construct. Which means to make them interesting I need to include graphical content, and a bit of ‘style’
On Width and Text size. There are, in addition to the traditional size measurements of:
- px -Pixels
- pt – Points
- in – inches
- cm – centimeters
- mm – millimetres
- pc – picas
- em – One current font size
- ex – width of lower case ‘x’
- % – % of em
We now also have:
- vw – Viewport width
- vh – Viewport height
- vmin – Smaller of Viewport width and height
- vmax – Larger of Viewport width and height
Pleased to say I now have exactly what I want, on PC, iPad, & iPhone. OK the text is small on the iPhone, but then it always is.