<hr id=answer> adds too much space when using bigger fonts

addons_zz's Avatar

addons_zz

15 Mar, 2020 01:02 AM

I have increased the font size with the following for my type answers:

.card {
 font-size: 90px;
}
.questiontitle {
 font-size: 20px;
}
.symbol {
 text-align: center;
}
#typeans {
 font-size: 50px !important;
}
.typeGood {
 font-size: 50px;
}
.typeBad {
 font-size: 50px;
}
.typeMissed {
 font-size: 50px;
}

Here is the page HTML:

<div class="questiontitle">Type the <b>Hiragana</b> for the <b>Katakana</b>:</div>
<div class="symbol">ウ</div>
<hr id="answer">
<span style="font-family: 'Arial'; font-size: 20px"><div><code id="typeans"><br>↓<br><span class="typeMissed">う</span></code></div></span>
<div class="symbol">
<a class="replay-button soundLink" href="#" onclick="pycmd('play:a:0'); return false;">
    <svg class="playImage" viewBox="0 0 64 64" version="1.1">
        <circle cx="32" cy="32" r="29"></circle>
        <path d="M56.502,32.301l-37.502,20.101l0.329,-40.804l37.173,20.703Z"></path>
    </svg>
</a></div>
</div>

Next, you can compare how much space anki adds when it is rendering the <hr id=answer> by changing the font size from 20px to 50px:

  1. Support Staff 1 Posted by Damien Elmes on 15 Mar, 2020 02:29 AM

    Damien Elmes's Avatar

    This is not really related to the beta is it? If you don't want such big spacing, you can adjust the font for individual fields or style the hr separately.

  2. 2 Posted by addons_zz on 16 Mar, 2020 01:01 AM

    addons_zz's Avatar

    Sorry, I posted it in the wrong section. Can you move the post?

    I managed to fix the spacing problem by adding the line-height: 20px; style.

    But after analyzing better, the spacing problem is caused because I am putting the font-size: 90px; in the .card style, causing an over spacing everything in the flashcard.

    After changing back the .card style to font-size: 20px; and only setting the font size on the places I would like the big fonts. This is my fixed CSS style for the cards on the screenshots at the first post:

    .card {
      font-family: Arial;
      font-size: 20px;
      text-align: left;
      max-width: 800px;
      align: center;
      margin: auto;
      margin-top: 12px;
    }
    //
    .questiontitle {
      font-size: 20px;
      color: black; 
    }
    //
    .symbol {
      font-family: KanjiStrokeOrders;
      font-size: 90px;
      color: #e56727; 
      text-align: center;
      line-height: 90px;
    }
    //
    #typeans {
      font-size: 50px !important;
      max-width: 99%;
    }
    //
    #typearrow {
      color: #e56727;
      position: absolute;
      margin-top: -7px;
    }
    

    I also added the pull request https://github.com/ankitects/anki/pull/505 Give the 'typearrow' id to the type answer arrow, to allow the arrow down to be styled/centered.

  3. Support Staff 3 Posted by Damien Elmes on 16 Mar, 2020 09:06 AM

    Damien Elmes's Avatar

    Thanks for the PR, I will get to it soon.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Already uploaded files

  • 2020-03-14_20_18_36.png 11.5 KB
  • 2020-03-14_20_20_58.png 13.4 KB

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

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