Advanced Web Development
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
 
User Name:
Password:
Remember me
 



Go Back   Dev Articles Community ForumsWeb DesignAdvanced Web Development

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Display Modes
 
Unread Dev Articles Community Forums Sponsor:
  #1  
Old January 23rd, 2007, 03:06 AM
Akdor 1154 Akdor 1154 is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Dec 2004
Location: Center Canyon in a Raptor
Posts: 34 Akdor 1154 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 4 h 28 m 44 sec
Reputation Power: 13
Get Text to Fill from the Bottom Up

Well, the title says it all - is there any way to get text to fill from the bottom up (while still reading left-right,top-bottom)? It can't be that hard, can it?

Reply With Quote
  #2  
Old January 23rd, 2007, 08:17 AM
MadCowDzz's Avatar
MadCowDzz MadCowDzz is offline
I'm Internet Famous
Dev Articles Frequenter (2500 - 2999 posts)
 
Join Date: Jan 2003
Location: Toronto, Canada
Posts: 2,886 MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level) 
Time spent in forums: 1 Week 16 h 19 m 35 sec
Reputation Power: 17
I developed this test page... does it answer your question, or did I misinterpret?
I've coloured the important part.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<title>Test</title>
<style>
#page {
	position:absolute;
	bottom:0;

}
</style>
</head>

<body>

<div id="page">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut tempus. Nulla in ligula. Morbi sit amet felis at purus viverra nonummy. Maecenas ornare lectus ac massa. Nulla sit amet pede. Sed ut pede. Cras porta pharetra velit. Mauris eleifend dui eu felis. Vestibulum convallis dolor nec ipsum. Nullam a sapien condimentum tellus luctus gravida.</p>

<p>Suspendisse vel libero eu massa tristique semper. Sed lacus. Proin arcu. Donec luctus. Donec dapibus felis ut enim. Proin cursus dui vitae purus. Sed suscipit. Proin blandit nonummy velit. Nulla non orci ut quam sagittis lobortis. Suspendisse potenti. Phasellus posuere lorem et lacus. Phasellus lacus felis, faucibus a, lobortis vel, accumsan vel, dolor. Morbi nisi. Maecenas et pede. Vivamus adipiscing diam vel pede. Sed euismod. </p>
</div>

</body>
</html>
__________________
Daryl's Homepage | My Blogroll | My Profile | Firefox supporter!
DevArticles Forum Moderator

"The net is a waste of time, and that's exactly what's right about it." -- William Gibson

Reply With Quote
  #3  
Old January 23rd, 2007, 07:46 PM
Akdor 1154 Akdor 1154 is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Dec 2004
Location: Center Canyon in a Raptor
Posts: 34 Akdor 1154 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 4 h 28 m 44 sec
Reputation Power: 13
Sort of, but not quite - I mean I want to fill a block (let's say a <div>) with text starting from the bottom-most line of text, then moving to the second botto- most line and start filling that, and so on, so the only non-full line is at the top, not the bottom. It's sort of hard to explain, sorry.
Thanks for the reply,

Jarrad

Reply With Quote
  #4  
Old January 24th, 2007, 08:39 AM
MadCowDzz's Avatar
MadCowDzz MadCowDzz is offline
I'm Internet Famous
Dev Articles Frequenter (2500 - 2999 posts)
 
Join Date: Jan 2003
Location: Toronto, Canada
Posts: 2,886 MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level) 
Time spent in forums: 1 Week 16 h 19 m 35 sec
Reputation Power: 17
So instead of:
Code:
<div>
this is the first line
this is the second line
this is the third line
</div>


You want it to display as:
Code:
this is the third line
this is the second line
this is the first line


I definitely do'nt think this is possible with CSS alone. Javascript, perhaps... but I doubt it. I don't know how the browser will know how to render the 'flow' of the text that way.

I can't think of a practical purpose either. But it sounds like fun!
Shame I doubt it's currently possible...

Reply With Quote
  #5  
Old January 24th, 2007, 08:46 PM
Akdor 1154 Akdor 1154 is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Dec 2004
Location: Center Canyon in a Raptor
Posts: 34 Akdor 1154 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 4 h 28 m 44 sec
Reputation Power: 13
No, nonono! Hehe, it's so hard to explain just in writing, so here's a picture:

Reply With Quote
  #6  
Old January 25th, 2007, 09:57 AM
MadCowDzz's Avatar
MadCowDzz MadCowDzz is offline
I'm Internet Famous
Dev Articles Frequenter (2500 - 2999 posts)
 
Join Date: Jan 2003
Location: Toronto, Canada
Posts: 2,886 MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level) 
Time spent in forums: 1 Week 16 h 19 m 35 sec
Reputation Power: 17
Quote:
Originally Posted by Akdor 1154
No, nonono! Hehe, it's so hard to explain just in writing, so here's a picture:


lol, I still don't get it... the text that image appears to be reading top-down as proper.

Can you explain what the text in that image represents? I know it's that tech-jargon-latin-stuff, but I don't see what you're trying to show in the image.

Reply With Quote
  #7  
Old January 25th, 2007, 06:55 PM
Akdor 1154 Akdor 1154 is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Dec 2004
Location: Center Canyon in a Raptor
Posts: 34 Akdor 1154 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 4 h 28 m 44 sec
Reputation Power: 13
Quote:
Originally Posted by MadCowDzz
lol, I still don't get it... the text that image appears to be reading top-down as proper.

Can you explain what the text in that image represents? I know it's that tech-jargon-latin-stuff, but I don't see what you're trying to show in the image.


It's pretty subtle, yes.
The box is filling with text from the bottom, as opposed to the top. i.e. it first fills a line at the bottom, when that line is full and can't hold any more it fills the second-bottom line, and so on - but keeps the text in normal left-right, up-down order. This makes more sense when you compare it to the default behaviour, of filling the top line, filling the second line, then the third, and so on. Gah, language really sucks for describing visual things.

EDIT: Here's another pic, showing what adding text to the box in a WYSIWYG editor would look like.

Last edited by Akdor 1154 : January 25th, 2007 at 07:51 PM.

Reply With Quote
  #8  
Old January 26th, 2007, 08:42 AM
MadCowDzz's Avatar
MadCowDzz MadCowDzz is offline
I'm Internet Famous
Dev Articles Frequenter (2500 - 2999 posts)
 
Join Date: Jan 2003
Location: Toronto, Canada
Posts: 2,886 MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level) 
Time spent in forums: 1 Week 16 h 19 m 35 sec
Reputation Power: 17
That animated graphic really does the trick... =)

I can't think of a quick answer for this, I'll need some time to think about it...
I urge anyone else to jump-in in the meantime.

Reply With Quote
  #9  
Old January 28th, 2007, 05:16 PM
ezenaide's Avatar
ezenaide ezenaide is offline
custom user
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Jan 2005
Location: olinda - br
Posts: 78 ezenaide User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 Days 13 h 29 m 52 sec
Reputation Power: 13
Send a message via MSN to ezenaide
i don't think it's possible only using css.
i tried using relative positioning and bottom: 0px; on a paragraph but didn't work.
__________________
Eduardo Zenaide
.
tem a ver?

Reply With Quote
  #10  
Old January 29th, 2007, 11:25 AM
MadCowDzz's Avatar
MadCowDzz MadCowDzz is offline
I'm Internet Famous
Dev Articles Frequenter (2500 - 2999 posts)
 
Join Date: Jan 2003
Location: Toronto, Canada
Posts: 2,886 MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level) 
Time spent in forums: 1 Week 16 h 19 m 35 sec
Reputation Power: 17
I agree ezenaide. The best bet might be to play with the padding-top

Reply With Quote
  #11  
Old January 29th, 2007, 04:13 PM
ezenaide's Avatar
ezenaide ezenaide is offline
custom user
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Jan 2005
Location: olinda - br
Posts: 78 ezenaide User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 Days 13 h 29 m 52 sec
Reputation Power: 13
Send a message via MSN to ezenaide
maybe using some css properties working with javascript.
i think it could control the height of the text in the box and calculate the padding-top to fit the entire box...

or you could use some flash...

Reply With Quote
  #12  
Old January 31st, 2007, 12:19 PM
idealviews.com idealviews.com is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Jan 2007
Location: India
Posts: 13 idealviews.com User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 31 m 49 sec
Reputation Power: 0
This will surely be helpful to you!

hi i know this is something a trick to use! but is certainly useful for you....

Please note the comments after the code....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="50"><marquee direction="up" scrollamount="0" dir="ltr" height="50" behavior="alternate">All i need is<br>
a Break</marquee></td>
</tr>
</table>
</body>
</html>


~~~~ Putting scrollamount as 0 makes it static & scrollamount as 1 or >1 makes it move .... but it does the trick exactly as required by you!

Just post, if it worked for you.

Reply With Quote
  #13  
Old February 1st, 2007, 01:47 AM
Akdor 1154 Akdor 1154 is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Dec 2004
Location: Center Canyon in a Raptor
Posts: 34 Akdor 1154 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 4 h 28 m 44 sec
Reputation Power: 13
Not quite, sorry That just keeps the text at the bottom (and breaks completely in Opera), as opposed to changing the fill behaviour.

Reply With Quote
  #14  
Old October 19th, 2011, 11:41 AM
scrupulosis scrupulosis is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Oct 2011
Posts: 1 scrupulosis User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 33 m 33 sec
Reputation Power: 0
Got It !

We first reverse the string in PHP, then flip each character in CSS and then the entire div.

This reverse all character and put a span between each of them
function bottomUp($str){
$str = preg_replace ('/\s/us','&nbsp;',$str,1);
preg_match_all('/&.{3,5};|./us', $str, $ar);
return '<span>' . join('</span><span>',array_reverse($ar[0])) . '</span>';
}


This is our CSS where we flip .bottomUp div and each span it contain (this is for Firefox, check transform properties for your own browser)
.bottomUp, .bottomUp span {text-align:right;-moz-transform:scale(-1,-1)}

We could then have something like that in the called page.
<div bottomUp>bottomUp($mytext)</div>

Reply With Quote
Reply

Viewing: Dev Articles Community ForumsWeb DesignAdvanced Web Development > Get Text to Fill from the Bottom Up


Developer Shed Advertisers and Affiliates


Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 


Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.

© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap