Making a page 100% width and height, with text scaling to match height?

Question

I'm using Bootstrap and Angular to make a single-screen webpage that is designed to be shown on a small screen (such as the Adafruit 2.2" or 2.8" screen for the Raspberry Pi, or on a phone screen). I want to force all content (which is about 3-4 rows of a table) to expand up to, but not bigger than, the screen (so, absolutely no bigger than 100vh and 100vw and absolutely no scrolling or cut off text)

But for the life of me, I can't work it out. Here's a JSFiddle with what I'm trying to do (just bare bones without the Bootstrap / Angular stuff)

CSS:

#statusController {
  background: #333;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
}

td {
  font-size: 100vh;
}

body,
html {
  padding: 0;
  margin: 0;
  color: white;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
}

HTML:

<div id="statusController">
  <table>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
  </table>

http://jsfiddle.net/kjt7jLn6/

I've also tried using jQuery and Angular plugins like BigText, fitText, textFit and so forth, but with the same result -- the text is expanded and pushes down past the bottom of the page, so you need to scroll to see the rest.

Any clues?

EDIT: I've had a look at the duplicate answer, and my question differs, in that my question is more about the need to scroll, instead of how to expand text. I might need to try fiddling with the code sample provided, but as it stands, the text scaling still pushes text off the bottom when there's enough of it, which I don't want.

Maybe define your font-size as, say, `3vmin` instead of `100vh`? — somethinghere, Dec 04 '15 at 11:33
@somethinghere I gave that a shot, though it doesn't do much: http://jsfiddle.net/kjt7jLn6/3/ . `vmin` is defined as: "1vmin = 1vw or 1vh, whichever is smaller". I also tried using `vw` instead of `vh` (which makes sense, and was probably a typo on my end) but still no good — Grayda, Dec 04 '15 at 11:42
Those are sadly enough the only predictable responsive units we have, so you will have to do it with that. The big issue as well is that it is different across fonts, OS, device, screen size... etc. You should either cut off text or provide a way for it to overflow, or use an image if you want to be 100% certain of it's size, but otherwise you will always have to keep edge-cases in mind. — somethinghere, Dec 04 '15 at 11:44
Possible duplicate of [Is it possible to dynamically scale text size based on browser width?](http://stackoverflow.com/questions/5358183/is-it-possible-to-dynamically-scale-text-size-based-on-browser-width) — Marcos Pérez Gude, Dec 04 '15 at 14:02
@MarcosPérezGude I just tried that, but the issue still remains: "the text is expanded and pushes down past the bottom of the page, so you need to scroll to see the rest.". Even when I make the scaling $body.height() instead of $body.width() like the original. I'll keep fiddling, but thanks for the starting point :) — Grayda, Dec 05 '15 at 02:37

score 0 · Answer 1 · edited May 23 '17 at 11:44

0

I believe that the styles you are trying to accomplish are achievable using simple html/css

-http://www.w3schools.com/html/html_tables.asp <--- for table width -html5 you can use to set site margins to 0px to give table full width of the screen

-Is it possible to dynamically scale text size based on browser width? has information on scaling the text dynamically

also a site for adding div's to tables https://css-tricks.com/using-divs-inside-tables/

edited May 23 '17 at 11:44

Community

1
1

answered Dec 04 '15 at 13:37

Alex

102
1
10

This answer is not useful. The problem that OP said is exactly to fit the text. – Marcos Pérez Gude Dec 04 '15 at 13:38
sorry guess i misunderstood the question then because I thought he was having trouble with table size too – Alex Dec 04 '15 at 13:42
I think that the problem is to fit the text, but good try! :) – Marcos Pérez Gude Dec 04 '15 at 13:43
in that case I believe that this question already provided a useful answer to try http://stackoverflow.com/questions/5358183/is-it-possible-to-dynamically-scale-text-size-based-on-browser-width – Alex Dec 04 '15 at 13:46
That's a good point to mark this as duplicate. Good research @Alex! – Marcos Pérez Gude Dec 04 '15 at 14:02

score 0 · Answer 2 · answered Dec 05 '15 at 12:11

I was able to solve my particular issue by using jQuery and some dynamic calculations of height

http://jsfiddle.net/kjt7jLn6/6/

No CSS is required anymore, and no changes to tables are required, just a short bit of Javascript at the top of the page that is run on page load, and on resize:

$(window).resize(function () {
  var tcount = $("table tr").length
  var tsize = ($(window).width() / $(window).height() * 2)
  $("table tr").css("height", (100 / tcount) + "vh")
  $("table tr").css("font-size", (100 / tcount / tsize) + "vh")
}).resize()

This takes all the tr elements in the table and stores that in tcount. The height of each tr is set to 100 / tcount to spread the elements evenly across the page.

tsize is the window's width / height * 2. font-size is set by dividing 100 / tcount / tsize

So far, it seems to work rather well. It breaks if the window is taller than wide (which is easily fixed) and breaks when using 1 row (and sometimes > 20 rows) or when a row has lots of text. These are also easily fixed by taking row height into consideration for tsize

So now my mini-UI beautifully resizes and is readable on my phone (in landscape) and on my PiTFT (though that needs some tweaking too)

Making a page 100% width and height, with text scaling to match height?

2 Answers2