Re: [css-d] There has got to be a better way

[Alan Gresley]

Alan Gresley wrote:

> 
> 
> Firefox (Gecko 1.9), Mozilla (Gecko 1.7) IE8, Opera 9.6+ and Safari 4 
> supports the proper rendering of this test case which shows the majority 
> of the element's width disappearing outside the left edge of the viewpoint.


To clarify this. An element with the mythical float:center would have to 
behave like a floated right element along it's left edge and behave like 
a floated left element along it's right edge. This would mess with the 
current implementations of overflow.



> 
> 
> The later test case was originally testing inline and block level 
> elements behavior around floats. Opera 9~10 and IE8 are the only 
> browsers that follow the Specs [2] which states.


Sorry IE8 does not render this correctly. I was getting confused with 
this bug,




where IE8, Firefox 3.5b and Opera 9~10 render it correctly. Your example 
is different since it involves floated inline content (images) within 
inline content.



-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] There has got to be a better way

[Alan Gresley]

Gillespie, Michael A (Mike) wrote:

> http://www.striking.com/

> That's pretty much what I did which is why I was seeing if there were other 
> ways;
> 
> The limitation is that you have to use your image as a background image to do 
> this.  I would like to be able to figure out how to wrap the text about the
> viewable outline of an inline image; like the example below where the "x" 
> chars define the image and the "T"s are text.
> 
> 
> 
> TTTx
> 
> Txxx
> 
> TTTxxTTT
> 
> TTTT
> 
>  
> 
> M 


Hello Michael,

Can you please bottom post. What you are seeking is the magical property 
float:center. This was discussed over a year ago on the CSS WG list [1]. 
One major reason that this is not going to happen soon is that 
float:left and float:right act differently in overflow containers. The 
initial overflow container is the  element.




Firefox (Gecko 1.9), Mozilla (Gecko 1.7) IE8, Opera 9.6+ and Safari 4 
supports the proper rendering of this test case which shows the majority 
of the element's width disappearing outside the left edge of the viewpoint.

Safari 3 Opera 9.10~25, IE7 show the this right floated element is 
contained by the left edge of the overflow container . Because of 
this simple fact, float:center is what one would say is impossible with 
the current limitations of the float model.

Another problem you would encounter is this,



and this,




The later test case was originally testing inline and block level 
elements behavior around floats. Opera 9~10 and IE8 are the only 
browsers that follow the Specs [2] which states.

"Since a float is not in the flow, non-positioned block boxes created 
before and after the float box flow vertically as if the float didn't 
exist. However, line boxes created next to the float are shortened to 
make room for the margin box of the float. If a shortened line box is 
too small to contain any further content, then it is shifted downward 
until either it fits or there are no more floats present."


Firefox 3.5b4, Safari 4 shows the inline content overlapping (not 
flowing around) the float that comes later in the source. IE7- fails 
this completely.

This overlapping of inline content over floats is a very well known 
Gecko bug,



and was first reported in 2000 is still needs to be somewhat fixed. The 
latest comment by David Baron indicates there a patch has now been 
landed but this opens other issues. I quote David Baron,

"It leaves unfixed a bunch of issues dealing with a line wrapping around 
floats that are in the line itself."


Even if you could use a mythical float:center, Firefox and Safari would 
show overlapping. Something like below.



x
TTT 
  xxx
T   
xx
TTT  TTT
   
TTTT



1. 
2. 


-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] There has got to be a better way

[Joseph Sims]

> That's pretty much what I did which is why I was seeing if there were other 

> ways;
> 
> The limitation is that you have to use your image as a background image to do 
> this.  I would like to be able to figure out how to wrap the text about the
> viewable outline of an inline image; like the example below where the "x" 
> chars 
> define the image and the "T"s are text.
> 
> 
> 
> 
> TTTx
> 
> Txxx
> 
> TTTxxTTT
> 
> TTTT



Hmmm. 

Considering inline images are treated as such, and images, as of now, are 
always rectangular, there would have to be an overhaul of how images are 
recognized by web browsers for that to happen. It would be nice if CSS allowed 
you to tell text to wrap through transparency in pngs or something.

~ Joseph



  
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] There has got to be a better way

[Gillespie, Michael A (Mike)]

That's pretty much what I did which is why I was seeing if there were other 
ways;

The limitation is that you have to use your image as a background image to do 
this.  I would like to be able to figure out how to wrap the text about the
viewable outline of an inline image; like the example below where the "x" chars 
define the image and the "T"s are text.

 

 



TTTx

Txxx

TTTxxTTT

TTTT

 

M 
I may not have gone where I intended to go, but I think I have ended up where I 
intended to be. -Douglas Adams 
Ignorance more frequently begets confidence than does knowledge - Darwin 

 

From: ke...@rodenhofer.com [mailto:ke...@rodenhofer.com] 
Sent: Friday, August 07, 2009 10:23 AM
To: Gillespie, Michael A (Mike); css-d@lists.css-discuss.org
Subject: RE: [css-d] There has got to be a better way

 

Try this...I've used it a few times:

http://www.bigbaer.com/css_tutorials/css.image.text.wrap.htm

Kevin



- Original Message -
From: Gillespie, Michael A (Mike) [mailto:mike.a.gilles...@usa-spaceops.com]
To: css-d@lists.css-discuss.org
Sent: Fri, 7 Aug 2009 09:53:53 -0500
Subject: [css-d] There has got to be a better way

I am laying out text on an angle to follow a background graphic.  There has got 
to be a better way that stacking floated divs and adjusting the width of
each one.  See http://www.striking.com.  Is there a better way to do this?



M



__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] There has got to be a better way

[Joseph Sims]

> I am laying out text on an angle to follow a background graphic.  There has

> got to be a better way that stacking floated divs and adjusting the width of
> each one.  See http://www.striking.com.  Is there a better way to do this?
> 
> 
> Hey, if there is a better way, I'd love to see it... the way you've
> approached it is a pretty creative solution IMO!
> 
> Jenni


Look's like the slantastic approach, right?

http://meyerweb.com/eric/css/edge/slantastic/demo.html

~ Joseph 



  
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] There has got to be a better way

[Jenni Beard]

-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Gillespie, Michael
A (Mike)
Sent: Friday, August 07, 2009 10:54 AM
To: css-d@lists.css-discuss.org
Subject: [css-d] There has got to be a better way

I am laying out text on an angle to follow a background graphic.  There has
got to be a better way that stacking floated divs and adjusting the width of
each one.  See http://www.striking.com.  Is there a better way to do this?

 
Hey, if there is a better way, I'd love to see it... the way you've
approached it is a pretty creative solution IMO!

Jenni

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/