I'm getting ready to start on a webapp/phonegap app that will be displaying code.
I will be using highlight.js to display code. HighlightJs uses pre tags and has a style called monokai_sublime that uses a fixed width font
I have snippets of code carefully edited to be either max 40, 60, or 80 characters long.
What I want is some css or viewport magic to where I can have 3 css classes .code40, .code60, .code80 and when I set those on the element, it will make it to where the width of the element will exactly contain 40,60,or 80 fixed size characters.
so I want to show this snippet where it takes up the full width
do_some_cool_magic(with,stuff); //size40
but also show this snippet at the same width (full width), so with a smaller font size
do_some_cool_magic(with, {stuff:"that is longer"}); //size60
If I switch the phone to landscape, it should still do the same thing. if class code60 is applied 60 characters should be the full width of the screen(or div)
Right now I Just hard-coded the supposed number of pixels my phone screen has (1080x1920) and set the font size to a px amount that matched, but on my phone, it showed up as gigantic letters and didn't fit on the screen (there was scrolling, as though it was zoomed in 200%, and well, it was dependent on the exact size/proportion of the screen anyways)
here's the jsfiddle http://jsfiddle.net/xqck5j4g/
I'm not expecting you to rewrite the fiddle, but I want to know what is an effective way to set up my css is so that: regardless of screen size, orientation, dpi etc when I set class .code60 on a code block, the font will be such that 60 characters fills the width. We can assume that the width is always 100% if that helps.
