Wrapping a text alongside the picture - is it possible ?

Vit's Avatar

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

    Aleksej's Avatar

    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

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

    Vit's Avatar

    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

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

    Damien Elmes's Avatar

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

  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

    Aleksej's Avatar

    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.

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

    Vit's Avatar

    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.

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

    Aleksej's Avatar

    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).

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

    Vit's Avatar

    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.

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

    Aleksej's Avatar

    "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;
    }
    
  11. 9 Posted by Aleksej on 28 Mar, 2014 10:06 AM

    Aleksej's Avatar

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

    But it affects LaTeX images, too.

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

    Vit's Avatar

    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.

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

    Aleksej's Avatar

    What did you copy and where to?

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

    Vit's Avatar

    Oops.
    Did not attach the template.

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

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac