What Is "baseline-shift" Attribute?

XSL-FO Tutorials - Herong's Tutorial Examples

∟What Is "baseline-shift" Attribute?

This section describes 'baseline-shift' attribute for 'inline' formatting object. It is used to shift the baseline of output inline area relatively from the baseline of the parent line area.

What Is "baseline-shift" Attribute? "baseline-shift" is an attribute for inline-level formatting objects to specify how much to shift the baseline of the output inline area relative to the baseline of the parent line area.

"baseline-shift" attribute can be specified with different types of value:

"baseline" - Specifies no shift. The baseline of this inline area matches the baseline of the parent line area.
"sub" - Specifies baseline of this inline area to be lower to the subscript position.
"super" - Specifies baseline of this inline area to be higher to the superscript position.
"+|-nn%" - Specifies baseline of this inline area to be moved higher or lower by nn% of the line-height.

Here is my tutorial example, inline-baseline-shift-Attribute.fo, that shows two "inline" formatting objects with "baseline-shift" specified:

<?xml version="1.0" encoding="utf-8"?>
<!-- inline-baseline-shift-Attribute.fo
 - Copyright (c) 2006 HerongYang.com. All Rights Reserved.
-->
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
 <fo:layout-master-set>
  <fo:simple-page-master master-name="page" 
   margin="0.1in" page-height="4in" page-width="3in">
   <fo:region-body region-name="body" background-color="#eeeeee"/>
  </fo:simple-page-master>
 </fo:layout-master-set>
 <fo:page-sequence master-reference="page">
  <fo:flow flow-name="body">
   <fo:block margin="0.1in" padding="0.2in" 
    border-width="1px" border-style="solid"
    background-color="#eeffff" color="#000000" 
    text-align="justify" font-family="sans-serif">
    Once upon a time there
    pigs<fo:inline baseline-shift="super" background-color="#ffeeee"
    font-size="70%">[who lived with their Mother]</fo:inline>.
    Early one morning they woke up and their mother said, 
    "you're too big for this 
    house<fo:inline baseline-shift="sub" background-color="#ffeeee" 
    font-size="70%">[and its time you left home]</fo:inline>."
    
   </fo:block>
  </fo:flow>
 </fo:page-sequence>
</fo:root>