2010-12-28 10 views
16

Ich bin auf der Suche nach dem besten Weg, um ein Bild mit Text in reStructured Text neben ihm erscheinen zu lassen. Ich habe mehrere Seiten gefunden, die angeblich zeigen, wie es gemacht wird, aber keines zeigt ein funktionierendes Beispiel. Einige zeigen, was zu versagenden Beispielen scheint. Ich arbeite tatsächlich mit Sphinx (v0.6.6) und hoffe, dass ich das "native" CSS, das damit einhergeht, mehr als nötig pervertieren muss.Beispiel für das Verschieben von Bildern in reStructured Text

Danke.

Antwort

10

In den Worten von Emily Litella (von SNL), "Oh ... Never mind ..." ;-) Und in den Worten von Alex Trebek (von Jepordy!) „Und die Antwort ist. ..“

im .rst Datei

.. container:: twocol 

    .. container:: leftside 

     .. figure:: _static/illustrations/structure.svg 

    .. container:: rightside 

     Bla-bla-blah, and yada-yada. 

in der benutzerdefinierten CSS (verwendete ich eine Kopie von sphinxdoc.css, die ich in ./source/_static/) setzen:

div.leftside { 
    width: 414px; 
    padding: 0px 3px 0px 0px; 
    float: left; 
} 

div.rightside { 
    margin-left: 425px; 
} 

Jeder ..container :: wird zu <div>. In meinem Fall wollte ich eine feste Breite für das Bild und eine variable Breite für den Rest. Und mit ein bisschen Feinabstimmung des LaTeX, das von Sphinx produziert wurde, machte es auch einen ordentlichen Job, zweispaltige Ausgaben für diese Sektion zu produzieren.

Ich hoffe, dass das genug ist, um jemandem zu helfen herauszufinden, was für mich zunächst nicht offensichtlich war.

6

Bei der Arbeit mit Sphinx v1.1.3 verwende ich die folgende Methode - ein schwebendes linkes Bild und einen Löschblock. Es scheint nirgendwo dokumentiert zu sein, und es ist ein wenig hacky, so hier teilen ...

Zuerst das Bild, ausgerichtet nach dieser rST doc.

.. image:: _static/my_image.png 
    :align: left 

Dann können Sie Ihre Absätze auf die normale Weise schreiben, sie um das Bild wickeln.

Wenn Sie fertig sind, werfen Sie einen schmutzigen Reiniger - ich habe ein 1x1 Png als Inhalt für den Container verwendet.

.. container:: clearer 

    .. image :: _static/spacer.png 

Dies erzeugt die folgende HTML, die div.clearer CSS Verwendung von Sphinx macht. schön gelöscht

<div class="clearer container"> 
    <img src="_images/spacer.png" alt="_images/spacer.png"> 
</div> 

Dann können Sie auf das Schreiben, mit dem nächsten Absatz tragen.

+0

Haben Sie einen Weg gefunden, dies für Zahlen zu tun? http://stackoverflow.com/questions/16463051/how-to-create-floating-figures-in-restructuredtext-sphinx – dmd

+0

@dmd Nein Ich habe keine Zahlen verwendet - aber vielleicht könnte eine ähnliche Technik funktionieren? – jamesc

+0

Nö Kein Glück damit. :( – dmd

1

Ich denke, dass ein besseres Ergebnis mit substitutions erreicht werden könnte.

Hier ein Auszug aus der Dokumentation, die hilfreich sein können:

The |biohazard| symbol must be used on containers used to 
dispose of medical waste. 

.. |biohazard| image:: biohazard.png 

Ich hoffe, das

+1

Während dieser Link die Frage beantworten kann, ist es besser, die wesentlichen Teile der Antwort hier einzubeziehen und den Link als Referenz anzugeben Link-only-Antworten können ungültig werden, wenn sich die verlinkte Seite ändert – Joel

+1

Ich bearbeitete die Antwort, indem ich ein Beispiel für die Verwendung von Ersetzungen hinzufügte. Danke, dass Sie das gezeigt haben – vinnie

+0

Das ist eine ganz andere Sache: Sie integrieren ein kleines ish-Bild inline. (Ich wusste, wie das geht.) Ich wollte viel größeres Bild in einem zweispaltigen Layout. (Zumindest glaube ich, dass ich das vor drei Jahren wollte.) – Ubuntourist

1

hilft Ihnen, eine Substitution definieren:

.. |clearfloat| raw:: html 

    <div class="clearer"></div> 

dann für Bilder das align-Attribut :

.. image:: _static/my_image.png 
    :align: left 

Und fügen Sie einen Reiniger wie folgt ein:

|clearer| 
Verwandte Themen