# Tab and Text Layout Learn about the various options of tab and text layout in this topic. ## Content DockingTab provides various options of tab and text layout. Let's explore setting tab layout and text layout in detail in the sub-sections. ### Tab Layout DockingTab provides various options for the tab orientation. The tabs can be aligned to the top, bottom, left, or right of the DockingTab control by using the [Alignment](/componentone/docs/win/online-command5/) property. The table below enlists the four types of alignment of tabs on the Docking Tab: | **Alignment** | **Snapshot** | **Description** | | --- | --- | --- | | Top | ![Tab aligned to the top](https://cdn.mescius.io/document-site-files/images/1086a5ae-7197-4f26-942b-edb381682c69/images/tab-top.png) | Aligns tab to the top of DockingTab. | | Bottom | ![Tab aligned to the bottom](https://cdn.mescius.io/document-site-files/images/1086a5ae-7197-4f26-942b-edb381682c69/images/tab-bottom.png) | Aligns tab to the bottom of DockingTab. | | Left | ![Tab aligned to the left](https://cdn.mescius.io/document-site-files/images/1086a5ae-7197-4f26-942b-edb381682c69/images/tab-left.png) | Aligns tab to the left of DockingTab. | | Right | ![Tab aligned to the right](https://cdn.mescius.io/document-site-files/images/1086a5ae-7197-4f26-942b-edb381682c69/images/tab-right.png) | Aligns tab to the right of DockingTab. | The code snippet below shows how to align tabs towards the top region on the tab control. ```csharp // Specify location of tabs in tab control dockingTab.Alignment = TabAlignment.Top; ``` ### Tab Alignment on Tab Page DockingTab also provides property to specify how to align the tabs along the side of the page content area by setting the [AlignTabs](/componentone/docs/win/online-command5/) property to Near, Far, or Center. The table below enlist the four types of alignment of tabs on tab page: | **Alignment** | **Snapshot** | **Description** | | --- | --- | --- | | Near | ![Tabs arranged in near alignment](https://cdn.mescius.io/document-site-files/images/1086a5ae-7197-4f26-942b-edb381682c69/images/aligntab-near.png) | Aligns tabs near the side of the page content area. | | Far | ![Tabs arranged in far alignment](https://cdn.mescius.io/document-site-files/images/1086a5ae-7197-4f26-942b-edb381682c69/images/aligntab-faralign.png) | Aligns tabs far from the side of the page content area. | | Center | ![Tabs arranged in center alignment](https://cdn.mescius.io/document-site-files/images/1086a5ae-7197-4f26-942b-edb381682c69/images/aligntab-center.png) | Aligns tabs towards the center of the page content area. | The code snippet below shows how to align tabs towards the center of the tab page. ```csharp // Align tabs along the side of page content area dockingTab.AlignTabs = StringAlignment.Center; ``` ### Indentation DockingTab also provides the functionality of indentation for the initial tab from the side of DockingTab control. For this purpose, **C1DockingTab** class uses the [Indent](/componentone/docs/win/online-command5/) property. ![Tab indentation](https://cdn.mescius.io/document-site-files/images/1086a5ae-7197-4f26-942b-edb381682c69/images/tab-indent.png) The code snippet shows how to set indentation for tabs in pixels for the DockingTab control. ```csharp // Sets the indentation of the first tab from the side of the control dockingTab.Indent = 30; ``` ### Text Layout In addition to determining the layout of the tabs, you can also customize the layout or orientation of the text in the tabs. You can use the [TextDirection](/componentone/docs/win/online-command5/) property to display the text horizontally, vertically from right to left, or vertically from left to right. A text can be added to each tab page using the **Text** property in the **Properties** window for C1DockingTabPage or using the **C1DockingTabPage Collection Editor** The following table illustrates how the tabs appear when the TextDirection is set to Horizontal, VerticalLeft, or VerticalRight. | **Text Direction** | **Snapshot** | **Description** | | --- | --- | --- | | Default | ![Tabs showing default text alignment](https://cdn.mescius.io/document-site-files/images/1086a5ae-7197-4f26-942b-edb381682c69/images/default-textalign.png) | Default direction: horizontal for top and bottom docked tabs and VerticalLeft and VerticalRight for left and right docked tabs. | | Horizontal | ![Tabs showing horizontal text alignment](https://cdn.mescius.io/document-site-files/images/1086a5ae-7197-4f26-942b-edb381682c69/images/horizontal-textalign.png) | Text is drawn horizontally on the tab. | | VerticalRight | ![Tabs showing vertical right alignment.](https://cdn.mescius.io/document-site-files/images/1086a5ae-7197-4f26-942b-edb381682c69/images/textalign-verticalright.png) | Text is aligned vertically on the tab, but clockwise. | | VerticalRight | ![Tabs showing vertical left alignment.](https://cdn.mescius.io/document-site-files/images/1086a5ae-7197-4f26-942b-edb381682c69/images/textalign-verticalleft.png) | Text is aligned vertically on the tab, but anti-clockwise. | The code snippet below shows how to align text 'VerticalRight' on a tab button. ```csharp // Set direction for the text drawn on the tab dockingTab.TextDirection = TabTextDirectionEnum.VerticalRight; ``` ### Relative Location of Text and Image DockingTab lets you display both the text and an image in a tab. Moreover, you can set the text above, below, to the left or to the right of the image. For this, the [TabLayout](/componentone/docs/win/online-command5/) property in **C1DockingTab** class can be set in the **Properties** window or via code. You can add an image to each tab page using the **Image** property in the **Properties** window for C1DockingTabPage or using the **C1DockingTabPage Collection Editor**. The table below lists the types of Tab Layout options for tab buttons: | **Tab Layout** | **Snapshot** | **Description** | | --- | --- | --- | | Text Above | ![Tabs with text aligned up](https://cdn.mescius.io/document-site-files/images/1086a5ae-7197-4f26-942b-edb381682c69/images/text-above.png) | Text appears above the image on tabs. | | Text Below | ![Tabs with text aligned below](https://cdn.mescius.io/document-site-files/images/1086a5ae-7197-4f26-942b-edb381682c69/images/text-below.png) | Text appears below the image on tabs. | | Text Left | ![Tabs with text aligned on the left](https://cdn.mescius.io/document-site-files/images/1086a5ae-7197-4f26-942b-edb381682c69/images/text-on-left.png) | Text appears on the left of the image on tabs. | | Text Right | ![Tabs with text aligned on right](https://cdn.mescius.io/document-site-files/images/1086a5ae-7197-4f26-942b-edb381682c69/images/text-on-right.png) | Text appears towards the right of the image on tabs. | The code snippet below shows how to assign the relative position of text and image on a tab button: ```csharp // Specifies relative location of text and image on the tab button dockingTab.TabLayout = ButtonLayoutEnum.TextAbove; ```