HTML Properties
Part of the power of ePublisher lies in its ability to produce as many different outputs of your information as you need. This can include everything from print material, to online help files and web content. While online output formats can vary a great deal from one another, most are based on HTML. By modifying styles in Style Designer to include HTML coding properties, you can set up your files to take advantage of web formatting in properties such as paragraphs, characters, tables, images, and page styles. Once you have added HTML properties to your content styles, you can quickly and easily publish content to the web or online.
Tag
Specifies the HTML tag to use for the selected item. By default, ePublisher uses a DIV tag for each paragraph and assigns a class based on the style name. You can change the DIV tags to P tags for specific styles by specifying a P in this property for those paragraph styles.
Visibility
Specifies whether to show or hide the selected item by default. This property allows you to hide a paragraph initially, and then provide a method to show the paragraph.
Width
Specifies the fixed width, including a custom value and the unit of measure, for the selected item. Leave this value blank if you do not want to specify a fixed width for the selected item. For example, if you want your margin settings to control the width of a paragraph, do not specify a width value for your paragraph style.
Height
Specifies the fixed height, including a custom value and the unit of measure, for the selected item. Leave this value blank if you do not want to specify a fixed height for the selected item. For example, if you want the amount of content in a paragraph to control the height of that paragraph, do not specify a height value for your paragraph style.
Left (Positioning Area)
Specifies how far the left edge of the item, such as a paragraph or image, is offset to the right of the left edge of the block that contains the item. Percentages refer to the containing block. This value works with the value selected for the Type property.
Top (Positioning Area)
Specifies how far the top edge of the item, such as a paragraph or image, is offset below the top edge of the block that contains the item. Percentages refer to the height of the containing block. This value works with the value selected for the Type property.
Right (Positioning Area)
Specifies how far the right edge of the item, such as a paragraph or image, is offset to the left of the right edge of the block that contains the item. Percentages refer to the width of the containing block. This value works with the value selected for the Type field.
Bottom (Positioning Area)
Specifies how far the bottom edge of the item, such as a paragraph or image, is offset above the bottom of the block that contains the item. Percentages refer to the height of the containing block. This value works with the value selected for the Type field.
Type
Specifies the type of position scheme. This property controls how the browser processes the positioning values of Left, Top, Right, and Bottom. The values for this setting are defined as follows:
Value | Description |
|---|---|
Static | Places the item, such as a paragraph or image, in the same location as it would normally occupy in the normal flow. Left and Top positioning properties do not apply when you select Static. |
Relative | Offsets the position of the item, such as a paragraph or image, from its normal position in the normal flow and ignores other objects positioned outside of the normal flow with the Absolute property. |
Absolute | Positions the item, such as a paragraph or image, in a specific location. The item is not considered as part of the normal flow and it is not considered in the layout of objects that follow. Absolute objects do not affect objects that use the Static or Relative value. |
Float
Specifies whether to shift the paragraph to the left or right on the current line and allow content to flow along the side of the paragraph. Use this field to assign images to align on the left or right and allow the text to flow into the open area next to the image. You can also create pull quotes or other sidebars using the Float field, as well as create interesting side effects when combined with border styles.
Use of the Float property may also be prohibited by the Clear property. If the content of the paragraph stretches across the width of the entire page, you may not see any noticeable change unless you assign a smaller width for the paragraph using the Width property. The values for this setting are defined as follows:
Value | Description |
|---|---|
None | Does not allow other content in the normal flow to float to the right or left of this item. |
Left | Aligns this item to the left and allows content in the normal flow to be displayed along the right side. |
Right | Aligns this item to the right and allows content in the normal flow to be displayed along the left side. |
Clear
Specifies which sides of an item, such as a paragraph or image, may not be adjacent to an earlier floating box. If you set this property on a floating paragraph, it modifies the rules for positioning the float. The values for this setting are defined as follows:
Value | Description |
|---|---|
None | Does not constrain the position with respect to floats. |
Left | Increases the top margin of the item enough so that the top border edge is below the bottom outer edge of any left-floating boxes that resulted from elements earlier in the source document. |
Right | Increases the top margin of the item enough so that the top border edge is below the bottom outer edge of any right-floating boxes that resulted from elements earlier in the source document. |
Both | Moves the item below all floating boxes of earlier elements in the source document. |
Display
Specifies the Cascading Style Sheet (CSS) box type, or how to generate CSS boxes for the selected item, such as a paragraph or image. The values for this setting are defined as follows:
Value | Description |
|---|---|
None | Does not generate boxes in the formatting structure. When you select this option, the item does not display and the browser treats it as though it does not exist. |
Block | Generates a principal block box. |
Inline | Uses the layout properties of the previous element. |
List item | Displays the item that does not ordinarily display as a list item, such as a bullet or number, as a list item if it is inside a list. |
Z-Index
Specifies an integer that corresponds with the position of the paragraph on the z-axis. Elements with a lower value, such as 1, are displayed behind other elements with a higher value, such as 2. You can also specify negative numbers.
Left (Clipping Area)
Specifies the area of the left side of an image that is visible, when the image is larger than the web element that it sits inside. ePublisher disregards the Clipping area fields when the Overflow field is set to Visible.
Top Left (Clipping Area)
Specifies the area to the top of an image that is visible, when the image is larger than the web element that it sits inside. ePublisher disregards the Clipping area fields when the Overflow field is set to Visible.
Right Left (Clipping Area)
Specifies the area to the right side of an image that is visible, when the image is larger than the web element that it sits inside. ePublisher disregards the Clipping area fields when the Overflow field is set to Visible.
Bottom Left (Clipping Area)
Specifies the area to the bottom of an image that is visible, when the image is larger than the web element that it sits inside. ePublisher disregards the Clipping area fields when the Overflow field is set to Visible.
Cursor
Specifies the type of cursor to be displayed when pointing on an element in your HTML output. The values for this setting are defined as follows:
Value | Description |
|---|---|
Default | Displays the default cursor. |
Auto | Specifies that the browser sets the cursor style. |
Crosshair | Specifies that the browser sets the cursor as a crosshair. |
Pointer (Hand) | Specifies that the browser sets the cursor as a pointer (hand), which indicates the cursor is over a link. |
Move | Specifies that the browser sets the cursor to indicate an element must be moved. |
Resize East | Specifies that the browser sets the cursor to indicate an element must be moved to the right (east). |
Resize Northeast | Specifies that the browser sets the cursor to indicate an element must be moved up and to the right (northeast). |
Resize Northwest | Specifies that the browser sets the cursor to indicate an element must be moved up and to the left (northwest). |
Resize North | Specifies that the browser sets the cursor to indicate an element must be moved up (north). |
Resize Southeast | Specifies that the browser sets the cursor to indicate an element must be moved down and to the right (southeast). |
Resize Southwest | Specifies that the browser sets the cursor to indicate an element must be moved down and to the left (southwest). |
Resize South | Specifies that the browser sets the cursor to indicate an element must be moved down (south). |
Resize West | Specifies that the browser sets the cursor to indicate an element must be moved left (west). |
Text | Specifies that the browser sets the cursor to indicate an element is text. |
Wait | Specifies the browser sets the cursor to indicate that the program is busy (and often displays a watch or an hourglass). |
Help | Specifies the browser sets the cursor to indicate that help is available (and often displays a question mark or balloon). |
Overflow
Specifies how the output displays if the content of an element overflow its area. If you set the Overflow field to Visible, any Clipping area properties you set are disregarded. The values for this setting are defined as follows:
Value | Description |
|---|---|
Auto | Indicates the browser displays a scroll bar for viewing content that overflows its area. |
Visible | Indicates the browser does not clip the image or content that overflows its area. Instead, it displays the content outside the element. |
Hidden | Indicates the browser clips the content that overflows its area, but does not display a scroll-bar for viewing the rest of the content. |
Scroll | Indicates the browser clips the content that overflows its area, but displays a scroll-bar for viewing the rest of the content. |
Was this helpful?
Last modified date: 11/13/2024