CSS Layout Test Page

Subject of this article are CSS layout properties, what they cause and how they interact. It is a supplement for my passed Blog about the position property.

You might have noticed that web page layout is not done by assigning something like BorderLayout, GridLayout, FlowLayout, VerticalLayout, TableLayout, ... to some HTML container. Rather you need to set some CSS properties on each element taking part in the layout. These properties are not always that intuitive as expected, especially the position property.

---

Let's try out by "click and play", not by writing source code.

Below the following 5 setting panels you find 5 HTML <div> elements, visible as coloured bars, spanning the whole width. You can change the CSS layout properties of each of them by using the setting panel of same color.
If you want to reset, press browser Reload, or Shift-Reload in Firefox.
Mind that

• top, left, bottom, right and z-index are ignored when position is static
• width and height are ignored when display is inline

Thus these fields are disabled initially.

Text and CSS Settings

Text: Box 1 position: static relative absolute fixed display: block inline inline-block none float: none left right clear: none both left right height: Pixel Percent EM width: Pixel Percent EM top: Pixel Percent EM left: Pixel Percent EM right: Pixel Percent EM bottom: Pixel Percent EM z-index:

Text: Box 2 position: static relative absolute fixed display: block inline inline-block none float: none left right clear: none both left right height: Pixel Percent EM width: Pixel Percent EM top: Pixel Percent EM left: Pixel Percent EM right: Pixel Percent EM bottom: Pixel Percent EM z-index:

Text: Box 3 position: static relative absolute fixed display: block inline inline-block none float: none left right clear: none both left right height: Pixel Percent EM width: Pixel Percent EM top: Pixel Percent EM left: Pixel Percent EM right: Pixel Percent EM bottom: Pixel Percent EM z-index:

Text: Box 4 position: static relative absolute fixed display: block inline inline-block none float: none left right clear: none both left right height: Pixel Percent EM width: Pixel Percent EM top: Pixel Percent EM left: Pixel Percent EM right: Pixel Percent EM bottom: Pixel Percent EM z-index:

Text: Box 5 position: static relative absolute fixed display: block inline inline-block none float: none left right clear: none both left right height: Pixel Percent EM width: Pixel Percent EM top: Pixel Percent EM left: Pixel Percent EM right: Pixel Percent EM bottom: Pixel Percent EM z-index:

Box 1

Box 2

Box 3

Box 4

Box 5

Playground

Here is the playground's HTML:

  <div>
    <div id="box-1">Box 1</div>
    <div id="box-2">Box 2</div>
    <div id="box-3">Box 3</div>
    <div id="box-4">Box 4</div>
    <div id="box-5">Box 5</div>
  </div>

You will find a lot of information and jsfiddle try-out pages on the internet about these CSS properties. Following is a rough description of how they should be understood.

• position: how the element coordinates should be calculated. The default value static causes the browser to locate the element according to the document flow, all others need at least one of top, left, right or bottom. Mind that absolute positions relative to the next non-static parent element. See also my Blog about this property.


• display: a basic layout, either vertically (block) or horizontally (inline). The value inline-block is the same as inline, but the dimension of the element is respected. The value none would make the element invisible, not even taking any place in the layout. Mind that there are many more values for display, but they are not all supported by the different browsers.


• float: a way to arrange elements horizontally as far as the container allows. This was originally made to float text around images. It may be notable that a float element affects its parent's layout.


• clear: a value other than none would denote a "line break" for horizontally arranged elements.


• z-index: default is zero. Any positive value would make an non-static positioned element to be above other elements that might cover it because they are defined later in the HTML markup.


• height, width: the dimension of the element when not to be calculated dynamically from document flow.


• top, left, right, bottom: these are ignored when position is static. They serve to locate the element relatively to their next non-static parent in any other positioning-mode.

Examples:

Give the yellow box a height of 4 em. Then make it inline. You see that height is ignored now. Then change to inline-block. The height is respected again.

Make box 1 float: left and box 2 float: right. You see that the order of elements is different now, box 3 is between box 1 and box2.

Make box 1 float: left. Then increase its height. You see that it pushes more and more of the other boxes to the right.

Try to arrange all boxes horizontally, by either assigning them all float: left or position: inline-block. Then give them all a width of 15 em. You see that they won't fit into the page and will break into the next layout line.

---

Feel free to visit my homepage to see the latest state of this page.

Text Outline with GIMP

This is about creating a transparent outlined text image with the GIMP image editor, to appear in a video as overlay. Such a text over a video might not always be readable, as its color could dissolve in the video background. Thus I want to have a so-called "outline" on the text, that means there is a border around the letters, something like this:

I searched for GIMP tutorials about outlining text and started to try out what was described there, but I needed four of these tutorials until I was able to create what I needed. The problem is that GIMP is made by developers that prefer the technical approach, leaving out use-cases that a normal user would like to perform. Tutorials are similar, mostly pure technically, hard to understand by non-experts, and often incomplete.

But finally I melted together a solution that worked for me, and this article is my cheat-sheet for future text outlines. I am here referring to GIMP Version 2.8.10 on Ubuntu LINUX.

Abstract

What are we going to do, in technical terms?

• Create a new transparent image
• Write some text into that empty image
• Generate a "path" (shape) of the text, held in some GIMP buffer
• Create a new transparent layer for the image
• Put the "path" from GIMP buffer into that layer
• Widen the "path" (that in fact is the outline)
• Reverse the order of the layers so that the "path" is below the text
• Fill the "path" with the inverse text color

A consequence of that procedure is that you can not change the text any more after outlining it.

Step by Step in Text

1. Open GIMP and click "New" in the main menu. Choose the aimed pixel dimension of your image, then click "Advanced Options" and choose "Transparency" for "Fill with". Click "OK".
   
   
2. Now select the text tool on the Toolbox window (the big "A" button) and mark a text area on the image by dragging the mouse from upper left to bottom right. You can write text when you click inside that area. To customize the font, select the text and make settings on the Toolbox window.
   
   
3. Correct the typos in your text, you won't be able to change it after the outline has been added.
   
   
4. Right-click within the text area to open the context-menu (popup-menu) and click the "Path from Text" item. Nothing visible happens by that action, just the shape of the text is copied into a GIMP buffer.
   
   
5. In the main menu, click "Layer" - "New Layer". On the opening dialog, enter a name (e.g. "Outline") and choose "Transparency" for "Layer Fill Type". Click "OK" to create the layer that will carry the outline.
   
   
6. In the main menu, click "Select" - "From Path". This copies the buffered "path" into the new layer. The text is now surrounded by a dashed animated border.
   
   
7. Again in the main menu, click "Select" - "Grow" to increase the size of the border around the letters. A dialog opens, choose 5 pixels and click "OK". The outline is now visible, although still transparent.
   
   
8. Once more in the main menu, click "Layer" - "Stack" - "Reverse Layer Order". This will swap the layers, and the outline will be below the text. This will have no visible effects, because the outline is still transparent.
   
   
9. On the Toolbox, choose the inverse color to your text color. If your text is white, choose black. Then click "Edit" - "Fill with FG Color". The outline should be visible now.
   
   
10. Click "Save As" in the main menu to save in GIMP format, or click "Export As" to save as .png image.

Step by Step in Screenshots

1. Create a new transparent image with main menu "New".
   
   
   
   
   
   
2. Choose a color and a font and write the text.
   
   
   
   
   
   
3. Correct the typos in your text, you won't be able to change it after the outline has been added.
   
   
4. Generate a "Path from Text" via context menu on the text area.
   
   
   
   
   
   
5. Create a new layer in main menu "Layer" - "New Layer".
   
   
   

   
   
   
   
6. Get the "Path" into that layer by main menu "Select" - "From Path".
   
   
   
   
   
   
7. Widen the "Path" by main menu "Select" - "Grow".
   
   
   

   
   
   
   
8. Swap the layers by main menu "Layer" - "Stack" - "Reverse Layer Order".
   
   
   
   
   
   
9. Fill the "Path" with a color by main menu "Edit" -"Fill with FG Color".
   
   
   
   
   
   
10. Save result, or "Export As" .png
    
    
    
    
    
    

I hope this article is helpful. At least for me it will be, when I create my next video.
Don't let yourself discourage by "Techno"-software!