How to achieve nested conditional rendering without empty span tags from apex:outputPanel?

Question

I am trying to generate clean XSL-FO from a VisualForce page. But the xml coming out of the VisualForce page is not valid due to the empty span tags that are being generated by nested apex:outputPanel tags (outer rendered=true, inner rendered=false). Here is a focused page that illustrates the problem:

<apex:page contentType="text/xml" cache="false" showHeader="false" sidebar="false">
    <root>
        There is no reason for a nested apex:outputpanel to generate a span tag like this:  

        <apex:outputPanel layout="none" rendered="true">
            <apex:outputPanel layout="none" rendered="false" />
        </apex:outputPanel>

        This breaks strict xml documents like XSL-FO.
    </root>        
</apex:page>

That page gives this xml output:

<root>
    There is no reason for a nested apex:outputpanel to generate a span tag like this:

    <span id="j_id0:j_id3" style="display: none;"></span>

    This breaks strict xml documents like XSL-FO.
</root>

Actually, I did find an obscure reason in the docs:

apex:outputPanel layout attribute - The layout style for the panel. Possible values include "block" (which generates an HTML div tag), "inline" (which generates an HTML span tag), and "none" (which does not generate an HTML tag). If not specified, this value defaults to "none". However, if layout is set to "none", for each child element with the rendered attribute set to "false", the outputPanel generates a span tag, with the ID of each child, and a style attribute set to "display:none". Thus, while the content is not visible, JavaScript can still access the elements through the DOM ID.

Sounds useful if my content type is html or javascript, but it's breaking my strict xml. So the question is: how can I achieve nested conditional rendering while avoiding the span tags?

Reliquiae

Think I've figured this one out. Switch both or just the outer to an apex:variable like this: <apex:variable rendered="true" value="" var="tempOuter"><apex:outputPanel layout="none" rendered="false" /></apex:variable> – Reliquiae

I immagine you could make a custom visualforce component with layout="none" and no special logic that didn't have this quirk, no? – Karlsruhe

Answer 1

Switch both, or just the outer, to an apex:variable like this:

<apex:variable rendered="true" value="" var="tempOuter">
    <apex:outputPanel layout="none" rendered="false" />
</apex:variable>

Reliquiae

Answer 2

Try using <apex:outputText> instead of <apex:outputPanel>. In my case, I was rendering a table into pdf document, and <apex:outputPanel> broke table layout, while <apex:outputText> worked perfectly, and supported conditional render like this:

<apex:outputText rendered="{!IF(Sum != 0.00, true, false)}">

Preemie