Containers
Building a new web
Intro
In the previous article I outlined five key concepts of a new web that would yield higher flexibility, higher coherence and higher productivity when designing, building and prototyping websites. In this article I expand on one of them, the concept of (visual) objects.
Containers
Previously we established that our basis is an infinite coordinate plane that holds all of our visual objects without the boundaries of a container. We also discussed that neither distribution nor alignment (the two main design intents) require any container to work. But at some point we need to render our plane inside the boundaries of a physical medium (a sheet of paper or a digital screen) and this is where containers come into play.
In our model, a container is nothing more than another rectangle on our coordinate plane. It has the same bounding rectangle model as any other visual object and it can be manipulated with the exact same properties. What sets it apart is its ability to “contain” other objects, in other words create another type of relationships between objects. We can call this a parent-child or a content-container relationship or simply a hierarchy and this is what we leverage to introduce several new visual concepts.
Overflow strategies
The best way to understand containers is to examine how the size of the container and the size of its contents relate to each other. We can do this separately horizontally and vertically and for lack of a better word we will call this overflow strategies.
There are seven overflow strategies that we will cover in this article and they are the values of the overflow properties of a container object (overflow-x, overflow-y):
- hug
- show
- crop
- scroll
- (auto wrap) everywhere
- (auto wrap) simple text
- (auto wrap and) hyphenate
It is important that these strategies are mutually exclusive, that is only one can be enabled in a given dimension.
Hug
The simplest strategy is to set the container to get its size from its contents collectively. This essentially makes the container grow or shrink as its contents grow or shrink so the content cannot overflow the container in any way. This is called hugging or content hugging and it is prevalent in graphic design softwares. It is also being used on the web in some way, even though “hugging” as a terminology is rarely used. The most notable example is a text frame that grows and shrinks as we type, but a simple group and even a selection frame is actually a hugging container too.
Show (or the “do nothing” strategy)
If the container isn’t hugging its content (its size isn’t related to its content) the content might overflow the container. The simplest form of overflow is when we do nothing and just keep the overflowing content visible. The web currently denotes this as overflow: visible. However, if this is truly our design intent then there is no need to use a container, we can just simply draw a rectangle on top of our “content”. Confusion stems from the fact that on the web we are forced to use containers everywhere but in many situations (like this one for instance) there is absolutely no need to do that. In this situation a container does not yield any meaningful visual benefit and it even adds unnecessary complexity.
Crop
As opposed to the previous strategy cropping can only be achieved with a container. The idea is to show everything that is inside the boundaries of the container and hide everything that falls outside. An example would be an image container that crops the image into a different aspect.
Scroll
Scrolling is similar to cropping with the notable exception that the user can scroll to show the cropped parts. Scrolling is essentially a geometric transformation: the user translates (moves) the content along the X or Y axis to reveal it. It is used when the container needs to be rigid but the content is also important and cannot simply be cropped. A prime example is the window container.
Wrap
Now here comes the fun part. Auto wrapping is another strategy to put larger content into a smaller container but it is extremely tricky and only works if the content is a linear distribution. Auto wrapping essentially rearranges our content automatically to trade horizontal space for vertical space (or vice versa) rather than scaling or cropping it. But as we discussed in our previous article it is quite difficult to control wrapping at the container level and the best we can do is to come up with different (and more and more complex) algorithms.
There are three well-known algorithms (or families of algorithms) currently being used to control wrapping. The first is the simplest of them all and we can call it “everywhere”. This simply means that the distribution is allowed to wrap between every consecutive pair of separate objects. This algorithm works for all non-text distributions and in some special cases even for text.
The second algorithm is “simple text” which obviously only works with text distributions. This essentially inserts a line break between specific character pairs automatically whenever the available space runs out. The difficult part is to determine which pairs can and which pairs cannot break. The general idea is to break between words and never break inside them but this can lead to overflowing issues when a single word alone is longer than the available space. This algorithm has to make sure that this never happens. I want to emphasize over and over again that wrapping and overflowing (or in fact all strategies on this list) are mutually exclusive and they can never happen together. If text overflows, we cannot wrap it automatically and if text wraps automatically, it cannot overflow the container. The closest to achieve this algorithm on the web is by using overflow-wrap: break-word.
The third algorithm is “hyphenate” which also only considers text. This is a far more elegant solution than “simple text” but far more complex too. This algorithm automatically inserts breaks between words, just like “simple text”, but if a break should occur within a single word it inserts a hyphen too. This produces a more even text block because now, instead of words, we operate on syllables that are smaller and can fill rows more evenly. Another benefit is that hyphens clearly show breaks that happen inside words which helps readability. The downside is that this algorithm requires language dictionaries to work which might be infeasible in many situations. Nevertheless, this is a prevalent auto wrapping algorithm in major graphic design softwares.
Special containers
As always, the general idea is to have the lowest variance between objects but in this case it makes sense to have at least two different types of containers. One is a general purpose container in which we can put anything and the other is a text container that can only contain text. General purpose containers can hold randomly positioned objects or define a single linear distribution while text containers can only define a text distribution (which is a special linear distribution). They can both work with or without auto wrapping but naturally text containers have much more intricate controls that we will cover in another article.
The window and “position: fixed”
Another interesting container is the window. Currently everything on a website is the descendant of the window that acts as the root container and is considered a special container. However, the window is just a simple rectangle on our coordinate plane and it is perfectly valid visually to have objects that are not the child of this container. But because everything is inside by default, we need to manually take out what shouldn’t be there. This is what position: fixed actually does. As opposed to this, our model considers everything as being outside by default and we manually put inside what should be there.
This might seem nuanced, but the idea is to make all general purpose containers uniform (including the window) and to clearly show the difference between global and local coordinate measurements. Global should return values measured from the origin of the base coordinate plane and local should return values measured from the origin of the parent container. In addition, the position property should not mix changing the parent-child relationship with changing the global-local measurement system.
Note: intuition would suggest that “absolute” and “relative” positioning refer to the previously discussed “global” and “local” measurements but this couldn’t be farther from the truth. Current terminologies are often confusing but for backwards compatibility they cannot be changed only extended. For clarity and compatibility we will use the global-local designation instead of a more confusing and ambiguous absolute-relative designation.
Summary
Containers are regular objects, they follow the bounding rectangle model and they are represented with a simple rectangle on our coordinate plane. They can contain other objects and we can leverage this connection with different strategies based on how the size of the container and the size of its contents relate to each other. These strategies work in two dimensions separately and can achieve several visual concepts such as hugging, cropping, local scrolling and auto wrapping using different algorithms.
There are two basic types of containers: general purpose and text. General purpose containers can hold arbitrary geometry or define a single linear distribution while text containers can only hold text, which is a special linear distribution. Both distribution models can work with auto wrapping although wrapping can quickly become overcomplicated when handled on a container level.
