Apply different Stylesheets to left/right pages?

gbusch · Post by **gbusch** » Thu Apr 23, 2015 1:25 am

Hello there.

I have a PDF target output that uses left and right pages (also first, first left, first right, title, and empty left).
This works like a charm.

I wonder if i can apply styles to an element depending on if it is on a left or a right page.

Example:
When editing content i only can apply one class to a paragraph:

Code: Select all

<p class="marginal">Some Text</p>

And this class has only one style:

Code: Select all

p.marginal {
    float:right;
    margin-right:-2cm;
    text-align:left;
}

This will look like this:

mcf-test-marginal-right.png

This is okay for normal or right pages.
But on left pages it looks like this:

mcf-test-marginal-left.png

I would like to have the paragraphs of class marginal on left pages to have this style:

Code: Select all

p.marginal {
    float:left;
    margin-left:-2cm;
    text-align:right;
}

So that it would look like this:

mcf-test-marginal-left-2.png

Any ideas?

(Using Flare 9.1.2)

Lydia · Post by **Lydia** » Tue Apr 28, 2015 1:28 am

Hi, if I understand your approach correctly, you would need to know up front whether the margin text ends up on a left or right side and then apply the left or right margin style? That sounds tricky, because if the content changes, the content may move from a left to right or vice-versa page.
I think, I would use a different approach, with two body frames in the page layout and apply frame breaks in the topic, where necessary.
Hopefully others can share some ideas as well.

gbusch · Post by **gbusch** » Tue Apr 28, 2015 3:09 am

Thanks for your reply, Lydia.

you would need to know up front whether the margin text ends up on a left or right side and then apply the left or right margin style

Since this is not possible i was wondering if i can link certain styles only to left or right pages. E.g. if Flare would provide a variable that provide information about if it is a right page, a left page, a title page etc. or at least if it is an even or odd page, i could use this variable as a css id or css class for the body (pseudo code):

Code: Select all

<body id="<MadCap:variable name="System.PageType" />">

So I could easily style left and right pages without knowing on what page the content i'm about to write will end up. In the content i just need to say "This is some marginal text" and apply the style ".marginal" to the paragraph. Done. And in the stylesheet i could just write:

Code: Select all

#left p.marginal {
    float:left;
    margin-left:-2cm;
    text-align:right;
}

#right p.marginal {
    float:right;
    margin-right:-2cm;
    text-align:left;
}

Or simply use some MC-Media-Queries like this:

Code: Select all

@mc-pagetype:left {
        p.marginal {
                float:right;
                margin-right:-2cm;
                text-align:left;
        }
}

If there is no such thing i would file a feature request.

with two body frames in the page layout

I'm not sure if i undestand this correctly. I believe i was thinking of that in the past. But i dropped it. The marginal text would not flow with the main content, wouldn't it? I mean, if the content is changed and the paragraphs slides down, i would need to edit all the marginal text again. Anyway i would need to fill the marginal column with tons of linebreaks just to reach that paragraph the marginal text belongs to.

apply frame breaks in the topic, where necessary.

Never heard of that. This is why i have the decent feeling, that i did not understand your approach correctly, as mentioned above.

Anyway i found a solution that currently works good enough. If i use the MadCap css property "mc-float:outside-frame" i have at least alternating marginal columns:

Code: Select all

p.marginal
{
	mc-float:outside-frame;
	width: 3cm;
	height:auto;
	font-style:italic;
	page-break-before: auto;
	page-break-after: avoid;
	page-break-inside: avoid;
	padding-left:4mm;
	padding-right:4mm;
	vertical-align: text-top;
	padding-bottom:0;
}

Looks almost what i want - except the alternating "text-aling:left/text-aling:right":

2015-04-28_11-58-27.png

Lydia · Post by **Lydia** » Wed Apr 29, 2015 1:17 am

Hi, thank you for the further explanation and images. My idea of using two body frames came from the assumption that you were using kind of (single) headers in the sidebar. It could have worked for that scenario. But I see that you have several of these texts on one page and then this indeed becomes difficult (impossible?).
I am not aware of a way to find out which page type is in use and based on that define which style to use.
The implemenation you have now looks like the best you can do for now. Except for the text alignment, like you say.

MadCap Software Forums

Apply different Stylesheets to left/right pages?

Apply different Stylesheets to left/right pages?

Re: Apply different Stylesheets to left/right pages?

Re: Apply different Stylesheets to left/right pages?

Re: Apply different Stylesheets to left/right pages?