Log in / Register

Forum › How do I...?

Running Elements

nishantvarma
Running Elements :
---------------------------

I was looking at http://www.w3.org/TR/css3-gcpm/ on Running Elements:
Its very nearly the same in Prince but not quite CSS3 . Is there any reason for this ? Also are you looking at conforming to CSS3 standard ? As an aside are there any Web Frontends maybe JS based than can offer a preview of the document in real time ? This can enhance productivity even if its just nearly the same . (I mean a real time preview based on CSS Standards)

CSS3

div.header { position: running(header) }

@page {

@top{content: element(header)

}

PRINCE

div.header { flow: static(header) }

@page {

@top{content: flow(header)

}






Edited by nishantvarma

mikeday
Actually we have supported the CSS3 running elements syntax since Prince 9. The reason we started with a different syntax is that we implemented this feature many many years before CSS3 added it. :)
nishantvarma
It was very easy to guess that :-)
nishantvarma
The API works but the box model don't work as expected . I tried top-center and top-right but it appears like a top-left . top-left-corner and top-right corner works .

string-set on the other hand works well with margin boxes but would show the content in normal flow and at additional header position - which is however css3 specification .



<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Test PDF</title>

<style type="text/css">
div.header {position: running(header);}
@page {
size: a4 portrait;
@top-right{content: element(header);}
}
/style>
</head>
<body>
Normal Content Here
<div class="header">1</div>
</body>
</html>

Edited by nishantvarma

mikeday
Because there is no @top-left or @top-center, the @top-right margin box is expanding to fill the entire space. Try putting a red border on the header to make it more obvious. You can specify a width on the @top-right.
pavithra
<html>
<head>
<style>
h1{string-set: title1 contents}

@page{
@top-right{
content: string(title1)
}
}

</style>
<body>
<h1 class="title1"> This is heading1 </h1>
<h1 class="title2"> This is heading2 </h2>
</body>
</html>

The above code is working perfectly for single running elements.
I would like to have multiple running elements, is it possible in Princexml? I tried the below code with the reference https://www.wiumlie.no/2013/gcpm/06-27.html.

h1{string-set: title1 contents, title2 contents }
@page{
@top-right{
content: string(title1, title2)
}
}

Could you check this out. Thank you
mikeday
Do you want to use the class, like this:
h1.title1 { string-set: title1 contents }
h1.title2 { string-set: title2 contents }
pavithra
h1.title1{string-set: title1 contents}
h1.title2{string-set: title2 contents}

@page{
@top-right{
content: string(title1)
}
@top-right{
content: string(title2)
}
}

This combination didn't work also.
pavithra
Hi Mike,

I have solved by bringing the multiple running headers,

@top-right{
content: string(journal-title)
" doi: " string(hiddenelements)
string(subject)
"Received " string(date)
}


.journal-title{string-set: journal-title contents}

.hiddenelements[data-name=article-id][data-pub-id-type=doi]{string-set: hiddenelements contents}

.subject{string-set: subject contents}

.date[data-date-type=received]{string-set: date contents}

Now my only concern is to sort them in order? Do you have any idea about sorting the headers?
mikeday
Sorting by what criteria? You could pass them to a Prince script function.
pavithra
Whatever contents I have given in the content area under @top-right, must appear aligned in a new line.

For instance,
My current output is :-
Nicotine and Tobacco Research doi: 10.000/nsd/gfrtOriginalInvestigationsReceived 24 07 2017

Expected op :-
Nicotine and Tobacco Research
doi: 10.000/nsd/gfrt
OriginalInvestigations
Received 24 07 2017
mikeday
You can use "\a" for newlines in CSS, and "white-space: pre-line" to ensure that they work. However you will need to ensure that the margin box is tall enough to fit the text.
pavithra
Hey Mike, that didn't work. I'm yet to find the solution even I tried with "\a" with various combinations.
mikeday
Even like this:
@top-right{
content: string(journal-title) "\A doi: " string(hiddenelements) "\A" string(subject) "\A Received " string(date);
white-space: pre-line
}
pavithra
Thanks, Mike this worked for me.

Could you please help us understand how to produce an output in css using list.
  1. orderlist.PNG‎ 6.3 kB

Edited by pavithra

mikeday
I think for that you would need to go beyond CSS and create an element in the document and flow that element to the margin box.
pavithra
Hi, Mike Is there any options for stack head.

For example: if head1 is followed immediately by head2 how shall I give specific space on top and bottom.
pavithra
Regarding the Book References, I would like to know how the numbers are getting generated on references along with this how shall align the number and content.

Does Princexml support EPS images?
  1. reference.PNG‎ 61.0 kB

Edited by pavithra