Home → Community Archive →

Wrapping a text alongside the picture - is it possible ?

• Edit

Vit

24 Mar, 2014 06:55 PM

Wrapping a text alongside the picture - is it possible ?
Without this option a valuable space is wasted.

1. 1 Posted by Aleksej on 24 Mar, 2014 07:18 PM

   

   CSS tutorial, reference and demos: https://developer.mozilla.org/en-US/docs/Web/CSS

   "float" may be the relevant property: https://developer.mozilla.org/en-US/docs/Web/CSS/float

   • Edit

2. 2 Posted by Vit on 24 Mar, 2014 08:30 PM

   

   Thanks, Aleksej for taking time to find the info; I appreciate it.
   Unfortunately, Mozilla 800 Extensions produced 4 useless results on the search for 'wrap'.
   The second link ( Float ) is what I need but it is over my head.

   Have a nice day.
   Vit

   • Edit

3. Support Staff 3 Posted by Damien Elmes on 24 Mar, 2014 09:42 PM

   

   This is possible with CSS, but I'm afraid we can't provide HTML/CSS support here.

   • Edit

4. Vit closed this discussion on 25 Mar, 2014 01:14 AM.

5. Aleksej re-opened this discussion on 25 Mar, 2014 09:38 AM

6. 4 Posted by Aleksej on 25 Mar, 2014 09:38 AM

   

   Unfortunately, Mozilla 800 Extensions produced 4 useless results on the search for 'wrap'. The second link ( Float ) is what I need but it is over my head.

   I mean if you don't understand CSS, you should read (maybe using Incremental reading) the tutorial, a link to which is on the page pointed to by my first link.

   • Edit

7. 5 Posted by Vit on 25 Mar, 2014 05:45 PM

   

   I was hoping for something simple -- do not have time for anything requiring weeks of learning.
   Thank you, Alexey.

   As a workaround, I need to find out how to resize an Image; there is a post with the answer -- but I could not find it, yet (Google forum ).
   My win-8 Paint does not allow resizing; there is an icon 'Size' but it is 'grey'.

   Thank you.

   • Edit

8. 6 Posted by Aleksej on 25 Mar, 2014 06:03 PM

   

   I was hoping for something simple -- do not have time for anything requiring weeks of learning.

   Anki uses CSS, Web pages use CSS, Web browser and user-side website themes use CSS. Of course, learning the basic syntax of CSS also requires knowing the basic syntax of HTML.

   Put this into a new card's HTML code (Ctrl+Shift+X in the editor):

   <div>Anyone who needs to remember things in their daily life can benefit from Anki. Since it is content-agnostic and supports images, audio, videos and scientific markup (via LaTeX), the possibilities are endless. 
   For example:</div><span style="float: right"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Anki_2.0.22_KDE4.en.story-ru-en.smallwindow.png/300px-Anki_2.0.22_KDE4.en.story-ru-en.smallwindow.png" /></span><div>&nbsp; &nbsp; learning a language</div><div>&nbsp; &nbsp; studying for medical and law exams</div><div>&nbsp; &nbsp; memorizing people’s names and faces</div><div>&nbsp; &nbsp; brushing up on geography</div><div>&nbsp; &nbsp; mastering long poems</div><div>&nbsp; &nbsp; even practicing guitar chords!</div><div><br /></div>
   

   Note that attributes have to be added to a surrounding span element, as Anki removes the attributes from img tags.

   Also note that using the "style" attribute is generally a bad practice (here, it makes the choice card-specific), it's better to use a class attribute and specify the styles for the class elsewhere.

   As a workaround, I need to find out how to resize an Image; there is a post with the answer -- but I could not find it, yet (Google forum ). My win-8 Paint does not allow resizing; there is an icon 'Size' but it is 'grey'.

   I use GIMP for that, although maybe there is CSS to do that while keeping the aspect ratio (simple min-height and min-width don't keep it).

   • Edit

9. 7 Posted by Vit on 26 Mar, 2014 04:43 PM

   

   Wow, thank you very much, Alexey.
   I think I will be able to use this info because I have already learned HTML Tags and other terminology - it does not sound gibrish to me :-)

   PS. The issue of wrapping came to the fore when I started making English Vocabulary cards for my 8 years old - pictures are must here.
   Thank you again.

   • Edit

10. 8 Posted by Aleksej on 27 Mar, 2014 08:17 PM

    

    "img { float:right; }" actually works well.

    A Local CSS and DIY night mode version for Incremental Reading Extension:
    

    .loc.card.model_iread2 img {
     float: right;
    }
    

    • Edit

11. 9 Posted by Aleksej on 28 Mar, 2014 10:06 AM

    

    "img { float:right; }" actually works well.

    But it affects LaTeX images, too.

    • Edit

12. 10 Posted by Vit on 29 Mar, 2014 06:19 PM

    

    My last ditch attempt failed.
    Please tell me how to fix what I copied mindlessly from your post.

    Thank you, Alexej.

    I will make this post Public again when and if
    it works on my end; thanks for your patience.

    • Edit

13. 11 Posted by Aleksej on 29 Mar, 2014 08:23 PM

    

    What did you copy and where to?

    • Edit

14. 12 Posted by Vit on 29 Mar, 2014 09:33 PM

    

    Oops.
    Did not attach the template.

    • Float.png 52.8 KB
    • Edit

15. Vit closed this discussion on 07 Apr, 2014 03:31 AM.