I am building an ebook app, and for that I have a big chunk of text (the book) and I have to divide it into N number of divs with a special class. I manage to achieve somehow a result by counting the words and after N words create another div, but words count is not a really good parameter.
Is there any way I can fill a div (320 x 480) with text and when its full create another one? In the end what I need is the full list of divs one after another.
Any hint on what should I look for is much appreciated!
Thanks
No, because you can't work out programatically how big that text is going to be when it is ultimately rendered for display.
Why not let the device itself work out how much text it can display on a page?
I don't have time to work out the specifics, but something (admittedly hacky) you could do is add a certain amount of text to the div and then check how its scrollHeight compares to its offsetHeight. This is probably going to be really slow, and you'd have to have some way of comparing it before you actually add the text: scrollHeight is always equal to offsetHeight, until the text actually overflows, and that's exactly what you're trying to avoid. Maybe some kind of temporary div? I don't know. I'll leave the specifics to you to work out. ...Or ignore completely. Whatever.
Related
In my website, the user's username is always displayed at the top of every page (along with the site title, other page links, etc.) in a font size of "3"
It took me a really long time to figure this out, but it eventually came to my attention that the users with really long usernames ended up messing with the spacing at the top of every page and all the text gets pushed down a line, making the whole thing look ugly as sin (it's only visible to the individual user since it's their username, but I don't want any of my users seeing it at all).
I'm not asking how to find the number of characters in their name -- what I want to know is how I can determine the physical amount of space their name will take up and, in the event it will be too long, reduce the font size to 2, or even 1 if necessary.
The reason why a simple strlen() wouldn't work is because of the potential space differences ("Tragic Dionysus" takes up less room than "HERSHEYFEVER", regardless that the former has more characters in it).
An extensive Google search continually leaves me with more character counting methods, so I'm left clueless.
You cannot use PHP for this - because so much depends on front-end styling (font-families, font-size, font-styling, etc.). You can use jQuery to ascertain the element length, and apply certain functionality if needed:
HTML
<span id="box"><?=$yourString?></span>
jQuery
$(function() {
var box = $('#box');
if (box.width() >= 50) {
box.addClass('massiveLength');
}
});
Or, if you want to apply something to all elements, here's a jsFiddle showing you how.
It is fundamentally impossible to do this well on the server.
Instead, use Javascript to get the actual width of the element, then reduce its font size.
I'm just gonna toss this out, but if you wrap the username block in a an element and give it a max-width, it might solve your problem.
<span style="max-width: 50px; overflow: hidden;">The Username Goes Here</span>
how do you mark text/letters, just like in word or a PDF-file?
I'm trying to create an exercise where people have to mark a word or some characters.
e.g.
<h3>find the number in this sentence</h3>
<p>I like the movie Moneyball</p>
Solution:
<h3>find the number in this sentence</h3> I like the movie Moneyball
for each exercise, you know the question, the sentence and the answer.
and the thing that I want is, the value of the words you've selected
it would be nice, if you select a word or some letters (depending when you loose the mousebutton), than the background color changes into green (and the next time, the previous mark will be dissapear and starts over...
I thought on jquery --> .selectet() but there is so les information and I don't have any experience with that.
All help is welcome,
kind regards
you can use this jQuery Selectable plugin
I personally would wrap the text you want to highlight in a span tag and style the background color of the span:
Your text and the <span class="highlight">text you want to highlight</span>
To clarify ... I would pre-wrap the "correct" areas with the span and attach a click event so you can detect when it is selected. That way you can easily detect when they click in the correct location and work from there.
If you want to do it a different way you could style an input element so it looks like regular text and then use the selection information from that. You should be able to get the value string into memory and use the selection info to substring out the part they have selected.
I took this as a personal challenge since I can imagine a lot of uses. Here is a simple gist that splits all the words into dom elements and keeps track of words before and after it.
I came across to a weird problem that I am having a problem with. I have texts that I obtain from database with no character limit. What I am trying to achieve is that number of rows if that text put into a div width css property;width:600px
Sounds weird but I need to manage this server side because I am going to arrange my style before they are printed on the page, so if the number of rows calculated on server side is less than 10 I will arrange something in a way, if it is more than 10 I will do another way. Any possible way to obtain this?
Check imagettfbbox() function. It calculates the width of string in pixel. First remove new lines from your text and than calcuate the whole text length, than divine into 600px. You will obtain the row count.
But this is not suggested way. Better try to use css or javascript for this
Don't do this server side. There are enumerable client side settings and options that will affect this and a server side solution will never work properly in all cases. With JavaScript, it would be trivial to calculate the number of lines based on the rendered height divided by the line-height.
var lines = $('#somediv').height() / $('#somediv').css('line-height');
Does anyone know a clever way to create even columns of text using php?
So lets say I have a few paragraphs of text and I want to split this into two columns of even length (not string length, I'm talking even visible length).
At the moment I'm splitting based on word count, which (as you can imagine) isn't working too well. For instance, on one page I have a list (ul li style) which is increasing the line breaks but not the word count. eg: whats happening is that the left column (with the list in it) is visibly longer than the right column (and if there was a list in the right hand column then it would be the same the other way round).
So does anyone have a clever way to split text? For instance using my knowledge of objective c there is a "size that fits" function. I know how wide the columns are going to be, so is there any way to take that, and the string, and work out how high its going to be? Then cut it in half? Or similar?
Thanks
ps: no css3 nonsense please, we're targeting browsers as far back as ie6 (shudder). :)
I know you're looking at a PHP solution but since the number of lines will depend on how it's rendered in the browser, you'll need to use some javascript.
You basically need to know the dimensions of the container the text is in and using the height divided by the text's line-height, you'll get the number of lines.
Here's a fiddle using jQuery: http://jsfiddle.net/bh8ZR/
There is not a lot of information here as to the source data. However, if you know that you have 20 lines of data, and want to split it, why not simply use an array of the display lines, then divide by two. Then you can take the first half of the PHP array and push it into the second column when you hit the limit of the first.
I think you're going to have trouble displaying these columns in a web browser and having a consistent look and feel because you're trying to apply simple programming logic to a visual layout. CSS and jQuery were designed to help layout issues. jQuery does have IE6 compatibility.
I really don't think you're going to find a magic bullet here if you have HTML formatting inside the data you're trying to display. The browser is going to render this based on a lot of variables. Page width, font size, etc. This is exactly why CSS and other layout styles are there, to handle this sort of formatting.
Is there any reason why you're not trying to solve this in the browser instead of PHP? IE6 to me is not a strong enough case not to do this where it belongs.
I've been racking my brain about an easy way to generate an HTML table with rowspans with PHP that would look like this, numbers indicating each cell's rowspan:
I noticed that there is sort of a pattern in the rowspans if you go from left to right, top to bottom: 1,3,7,1,1,1,1,1,3,1,1. I'm not sure if that matters.
Also, I wonder if it's possible to use any method for the table above for a table like this:
maybe addressing your second example first is easier, but it might be adapted to the first example.
the structure of the tables in html is obtained using the rowspan an colspan properties.
try to picture the table as a closet, the rows as drawers and cells as boxes inside those drawers.
with these properties, u can "merge" the cells throughout rows and/or columns.
my approach would be to set a minimal block with the appearance and data that you need, ie your second example, and write it down in html.
the "php-cycle-the-thing-up" part would require you to use that html "template" in the loop dropping your recordset data in the td portions of the html.
in that way, i think you might get what your looking for.
on the other side, if you need the php to create the table dynamically, and merge the cells automatically in a set pattern, or even ignoring the pattern and simply adapt the structure as the data is coming, it would probably be better to look at the structure from the end.
because of the way that tables are built with html, nesting table-tr-td, building cycles with this look is tricky. have you considered simply nesting divs?
i'm new to stackoverflow, i wanted to comment but by the time i finished this, i couldn't remove the answer nor comment the question, sorry if this didnt quite help you... :S
write down, come up with the recursion formula for the table. you need to come up with the math with the least number ideally ZERO conditional statements.
it's not that hard. for a desktop, i use three columns if it detects a mobile devices, my php automatically switches to 1 or 2 columns depending upon screen size