I have used below method, but bottom left footer text overlapping into bottom right side. I have attached the converted PDF file.

@bottom-left {
content: "\00A9\00A0" string(copyright) " " string(copyright-year) "\A" string(initial2)". " string(surname2) ", " string(initial1)". " string(surname1) " (eds.), " string(book-title) "\A" "DOI "string(DOI);
font: 8.5pt/10pt "Times_Roman", serif;
vertical-align: top;
white-space:pre;
}

One more thing, how do I apply italic formatting for string "book-title" in within bottom-left property.

BookTitle {string-set: book-title content(text);font-style:italic;}

1. 385528_1_En_1_Chapter.pdf‎ 61.8 kB

Try "white-space: pre-line" or pre-wrap?

If you apply italic font-style it will affect all of the text in the margin box. The only way to create mixed text content with different styling is to take an element from the document and flow it to the margin box, like this:

@page {
    @top { content: flow(header) }
}
h1 { flow: static(header) }

I have tried with flow property, but the margin bottom footer text is removed in output file.

CSS:
@bottom-left {
content: "\00A9\00A0" string(copyright) " " string(copyright-year) "\A" string(initial2)". " string(surname2) ", " string(initial1)". " string(surname1) " (eds.), " flow(header) ", Multicultural Education 16," "\A" "DOI "string(DOI);
font: 8.5pt/10pt "Times_Roman", serif;
vertical-align: top;
white-space:pre-wrap;
}

BookTitle {flow: static(header);font-style:italic;}

Generated content and flowed elements cannot be combined in the same margin box, so you will need to put the string(copyright) etc. in the element itself.

Can I directly place the element in page footer?

Yes, just use "content: flow(header)".

We will try this.