2

When export to html,the inline image has been overrided by inline image:

#+OPTIONS: toc:nil
#+TITLE:
#+STARTUP: showeverything 
#+STARTUP: indent
#+OPTIONS: html-postamble:nil
#+HTML_HEAD: <style>pre.src {background-color: #eff0f1;width 50%;}</style>
#+ATTR_HTML: :style border:12px solid black;float:right;

* Unit circle
#+ATTR_HTML: <style>pre {width 50%;}</style>
#+BEGIN_SRC gnuplot :exports both :file unitcircle.png 
reset
set border lw 1.5
set style line 1 lc rgb '#0060ad' lt 1 lw 2     # --- blue
set style line 2 lc rgb '#dd181f' lt 1 lw 2     # --- red

unset key; unset tics; unset border
set size ratio -1
set xrange [-1.2:1.2]
set yrange [-1.2:1.2]
set trange [0:2*pi]

set parametric

r = 1.0
h = r / sqrt(2.)
set arrow from 0,0 to h,h nohead ls 2
set label 'r' at 0.28,0.45 textcolor ls 2

fx(t) = r*cos(t)
fy(t) = r*sin(t)

plot fx(t),fy(t) ls 1
#+END_SRC
#+CAPTION: Fig. 1 Unitcircle
#+ATTR_HTML: :style border:2px solid red;float:right; :width:50%
#+RESULTS:
[[file:unitcircle.png]]

* Cosine
#+BEGIN_SRC gnuplot :exports both :file cosine.png
reset 
set xrange [-1*pi:1*pi]
set yrange [-1.5:1.5]
f(x) = cos(x)
g(x) = 0
plot f(x) title 'cos(x)' with lines linestyle 1, \
     g(x) notitle with lines linestyle 2
#+END_SRC
#+CAPTION: Fig. 2 cosine
#+ATTR_HTML: :style border:2px solid red;float:right; :width:50%
#+RESULTS:
[[file:cosine.png]]

Output:

enter image description here

But I wish:

  • The codeblock should not override the inline image.
  • The Caption lines should float with the image (above the image exactly).
2

Use CSS to customize div.org-src-container element.

#+OPTIONS: toc:nil
#+TITLE:
#+STARTUP: showeverything 
#+STARTUP: indent
#+OPTIONS: html-postamble:nil
#+HTML_HEAD: <style type="text/css">div.org-src-container{border:1px solid green;width:50%;float:left;}</style>
#+HTML_HEAD: <style>pre.src {background-color: #eff0f1;margin:0 0 0 0;}</style>
#+HTML_HEAD: <style type="text/css">div.figure{border:1px solid green;overflow:auto;}</style>
# #+ATTR_HTML: :style border:12px solid black;float:right;
# #+ATTR_HTML: :style border:2px solid red;float:right; :width:50%
* Unit circle
#+BEGIN_SRC gnuplot :exports both :file unitcircle.png 
reset
set border lw 1.5
set style line 1 lc rgb '#0060ad' lt 1 lw 2
set style line 2 lc rgb '#dd181f' lt 1 lw 2

unset key; unset tics; unset border
set size ratio -1
set xrange [-1.2:1.2]
set yrange [-1.2:1.2]
set trange [0:2*pi]

set parametric

r = 1.0
h = r / sqrt(2.)
set arrow from 0,0 to h,h nohead ls 2
set label 'r' at 0.28,0.45 textcolor ls 2

fx(t) = r*cos(t)
fy(t) = r*sin(t)

plot fx(t),fy(t) ls 1
#+END_SRC
#+CAPTION: Unitcircle
#+RESULTS:
[[file:unitcircle.png]]

* Cosine
#+BEGIN_SRC gnuplot :exports both :file cosine.png
reset
unset key; unset tics; unset border 
set xrange [-1*pi:1*pi]
set yrange [-1.5:1.5]
f(x) = cos(x)
g(x) = 0
plot f(x) title 'cos(x)' with lines linestyle 1, \
     g(x) notitle with lines linestyle 2
#+END_SRC
#+CAPTION: cosine
#+RESULTS:
[[file:cosine.png]]

Output:

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.