well hello friends
welcome back to browser hacking today we
are going to take a look at
css floating objects and
this is something that um i have been
postponing dealing with forever because
i
don't really feel like i understand how
floating objects work
so step one today is figuring out
sort of how they work and then
implementing them in our browser engine
hopefully so let's start by just making
a little test page we'll call it
f.html which is not a directory of
course
so
my understanding of floats is that they
sort of drift to the left or right
uh and then text flows around it um
and i don't have a very nuanced
understanding of it so
um let's just go ahead and make
something here like um
i don't know left lefty and righty maybe
something like this float left
float right and
um
just give these guys some color green
and
width
all right
it will make this guy a little smaller
so we can tell them apart
and then
we'll put these guys here and then we
need some
lorem ipsum
but i don't know the rest of it so we're
just going to say laura mips from over
and over
whatever so
what would this look like in firefox
this is not
exactly what i had in mind what did i
mess up
i guess i thought this guy would float
to the right
[Music]
um
so already you can see that i don't
understand floats
where did the right one go he's up there
he's
zero height um
do i have to put something inside of
them
oh oh oh i didn't spell righty right
okay well that explains that so
maybe we'll put lefty and righty inside
of these things so that we can
see that so this is all
um pretty sensible so far so basically
like
um the text has to flow around these
things
and um
what happens if we put a sort of a div
with these guys inside of it and then
new div down here
then they are still
floating up here
okay so that part is a little bit weird
um but i'm sure we can work this out
okay and then
let's make a couple more so maybe like
lefty two and righty
two what happens if we put these guys
further down
like down here
then they float like that
okay um
so
maybe we should have made a class for
these things
floating
my web development skills are top-notch
as you can tell
it's actually it's something that brings
me some amusement that the people who
make browser engines are
very often quite clueless about
making
web pages
wait what do i actually want to put in
that class i don't know what i was even
thinking
anyway let's just move forward so what i
really wanted to do was to
come up with some different color or
something for these guys
so like orange and
i don't know magenta and maybe shrink
these boys a little bit
something like that
okay and
let's just put r2 l2 in those guys
okay so
this seems like a pretty interesting
test
and let's see if we can make our engine
do this
so this is definitely going to be
um interesting because i don't
know how we're going to deal with it
um
so currently this is what we get
not the most correct layout obviously
so one thing is that we want
to starting out we want to like get all
of these
floating um elements and just take them
out of the
flow so
we have is absolutely positioned oh it's
floating oh okay it's floating
what's that used for
hmm
okay wait so we already track whether
something is floating or not but we
don't really do anything other than
um we don't use it as a
um we ignore it when we are figuring out
which proceeding sibling to place a
block
underneath looks like that's the only
thing we do with
floating floating things although
looking at this here it
does feel like um this guy right here is
placed
relatively to this guy although i'm
guessing that what we're really seeing
here is the fact that these are in
separate divs so if we bring up the
inspector here we can probably see the
outline
so we have this div up here with these
two boys
and we have this div with these and then
finally the div with the text
so apparently
the floating elements here floating
objects should
sort of
[Music]
how do you express this like they should
sort of bubble up to the
body i guess
um or
is it that they just um they bubble up
to the nearest
positioned ancestor perhaps
let's go and look at the manual um
so uh
wait
wait where are the details for this
float
[Music]
positioning the float
okay so
the float property specifies whether a
box should flow to the left or right or
not at all
it may be set for any element any
element but only applies to elements
that generate boxes that are not
absolutely positioned
sure
but where do they float to
they uh let's see
a floating box's outer top may not be
higher than the top of its containing
block
hmm but why
is the
so i feel like the containing block of
these floats should be this div
but i'm guessing that it's not
[Music]
um
let's see generated boxes acts as
containing blocks
for descendant boxes in general sure
um details
any notes about floats
notes about floats
uh this is too much
spec language for me okay let's just
wing it
and then we can adjust it later if i'm
wrong
so um intuitively i do feel that
they get hoisted up to here
so
[Music]
the way we compute the containing block
let's see for
something that is position absolute um
then we look for the nearest ancestor
which is itself
uh wait can't contain boxes with
position absolute
so that is if it is itself
non-statically positioned
i kind of feel like
maybe this is where
um float
maybe these should be here too so if
float is not css float
none um
let's see if that is the general right
idea
okay so now we have
yoinked these up a little bit um
so let's see
so we still have these divs but the
containing block of
lefty and righty is actually going to
become
[Music]
i guess not the body actually because
the body is also statically positioned
so we'll go all the way up to
the initial containing block box um
which i'm not completely sure is correct
but
um at the same time like
what would be the rule that would
move it under body
um
hmm
so
if the elements position i'm just trying
to work out here how we determine the
containing block of
some block um
if the element has position absolute
then it's determined and so and so away
so i'm just kind of conflating float
floating with position absolute
but maybe that's incorrect
i just um
i guess the reason that i'm conflating
those concepts is because
uh both position absolute and floating
elements are sort of taken out of the
flow so they don't um
they don't participate in the normal
flow
uh although floating elements
affect the normal flow more than
position absolute elements do
so
okay let's not overthink it let's just
roll with
um we we just say that the containing
block of a float
is computed the same way as containing
block of an absolutely positioned
element
so then what we want to do
is
um
i guess
we want to put these guys on the right
uh these guys on the right side and
these guys on the left side
so
um let's see how we
do layout currently of these block
formatting contexts
so a procedure for a block
formatting context um this this is all
like one block formatting context
uh that we care about here and so the
pre procedure is currently
that actually because it's the initial
containing block we'll go to the special
case
um and first we
compute the width and the height
of course the initial containing block
is always the width and height of the
viewport so that's easy and then we
lay out all of the children
and then we
lay out any positioned descendants so
i think here is where we would do
um or actually we need to do the floats
before we lay out our children because
the floats will determine how much space
is available for the children so
it actually becomes kind of
um kind of obvious here that layout if
layout mode is default
um or wait no we always have to do this
um layout floating
children floating descendants let's say
okay and then
copy paste layout absolutely position
descendants and
floating descendants instead
okay
and then we iterate all of the
ascendants of the context box of this
block formatting context and we just
check if
style float is not css
float none and
the containing block of the box is
this guy right here this iteration style
is not efficient
um but whatever
floating descendant
okay and then
we'll need a function for that as well
so
floating descendant
so what the heck do we do with our
floating ascendant
so a bunch of the basics i guess are the
same as absolutely positioned like um
doing all the box model calculations
um
[Music]
but then we start to lose the
similarities so
we'll just do a little copy paste here
for now
and
let's see and then we're computing the x
and y but we'll do those
ourselves actually do we even care about
any of those things
we care about the width and the height
so yeah we care about computing the
width and the height and laying out
whatever is inside of it
it will ignore all the other stuff for
now
yeah let's just do that for now and
then we got to place it to the left or
to the right so
let's search box style float
is not floating on
okay so now we know how white it is
we've laid out everybody inside of him
and computed the height
all that's left to do is place it
somewhere so
if box style float is css
float left
um should we like
add it to a i guess we could have like a
vector of
things that we have floated left and
things we've floated right
so something
like left
boxes floated left
left floating boxes
no template named vector wow this is a
very bare bones header
right floating boxes okay i like those
okay
and then and left floating boxes append
box
so the offset of this box
set offset will be
placed on if we already floated
something else left then it has to go on
the right of
that um
so if m left floating boxes is
empty if it's not empty we have already
floated something else left
x is a floating boxes last
um
[Music]
oh dang it how did we figure out um
we need his effective offset
plus his width
um
so okay so we'll do it this way auto
previous floating
um
i don't know i don't want to call it a
sibling because it's not necessarily a
sibling
um in the
um tree sentence right so
previous floating box let's say we don't
have to get too informal here but
uh box is better than buddy um
last all right so star that
and then previous floating box effective
offset x
plus previous floating blocks
would that's where we'll place the next
box
and x and then y
this becomes zero in this case
does this make sense i really feel like
this makes sense okay so
else in the right-handed case
um we have to look at the right floating
boxes
and
yeah so now it's the person on our right
so we need to put our x
at um compute now we're computing the x
of this guy right here imagine this guy
so his x value is the x value of
his um previous floating box
minus the width of the current box
like that
and then we append it
oh is this sensible
not exactly sure but we'll see i
didn't really do what i wanted all right
all right
so what is wrong with this
are we even doing these things at all
floating descendants so one thing is we
have to stop trying to lay out floating
descendants
i think maybe this code runs and
everything but then we
overwrite these coordinates because
we're not skipping overflowing the
sentence in the normal layout code
so layout block level children
um it knows that it should not
do absolutely position children but
we need to amend this and say if box
float isn't box style float
wait don't we have this floating
it's floating yeah
that's a thing okay okay so
um that's what we should be checking
yeah yeah that'll be nicer
i should have been doing this the whole
time
yeah let's try that again
okay so some progress uh
is not quite right
but um
[Music]
but some things about this are better so
oh yeah
we're going using left here instead of
right so we're looking at the wrong
vector
that'll definitely mess up muscles up a
little bit although i think we're still
not quite good
um
so
[Music]
left and right
this guy um needs to be relative
to the
uh the green here so these these the
them
okay so the red and the orange are kind
of behaving the right way
right like they're supposed to be red
first and then orange
from left to right but the green
is bogus because it's not starting at
the
we're not starting from the right edge
so we got to fix that
and the problem here is that
um if we don't have any
initial uh previously floating boxes we
need to say x
is the width of the
containing block so contain context
box so with context box in this case is
our containing block
and let's hammer that point home by
saying containing
block is context box
um
oh minus box with of course
of course almost there
because now we were putting the first
box so it would stretch
out past the right edge of the window
okay so we are finally getting somewhere
uh now we have to
get the text to flow around these bad
boys
so
[Music]
uh uh uh how do we do that
i guess when we're doing line layout
we need to
um let's see so if we're laying out this
line of text right here
we need to start not at the start of the
containing block but rather start at
past the right edge of any
left floating elements that intersect
this line
and we need to stop
right before the left
edge of the most recently right floated
element that intersects this line
so we should only use this space right
here
okay so
i think the block formatting context
needs to expose
the uh floating boxes
so let's see um
looks left
floating boxes
something like this and then we'll be
able to look these guys
up
okay
um
yeah so when we do line layout basically
we
[Music]
we compute the available space somewhere
how do we do that we split into lines i
guess
so normally what we do here is that we
just
um we just take like um
the containing container
so split into lines works this way that
you
call split into lines on some kind of
layout node that you want to
contribute lime fragments to a container
and
right now we just use the container
width this is the
the available space variable and
that will basically always use the
entire
width here but the trick
is that we have to
constrain this so
really what we want is
the container width for a given
y value and then we can tell it which y
value we are
um splitting for does that make sense
yeah because then this line here will
have a certain y value
right and then this one will have one
and when we get to this guy right here
um using the y value we'll
be able to determine that it intersects
this floating element but not this one
i think that makes sense so
with at y let's say
or um available
y
and
do we have to pass in the y
where would we get the y from
the line boxes know how tall they are
um
blind boxes have not been placed
vertically yet
okay that's a bit annoying so
just imagine that we have a y here but
where do we get the y from
let's see so when we do inline
formatting first thing we do is split
all of the descendants of this block
into
lines sure so
now this would need to
keep track of the y value we're
currently doing somehow
uh
how does that work in practice
maybe there's some obvious solution here
that i'm
missing um
so let's see where do we set the offset
of
fragments
here
so
we don't actually place fragments
vertically
until we lay out entire lines and
we don't know how tall each individual
line is going to be
until we lay it out
i wonder if this means that we have to
enter leave splitting and
layout
i guess you could do that like you could
split
uh one line and then lay out that line
and then split
another line and lay out that line
but
so the problem is when we're splitting
this text here
um this entire text blob
currently we only we only have the
available width
as an input right so we can measure how
much text fits
on one line but
we are not tracking the y value of the
current line that we're on
okay so let's do a crappy solution
and then we'll have to come back to this
with something more clever so i think
what we'll do
now is that we'll just say
um we'll just use the css line height
property
and multiply that with the
um with the current line
index maybe something like that
i guess that could work so
line height yeah okay let's try that so
split into lines
and then
let's say available
available with his
container with y
container
why can't i reach into it
blind boxes size
times
yeah this is really kind of janky but um
let's
let's try it
it was um very goofy
just call it line height all right so
what is available width at why
and to be able to compute this we
actually need a pointer to our
formatting context
so i think split into lines
rather than taking a block box it should
take a block formatting context
so let's see
yeah so we have to change the definition
of this function
that'll be okay
this is probably a healthy change
regardless
so
let's see container available with y
let's say context available without y
okay then we can put this in here
available
with at
and
i guess we could do something
a little bit like that so we're in the
middle of lines
and we're hit testing basically
but um
we're available with at line index maybe
is
is more expressive because then we take
the awkwardness out of split into lines
and we
move the awkwardness into the block
formatting context at least
that's probably better so let's do that
um yeah let's do that fine
um block formatting context
client index okay cool
and then now we just have to fix
all of the implementations of this
but most of these are going to be pretty
simple
okay
um okay so here is another instance of
the available width so
continue
nine boxes size
and
replaced box um splitting is kind of a
mess
right now that's something we need to
look at it definitely feels out of place
but we'll get to that
okay so
now it's just the text nodes to go
context
okay and then text splitting our little
container is
context context box
and are we good there
so we never actually implemented uh
available with at
line but that comes
comes now i guess after we fix up all
the complete compilation
problems so here we have to pass in the
context which is us
um
although he expects a block formatting
context and we are not at
so already kind of bungled that a little
bit
but what we can do is we can
cast our parent context because um
inline formatting context you never have
like there's a stack of formatting
contexts and the um
the root context is never going to be an
inline formatting context because
there's always a block parent if any
inline context
so we're going to cheese it here and
just
[Music]
cast our parent context to a block
formatting context
and then we just need available with
that line
um
although perhaps perhaps i was foolish
like
because living is an inline concept so
why do i want to block formatting
context for that like
what am i that doesn't actually make
sense
so let's go ahead and change that
to take an inline formatting context
and then we'll change
that and then some things will not
compile so we have to fix them
but yeah it is good that that came up
actually because we do want to just pass
this
yeah i don't know why i was thinking
that we have to pass a little block
formatting context to
line splitting
there's that tunnel vision that you can
get when you're doing this mechanical
refactoring
block formatting context yeah because it
makes more sense that you would
have available with that line for an
inline formatting context
i think
i think um let's see
okay so
right now we can simply return the
context box
with and things should be working as
they always have
and then we can
go ahead and tweak it
ah come on now come on
so things
still work the way they did before
presumably yeah
it's just that now we're actually asking
the formatting context for the available
space and we give it a
line index so let's go and see if we can
use that for something
um
so
let's see line height
let's use the line height as we talked
about
okay and then
um we have to look at the
right edge of the last
left floated thing and the left edge of
the last right floated thing
so
um first available x or let's just
say like x is where we can start putting
stuff so
if um
or left
um
if parent we need to get to the
parent context oh right so we have to go
to
um
we have to go to the parent context
because the parent has the
has the floating elements
floating boxes so this part is a little
bit
iffy
let's see
so we'll call that the block formatting
context
so
[Music]
if we have a non-zero number of left
floating boxes then
left is pfc left flooding boxes
last
um
effective offset x plus
width
okay and then right is going to be
context box width
and we do the same thing for right
floating boxes
except here the last right is just the x
of the last one
okay
um oh wait wait wait wait we need to
actually make sure that they
intersect right we have to check the y
value so
i have to find the first box that
actually
intersects this y-coordinate
so y is this is where we
um get a bit fudgy
it makes me this is a hack
total hack since we don't actually know
um the final vertical um
position of lines here
y position let's see okay
i can guess yeah
hmm
so let's just iterate through the left
floating boxes backwards
and say if
left loading boxes at i um
if floating box
um i don't want the absolute wrecked i
just want the wrecked
but how do i direct from a box
i have the effective offset and the size
so that's basically the wreck that i
care about
let's just do it this way for now
okay and then if rekt intersects
um
contains vertically
y
then it's a hit
[Music]
wait what happens if you have like a
third one
now i am getting the curious here
what if you have a third one that's
actually
large again
okay so it doesn't it doesn't go under
that's at least a relief
cool
um
so let's shrink these even further then
maybe that's too much
okay all right
so if we hit it
then we have to stop there so left is
um
guess wrecked right
plus one yeah
and we break here
and then we do the same thing for the
right floating boxes
so the first time we hit one then we say
that right is
uh wrecked left
minus one
it's probably there's a bunch more
nuance to this
i mean obviously there's more nuance to
this but
yeah that didn't work at all i wonder if
we're even looking at the boxes here
though
let's see
um
so
[Music]
i wonder if we have the wrong
idea of a block formatting context
because um currently
we i think we create a new block
formatting context
for each block level element that we
enter
so when we lay out
this div right here each one of these
divs
sort of creates its own block formatting
context
and
[Music]
maybe that's the wrong idea
i could imagine that that's causing
trouble here let's see
because i recently reorganized all the
code to be
in terms of formatting contexts but i
did not
really tighten properly what it means
to establish a block format in context
so i can show you how we instantiate
these things
so when we want to layout inside of a
layout whatever is on the inside of a
box
we just look at the type of box and then
um if it is
a box with block level things inside of
it then we just create a new block
formatting context but i
think maybe that's
not the right way to do this
um instead we should maybe
hmm
we should maybe continue in the context
that we have
which is a bit weird
but it makes sense that
this is the region in which floats
interact with other elements
because if we look at this oops if we
look at this list of
situations that create block formatting
context
it doesn't say um
that at least i'm not parsing out here
that
every um block creates a new formatting
context
rather it's more like special situations
the main problem like here we could we
could just like
check here if we're supposed to make a
new one
and we make a new one otherwise we use
the existing one i guess
if um
if the box needs its own block
formatting contact so if
um needs
new block formatting context box
creates um creates block formatting yeah
that's pretty good
then we make our own new one otherwise
we will run it in this one
um the problem is that we cannot
retarget this one because each format in
context
currently the way it's made is that
we have a context box which is provided
when you instantiate a formatting
context but
it seems like maybe this idea was a
little bit misguided
that's currently how we keep track of
the containing block
but
so let's see how would we express this
first of all so static
pool creates block formatting
context
and then we had a bunch of criteria like
the root element
so
if it's the initial containing block
true
if it's floating
if it's absolutely positioned
if it's inline block
if it's a table cell
or a table caption i haven't implemented
that yet so
fix me table caption
uh anonymous table cells
block elements for overflow yeah so
there's xp
uh flow root i don't have that one
either
um
i guess that is some new thing
the element generates a block element
box that it establishes a new block
formatting context so it's like an
explicitly a way to force a new block
formatting context
that's interesting i that is
not something i know i knew about but
i'm sure we'll get to doing that
do we have display flow route actually
box
style um no we don't
okay uh
flex items we don't have any flex stuff
yet
i'm just putting these in
fix me columns
oh turn false all right
all right so
what happens if we simply retarget the
context box
as a little hack here so
maybe run should take the context box as
an input
rather than having it be a function of
the
or rather have done having it be a
parameter to the constructor
if you should just say who are you
running it on
we could try that
um although
i guess not just for testing this out we
can um
let's just turn this into a pointer and
have a way to retarget it
something like that
and we'll just start
okay
set context box box set context box old
box
okay i feel like this is going to fall
apart terribly but
um
but we need to improve this abstraction
okay it didn't fall apart terribly but
in fact it didn't really seem to do much
at all
it creates block formatting context
let's see reusing current bfc
i mean
we need to be sure that this is a bfc
actually if um
see
that's interesting so are we reusing
this
dfc at the very least
we are okay
available with adline
let's see
lefties let's just print out how many
lefties and righties we have
in the parent block formatting context
to see if we are remotely in the
in the right area of thinking here
we are definitely not even getting here
okay
um available with that line
oh oh because we forgot to do this
when we do um text node splitting i only
did it for blocks
and replaced element
available with
here we need the context
available with that line
line boxes size
yes
this slightly awkward
but i think that should do it
okay so now we can see that it is
actually constraining the
available width because the lines are
differently long here of course we're
not placing them correctly on the
x-axis yet but at least we are
constraining the line layout to the
available space
so that's progress very very cool
so how on earth
do we get these to
pop up at the right x i guess when we
actually place
the line fragments um
let's see where's the x offset right so
the x offset here
hmm so we have to start at an
offset
the offset will be
if um
so if bfc
left floating boxes is not empty then
x offset is bfc
no we gotta do the intersecting thing
again oh dang it
well we need the logic from up in the
other function
um
available with that line
maybe this should extract some kind of a
struct with information
um what would we want here
available space for line
or um
um
line
space after float
i don't know
available space info
space online or line info
start x let's say or we can actually
call it like left and right
um yeah that's fine
[Music]
so
let's put that uh wait
wait wait
um
so this stuff comes out here
and then we don't need the available
width because actually this
is just
available space for line
yeah something like that
and oh and we need the context
rights of this okay so this
okay and then intro
[Music]
okay now we have this information
so that when we want to compute the x
offset
we can say that the x offset is
um available space for line
for this and the
line index which we don't have currently
but
we can compute
left okay and then
i think that's probably just a matter of
um we can just do it this way actually
okay we're starting to get somewhere
it's still not exactly right but
because we're just bleeding over here
but
starting to look very interesting
oh
also what the heck's going on with l3
here
hmm
it's definitely not in the right place
so
wait are we messing those up because
they were good before were they not
this needs refactoring
okay yeah so
this stuff is in the right place it's
supposed to be at zero so why does that
change when we
um use the available space for line.left
because that should be zero
because the text inside of here it
should be in its own
it's in an inline formatting context
which has a block formatting context
parent
which should be the float floating
element itself
so there should be no
[Music]
um no floating object
pushing it to the right
left is zero by default sure
um
maybe here we should do this thing we
talked about where we do half the line
height
um
[Music]
so well okay so let's not overthink this
right now
we can just say
so that part is probably fine but then
let's go ahead and
short circuit here if um
or does that make sense though
no because it breaks this thing
hmm
wait i'm so confused by this we have to
figure out what's going on
so why are we shooting these guys to the
left and right so much
also like why do they bleed into
here i feel like the calculation is not
we're missing something right
maybe it's the um
maybe it's that these are actually
supposed to be
it's like they're like right at the edge
of the viewport right so that doesn't
seem
because the margin here it feels like
it's actually accounting as if these are
further in
so did i just mess up that containing
block thing that we did originally
containing block here
i didn't do that
they don't show up at all okay
yeah we'll probably have to come back to
that particular thing
but um
but let's work out why these end up like
this
nearest block ancestor
so really the containing block of
a floating thingamajig
should be the nearest block ancestor
that creates its own block formatting
context
which we don't know how to compute here
but we know in formatting context
so
let's publish this helper
and then we can ask it um
something like that and
well ancestor and it's not a block box
um
either if ancestor is not a box
or if the ancestor does not create a
block formatting context
phew okay
and then we can say if is floating
turn nearest block ancestor that creates
a block formatting context
phew okay
let's see how that goes
that didn't really solve it i was hoping
that would be the solution to the
fact that it's like touching the left
and top
edge of the viewport
[Music]
but now that i think about it actually
the nearest block ancestor that creates
a block formatting context
is the initial containing block
so i have probably achieved nothing here
because
it's going to be the root element so the
html
element actually oh the root element of
the document
so it shouldn't be the initial
containing block but rather
the root element um
[Music]
so this was wrong um
box so if it's not anonymous
let's say let's have a way to ask this
is a root element
box h
so how do we determine if something is
the root element
well if um if we are anonymous which
means that we don't have a corresponding
element in the dom we cannot be the root
element
otherwise node or the
the dom node
uh s html element
that is oh no no wait hold on um
is html html this is how we look this up
and then we need to include that
um html html element
so because
if we look at this page right here
then the this guy here html this is the
root element
not the initial containing block but
rather the root element i was
i was mixing those up and
i'm not sure it actually matters much in
this case
also why is it not the body though
because if you look here like these um
we have um we have eight pixels of
margin on the body so i would expect
these floating floaters here to
be in the body elements block formatting
context
this is a little bit confusing to me i
don't i'm not sure why it's like that
um wait why don't you like that
oh because it's called html colon colon
because of the name species
and we are getting pretty deep into
css today again
i hope that uh it is possible to follow
along
um dang it
so
why are we not drawing these anymore
block formatting context is flattening
um layout floating descendants because i
only i only call i have floating
descendants in the layout initial
containing block
so i don't call it in the regular
block which
is wrong it needs to go right here
because we have a we have a special
shortcut here for the initial containing
block
because it behaves a bit differently
like the width and height are hard coded
to the viewport
okay so still not in the right place
but at least i feel a little bit better
about the code
so what is up with these boys
though see
uh let's look at the layout tree so the
l
let's look at l2 for example
l2 is in lefty 2 lefty 2 is float left
so um
that should mean that we create a new
block formatting context
uh if it creates one which if it's
floating it will
but why does it start um 200 pixels into
it
that's so weird
and what happened with l3
right here's r2 starts at 814
like where is that even it's like
outside of the
screen
um what the frick
so the available space competition is
definitely screwing up
i guess maybe we're getting a negative
number here somehow
let's see what we are actually computing
left yeah let's see computed info
lefties or let's say
lr that we have how many so
and how much space
i don't know that's it's a bit weird but
um
my floating box is size
right folding boxes size info left and
f4
right because something here is not uh
the way it's supposed to be so if we
have like a left
that is to the right of the right for
example
i guess that would create trouble
um
okay so what's going on here we have a
negative number in the right
that is suspicious
why is that
why do we have negative numbers
wait wait wait wait so these
um i wonder if we are failing to create
a new
formatting context inside of those
inside of here let's see
layout inside
are we just messing this up
um
let's dump out the node that's causing
us to do this dump tree
box
so creating new formatting context for
html but but we're not doing it for
those freaking
floaty mcgoats
why not
we should be doing it for those boys but
we're not that is definitely
a problem
so i have floating descendant
and which we call layout inside on the
box
and then we determined that the box has
inline
children which is true so we don't
create a new block formatting context
okay all right so that's definitely a
mistake um
so i think this needs to be reorganized
here that
if it creates a block formatting context
we just have to make one
return all right
and then
otherwise reuse the current one does
that make sense
let's just do an assertion here
look at that
starting to look kind of the way it's
supposed to
let's get rid of that printout which is
causing tons of
flag oh man
um my head is full of information right
but now starting to come together
although of course we're still
um going past the edge here which i
don't like
uh also should these bubble up to the
body somehow i'm not sure
why would they though like what is what
is causing
the body here to create a formatting
context
what is the computed style display
where's the display property
display block sure
so what is the position of body
static
and
um what is the overflow of body
visible oh is that why this is
happening
um where was that
no value other than visible in clip
all right
contain layout um
yeah i don't i don't get it
because html clearly has no margin
so these floaty floats
are relative to the body
i guess these are the relevant
properties here so
why
hmm well if um if anybody knows the
answer
why why are these floats relative to the
body rather than to the
html element i would love to know why
otherwise
i'm eventually going to figure it out
but maybe not today
um so
what else
the space issue right
so why do we allow whole words
maybe that's just us being stupid
although i feel like we should
we should break here right this should
be broken why is it not broken
are we not looking at the right
information so let's see
the right edge
so the wait so we go backwards
through the right floating boxes oh wait
does that mean that we're starting here
and we're breaking
um we hit this box every time maybe
is that the problem
so do we need to go from the
other side let's see
wait so
we're iterating backwards through the
right floating boxes so this is the
first right floating box this is the
second this is the third
so the first one we compute his rect
here and then we determine that the rect
of this box vertically contains the y
value we are interested
in and then we say okay so
info.right is rect.left minus one
hmm what's wrong with that
what is wrong with that i mean it you
can tell here that
the way that they cascade it kind of
shows us that something is going right
but um
not exactly right
okay fine let's let's add those print
outs back so we can see what they
actually
say um
so let's see when we have three three
the available space
because these are the last lines so this
is the top
these are the top uh lines from the
start here so starting at 220 pixels
and ending at 535
pixels and then ending at 555 pixels
okay so that
that's consistent with what we're seeing
here right like there's more space
available
um
but are we are we thinking stupidly
about this
let's get the here to
measure a little bit
all right what's going on here
we should make some kind of a ruler in
the
web engine so where the heck are we here
this is 5
356 so let's say 535 pixels
is right here
which means that this is completely
accurate 535
that's i mean that's like one pixel off
and i did minus one
actually so that is completely right
and what about here is that 220 that's
220.
so the available space that we inform
mr line splittington about
is 535 minutes minus um
220.
uh okay
so i'm not sure why but i'm guessing
that
we just um
are not completely responsible with that
information somewhere
but i am gonna go ahead and
i'm gonna go ahead and commit at this
point anyway because i've been
sitting here for quite a while and we
have made enough progress that i'm happy
with it for the time being
um
let's just see that we didn't break any
of our typical websites
uh home page looks good welcome page
looks good
everything is nice and normal
clickity clack yeah
i wonder how acid 2 is affected
now that we actually care about floats a
little bit
it's definitely changing there are a
bunch of float tests on acid too so
it makes sense that it would change uh
acid one is even more floats let's look
at that
yeah it's gonna gonna need more work
obviously but
it actually does look a little bit
improved
although clearly not completely
completely right
um yeah
all right all right all right this is
um a bit of a bit about this and that
so let's see
libraries
just adding that is root element
so it's true if a uh the
layout node corresponds to
html
um okay
and then everything just feels so
interdependent
yeah so of course there's like there's a
monster hack in here which is
unfortunate which is the fact that
um we're approximating the uh
tested y-coordinate based on the line
height times the
current line index so that's not gonna
work if you have
lines with say like an image on a line
or some
something like that right or an inline
block which makes that line taller
because then our silly multiplication
game
falls apart but
we needed something here just to make
progress and then we'll have to improve
on this
first a slightly naive implementation
of css floats
um
float boxes can now be floated
left or right
which makes a text
flow text within
the same block formatting context
flow around them
this um
implementing this or um we had
uh slightly the we were
creating way too many formatting
contexts
um as it turns
out
we don't need one for every
new block but rather there's
a set of rules that
determines whether a given
block creates a new block formatted
context
[Music]
um
each bfc keeps track of the left
of the floated full floating boxes
within
it and um
inline or ifcs
can then uh query it to
um compute the amount of available
the bound boundary bounce of
available space
um to to find the available space
for line boxes
uh there's a um
huge hack in here where we
um assume all lines
are the line height
this um
making this work with non-uniform
line
uh vertically non-uniform lines will
require
some architectural
changes
yeah okay so i think that's
that's kind of cool
hey let's see res hedge temple misc
flood one html i just wanna
save it as something
and this was a
very educational session
and we have definitely not seen the end
of floats we didn't do anything with the
clear
property for example and i'm sure that
we have messed up a bunch of things that
need
refinement but even so
it is very nice progress so i'm i'm
happy with this
okay so this is going to be the end of
the video um
i would say i am
very impressed if you made it this far
because this got pretty
serious there for a while um so thank
you very much for sticking it out with
me
and hanging out i hope that you saw
something interesting
and um maybe we
learned a thing or two about css today
uh also i don't know what's going on
here definitely
definitely need some more tweaks um
but yeah thank you very much for
checking it out and i
will see you next time bye