Internal browser not fully CSS compliant?

Post by **Frank Ralf** » Fri Mar 28, 2014 7:27 pm

Hello,

I'm trying to modify the CSS for oXygen's Author mode so frames around figures resemble the PDF output. Normal figures should be "shrink-wrapped" (http://haslayout.net/css-tuts/CSS-Shrink-Wrap), figures with the attribute @expanse="page" should span the whole page width.

The HTML test code below does work in Firefox and Internet Explorer but not in oXygen so I suppose the internal browser is not fully CSS compliant. Is my suspicion correct or am I missing something?

Kind regards,
Frank

Code: Select all


<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <title>CSS Shrink-wrap Test</title>

    <style type="text/css">



/* Shrink-wrapping with CSS  

   http://haslayout.net/css-tuts/CSS-Shrink-Wrap 

*/

div.figwrap {

  overflow: hidden;

  display: inline-block;

  padding: 10px;

}



div.figwrap { display: block; }



div.fig{

  padding: 5px;

  border: 2px solid #007088;

  float: left;

}



div.fig[expanse = "page"]{

  width:98%;

}



div.fig div.title {

  border: 1px solid fuchsia;

}



div.fig img {

  border: 1px solid lime;

}



</style>

    

  </head>

  <body>

    <div class="figwrap">

      <div class="fig">

        <div class="title">Shrink-wrap frame - even when it's wider than the picture</div>

        <img src="dita-bird_0.jpg" alt="shrink-wrap"/>

      </div>

    </div>

    <div class="figwrap">

      <div class="fig" expanse="page">

        <div class="title">Whole width frame</div>

        <img src="dita-bird_0.jpg" alt="whole width"/>

      </div>

    </div>

  </body>

</html>

PS:
Is there a way to upload a screenshot here?

Post by **Radu** » Mon Mar 31, 2014 10:59 am

Hi Frank,

The HTML test code below does work in Firefox and Internet Explorer but not in oXygen so I suppose the internal browser is not fully CSS compliant. Is my suspicion correct or am I missing something?

The Author visual editing mode is not fully CSS compliant, we mostly implemented features useful for editing content. So you should never rely on the fact that things will look in the visual editing mode exactly as in a web browser.
All the CSS features we implemented are listed here:

http://www.oxygenxml.com/doc/ug-oxygen/ ... pport.html

Also Oxygen does not yet read the CSS embedded directly inside XHTML documents (like in your case), we'll try to add this improvement in a future version.
Right now the Author visual editing mode in Oxygen only reads and applies the CSS if it is referenced as a separate file using the <style> tag.

PS:
Is there a way to upload a screenshot here?

No, in the future maybe you can upload it to a public web site specialized in image uploads and add a link to it on the forum post.

Regards,
Radu

Post by **Frank Ralf** » Tue Apr 01, 2014 1:55 pm

Thanks for the quick response and the thorough explanation!

Post by **sorin_carbunaru** » Mon Oct 02, 2017 2:53 pm

Hello Frank,

Just to update this thread: the Author mode in 19.1 reads the CSS rules declared inside the (X)HTML document.

All the best wishes,
Sorin Carbunaru
oXygen XML

Post by **Frank Ralf** » Wed Oct 25, 2017 1:06 pm

Many thanks for the update!

Frank

Internal browser not fully CSS compliant?

Internal browser not fully CSS compliant?

Re: Internal browser not fully CSS compliant?

Re: Internal browser not fully CSS compliant?

Re: Internal browser not fully CSS compliant?

Re: Internal browser not fully CSS compliant?