YJL

I recently found out the text in my Lightweight YouTube Player Loader will be almost unreadable if you make the frame too small. The problem enabled me seeking for a solution.

And here are the quick tests I came up with:

(You can drag the bottom-right trianble handler to resize)

There are three tests above, the first two are helped by the jQuery TextFill plugin by Russ Painter, which I just helped to set up a repository on GitHub. Both have maximal font size at 40px, and 4px and 24px as minimal font size, respectively. The last one uses only pure CSS text-overflow: ellipsis to achieve the goal.

I personally like the middle one, the text resizes. I can see some people may not like that because it may generate different text size in one page, but when you have huge header style, pure ellipsis will not be readable unless you remember setting up title attribute, so hinttext can show the full text.

The fancy non standard <marquee>-like scripts may be good in some cases, but it requires timer for constant updates. I prefer the static style.

Here is the nearly complete code:

<script src="https://raw.github.com/jquery-textfill/jquery-textfill/master/jquery.textfill.min.js"></script>

<style type="text/css" media="screen">
#textfill-tester {
  background-color: #aaa;
  color: black;
  width: 400px;
  height: 200px;
}
#line-textfill-nomin {
  background-color: #faa;
}
#line-textfill {
  background-color: #afa;
  width: 100%;
}
#line-ellipsis {
  background-color: #aaf;
}
.line-textfill {
  font-size: 36px;
  height: 1.25em;
  line-height: 1.25em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.line-textfill * {
  vertical-align: middle;
}
</style>

<script>
function init_textfill_tester() {
  $('#line-ellipsis').attr('title', $('#line-ellipsis').text());
  $('#line-textfill-nomin').textfill({maxFontPixels: 36});
  $('#line-textfill').textfill({maxFontPixels: 36, minFontPixels: 24});
}
$(init_textfill_tester);
</script>

<div id="textfill-tester">
  <div id="line-textfill-nomin" class="line-textfill">
    <span>[textfill] The quick brown fox jumps over the lazy dog</span>
  </div>
  <div id="line-textfill" class="line-textfill">
    <span>[textfill-min] The quick brown fox jumps over the lazy dog</span>
  </div>
  <div id="line-ellipsis" class="line-textfill">
    <span>[ellipsis] The quick brown fox jumps over the lazy dog</span>
  </div>
</div>

I haven’t decided if I want to make text resize, but mostly just too lazy to update the code. ;)