Patterned Rule Around a Block - Pattern Goes into Corners
Refer to the para in sect1[5] in chapter context in the Arbortext-path/samples/ALD/Blocks/Boxing/blockBoxing.xml sample file. The context references the complex patterned boxing property set in the associated stylesheet. The relevant code in that property set is given below.
//Create four rules to apply to the block
//The first and third rules contain the pattern you wish to apply
//The second rule shifts the rule drawing back to the right place so
the corners overlap
//The fourth removes the negative space applied by the second rule
//Rule 1 is 6pt thick, dotted, red and applied to the top and bottom of the
block
var rule1 = new fRule;
rule1.sides = fRule.SIDE_TOP + fRule.SIDE_BOTTOM;
rule1.thickness = "6pt";
rule1.lineColor = "red";
rule1.lineStyle = fRuleLine.LINE_DOT;
//Rule 3 is 6pt thick, dotted, red and applied to the left and right of the
block
var rule3 = new fRule;
rule3.sides = fRule.SIDE_LEFT + fRule.SIDE_RIGHT;
rule3.thickness = "6pt";
rule3.lineColor = "red";
rule3.lineStyle = fRuleLine.LINE_DOT;
//Rule 2 is -6pt thick, solid but has no colour
var rule2 = new fRule;
rule2.sides = fRule.SIDE_TOP + fRule.SIDE_BOTTOM;
rule2.thickness = "-6pt";
rule2.lineColor = "none";
rule2.lineStyle = fRuleLine.LINE_SOLID;
//Rule 4 is 6pt thick, solid but has no colour
var rule4 = new fRule;
rule4.sides = fRule.SIDE_TOP + fRule.SIDE_BOTTOM;
rule4.thickness = "6pt";
rule4.lineColor = "none";
rule4.lineStyle = fRuleLine.LINE_SOLID;
//Apply the rules to the block
block.rules.addRule(rule1);
block.rules.addRule(rule2);
block.rules.addRule(rule3);
block.rules.addRule(rule4);
//Add some padding to the block to provide some space between the rule
and the content
block.paddingTop = block.paddingBottom = block.paddingLeft
= block.paddingRight = "3pt";
Each part of the code is explained in more detail below.
//Create four rules to apply to the block
//The first and third rules contain the pattern you wish to apply
//The second rule shifts the rule drawing back to the right place so
the corners overlap
//The fourth removes the negative space applied by the second rule
The initial comments explain that you must configure four separate rules for the block to provide the combined effect of the rules reaching into the corners of the box. When adding multiple rules to the same side of a block, PTC ALD draws each consecutive rule from the outside inwards. If you bear this in mind you can create more complex effects as detailed here.
//Rule 1 is 6pt thick, dotted, red and applied to the top and bottom of
the block
var rule1 = new fRule;
rule1.sides = fRule.SIDE_TOP + fRule.SIDE_BOTTOM;
rule1.thickness = "6pt";
rule1.lineColor = "red";
rule1.lineStyle = fRuleLine.LINE_DOT;
Here you have created a new rule based on the fRule object, and set up the variable rule1 to hold the information about rule1. You specify the SIDE_TOP and SIDE_BOTTOM constants from the fRule object and the LINE_DOT constant from the fRuleLine object to draw a rule, drawn in the Dots style, along the top and bottom sides of a block. You also provide size and color settings for the thickness and lineColor properties of the fRule object.
//Rule 3 is 6pt thick, dotted, red and applied to the left and right of
the block
var rule3 = new fRule;
rule3.sides = fRule.SIDE_LEFT + fRule.SIDE_RIGHT;
rule3.thickness = "6pt";
rule3.lineColor = "red";
rule3.lineStyle = fRuleLine.LINE_DOT;
Here you have created a new rule based on the fRule object, and set up the variable rule3 to hold the information about rule3. You specify the SIDE_LEFT and SIDE_RIGHT constants from the fRule object and the LINE_DOT constant from the fRuleLine object to draw a rule, drawn in the Dots style, along the left and right sides of a block. You also provide size and color settings for the thickness and lineColor properties of the fRule object.
//Rule 2 is -6pt thick, solid but has no colour
var rule2 = new fRule;
rule2.sides = fRule.SIDE_TOP + fRule.SIDE_BOTTOM;
rule2.thickness = "-6pt";
rule2.lineColor = "none";
rule2.lineStyle = fRuleLine.LINE_SOLID;
Here you have created a new rule based on the fRule object, and set up the variable rule2 to hold the information about rule2. You specify the SIDE_TOP and SIDE_BOTTOM constants from the fRule object and the LINE_SOLID constant from the fRuleLine object to draw a rule, drawn in the Solid line style, along the top and bottom sides of a block. This rule will be drawn inside the rule configured with rule1, since it is applied to the block after rule1 (see Apply the rules to the block below). You also provide size and color settings for the thickness and lineColor properties of the rule. These latter settings provide a colorless rule with a vertical negative offset of 6pt on the top and bottom sides of the block. This has the effect of moving the red dotted top and bottom rules configured with rule1 towards the center of the block by 6pt. Their right and left edges now meet directly with the top and bottom edges of the left and right rules, providing the required corner effect.
//Rule 4 is 6pt thick, solid but has no colour
var rule4 = new fRule;
rule4.sides = fRule.SIDE_TOP + fRule.SIDE_BOTTOM;
rule4.thickness = "6pt";
rule4.lineColor = "none";
rule4.lineStyle = fRuleLine.LINE_SOLID;
Here you have created a new rule based on the fRule object, and set up the variable rule4 to hold the information for rule4. You specify the SIDE_TOP and SIDE_BOTTOM constants from the fRule object and the LINE_SOLID constant from the fRuleLine object to draw a rule, drawn in the Solid line style, along the top and bottom sides of a block. The rule is drawn inside the rules configured with rule1 and rule2. You also provide size and color settings for the thickness and lineColor properties of the fRule object. These latter settings provide a colorless rule 6pt thick on the top and bottom sides of the block. This adds 6pt of vertical space between the red dotted line and the block content, on the top and bottom sides, to counteract the negative space applied by rule2.
//Apply the rules to the block
block.rules.addRule(rule1);
block.rules.addRule(rule2);
block.rules.addRule(rule3);
block.rules.addRule(rule4);
Here you call the addRule() method from the fRules object to apply the rule information contained in the rule1 , rule2, rule3, and rule4 variables to a block. Remember that each call to addRule() applies the rules from outside in.
Note that block information for any context that references this property set must come from its Structure setting in the Breaks property category in the Arbortext Styler UI. If the context is set as Inline the rule will not be applied.
//Add some padding to the block to provide some space between the rule
and the content
block.paddingTop = block.paddingBottom = block.paddingLeft
= block.paddingRight = "3pt";
With this phrase you specify that the four padding properties for the fBlock object all share the same value, i.e. 3pt. This setting provides some space between the innermost rule and the block’s content.