I'm building a custom element to mark up examples (play with it at http://jsbin.com/kiboxuca/1/edit):
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.2.0/platform.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.2.0/polymer.js"></script>
<polymer-element name="my-example" noscript>
<template>
<style>
:host { display: inline }
</style>
[ <em>Example:</em>
<content></content>
— <em>end example</em> ]
</template>
</polymer-element>
<div>
Some text <my-example>Introduction
<pre>Some code here</pre>
More example</my-example>
</div>
This produces the appearance I want:
Some text [ Example: Introduction
Some code here
More example — end example ]
However, because it makes the <my-example>
element display:inline
I'm worried that the block-level <pre>
element is going to cause problems.
Styling <my-example>
as display:block
forces it to start on a new line, which is inconsistent with the PDF I need to imitate.
What sorts of problems should I expect from violating the CSS box model like this, and how can I mitigate them?
<p>
elements auto-close before a<pre>
, but that's a problem with the HTML parser, rather than the CSS box model, and I can fix it by replacing the<pre>
with a new custom element that wraps it. – Jeffrey Yasskindisplay: inline
, so you can ditch the<style>
. The<p>
closing is annoying. I had to change things over to<div>
to get a few of the examples form the PDF to work: jsbin.com/xapevika/2/edit – ebideldisplay: inline-block
if you want something to render inline but be able to contain block-level elements. – Scott Milesinline-block
makes the example render as a single box inside the line started by "Some text": jsbin.com/kiboxuca/4/edit – Jeffrey Yasskin