Skip to content
This repository has been archived by the owner on Feb 25, 2023. It is now read-only.

yomichan styling #2179

Open
ChubYee opened this issue Jun 19, 2022 · 33 comments
Open

yomichan styling #2179

ChubYee opened this issue Jun 19, 2022 · 33 comments

Comments

@ChubYee
Copy link

ChubYee commented Jun 19, 2022

I'm completely new to yomichan and coding. How would I make the pitch accent line color red instead of white? And is there a way to make the vertical distance of the line extend lower to make it like how the red line is? I've been using an app called jidoujisho for mining, but have switched to PC and am just very used to it's styling, so basically I just want yomichan styling to look like it.
Captdure
Capture

.
.
Also, is there a way to modify how the dictionary information looks and styled when it is exported to an anki card? I basically want it so it has:

• ";" right after a word (and then a space), instead of "|"
• no dictionary info (the things in paranthesis like "adj-na", "uk", "JMdict (English)"), no numbered list, just a bullet point "•" for each "main idea"
• center-aligned text instead of left-aligned

Ideal template (left) vs. current yomichan template (right) (you can ignore the smaller 綺麗, it's just the sentence field, which I didn't input a sentence to the jidoujisho card)
image

@ChubYee ChubYee changed the title yomichan pitch styling yomichan styling Jun 19, 2022
@toasted-nutbread
Copy link
Collaborator

  1. There's not a great way to do this, but this kinda works:

    Enable _Advanced, open Configure Anki card templates…, and find and change the following template:
    {{#*inline "pitch-accents"}}
        {{~> pitch-accent-list format='text'~}}
    {{/inline}}
    To:
    {{#*inline "pitch-accents"}}
        {{~> pitch-accent-list format='text'~}}
    <style>
    span[style*="border-color:currentColor"] {
      border-color: #ff0000 !important;
    }
    span[style*="border-color:currentColor"][style*="height:"] {
      right: -0.1em !important;
      height: auto !important;
      bottom: 0 !important;
    }
    </style>
    {{/inline}}
  2. The | can be changed in {{#*inline "glossary-single"}}
    # Line 26
    {{#each glossary}}{{#formatGlossary ../dictionary}}{{{.}}}{{/formatGlossary}}{{#unless @last}} | {{/unless}}{{/each}}
                                                                                        Right here ^
  3. Change the <ol>/</ol> tags to <ul>/</ul> in {{~#*inline "glossary"~}} and change your Anki field template from {glossary} to {glossary-brief}.
  4. Change <div style="text-align: left;"> to <div style="text-align: center;"> in {{~#*inline "glossary"~}}.

@Thermospore
Copy link
Contributor

btw this is a chinese font, I would recommend changing it
image

@ChubYee
Copy link
Author

ChubYee commented Jun 19, 2022

It says that the font is Arial though in the Anki template styling

@Thermospore
Copy link
Contributor

not a font guru, but im guessing those characters aren't defined in arial so it's falling back to a default font

btw if I set my font to arial in anki it looks like this (a japanese font), but my anki/windows are set to jp locale
image

@Thermospore
Copy link
Contributor

here are the fonts I use on my cards
fonts.zip

@ChubYee
Copy link
Author

ChubYee commented Jun 19, 2022

Interesting. What a good thing to know. I actually never knew of such, because I don't use Anki on my computer (because I find a phone more versatile), but this will definitely make reading YouTube comments easier

@ChubYee
Copy link
Author

ChubYee commented Jun 19, 2022

not a font guru, but im guessing those characters aren't defined in arial so it's falling back to a default font

btw if I set my font to arial in anki it looks like this (a japanese font), but my anki/windows are set to jp locale image

How does japanese youtube content/comments look like for you?

@Thermospore
Copy link
Contributor

こんな感じ
image

@ChubYee
Copy link
Author

ChubYee commented Jun 19, 2022

  1. There's not a great way to do this, but this kinda works:
    Enable _Advanced, open Configure Anki card templates…, and find and change the following template:

    {{#*inline "pitch-accents"}}
        {{~> pitch-accent-list format='text'~}}
    {{/inline}}

    To:

    {{#*inline "pitch-accents"}}
        {{~> pitch-accent-list format='text'~}}
    <style>
    span[style*="border-color:currentColor"] {
      border-color: #ff0000 !important;
    }
    span[style*="border-color:currentColor"][style*="height:"] {
      right: -0.1em !important;
      height: auto !important;
      bottom: 0 !important;
    }
    </style>
    {{/inline}}
  2. The | can be changed in {{#*inline "glossary-single"}}

    # Line 26
    {{#each glossary}}{{#formatGlossary ../dictionary}}{{{.}}}{{/formatGlossary}}{{#unless @last}} | {{/unless}}{{/each}}
                                                                                        Right here ^
    
  3. Change the <ol>/</ol> tags to <ul>/</ul> in {{~#*inline "glossary"~}} and change your Anki field template from {glossary} to {glossary-brief}.

  4. Change <div style="text-align: left;"> to <div style="text-align: center;"> in {{~#*inline "glossary"~}}.

Okay, I have done it, but this is the result
Captusdre

@ChubYee
Copy link
Author

ChubYee commented Jun 19, 2022

こんな感じ image

I've installed the NotoSansJP file. Do the other two need to be installed also? And then how would I need to apply them, in my browser (Opera) or through Windows settings?

@toasted-nutbread
Copy link
Collaborator

@ChubYee share an export of your settings file here

@ChubYee
Copy link
Author

ChubYee commented Jun 19, 2022

Sir yes sir, would you want my anki template card styling info as well?
yomichan-settings-2022-06-19-15-22-15.zip

@toasted-nutbread
Copy link
Collaborator

Not necessary, what you provided is sufficient.

  1. Set the option Compact glossaries to on.
  2. Change line 107 from:
    <ul>{{~#each definition.definitions~}}<li>{{~> glossary-single . brief=../brief noDictionaryTag=../noDictionaryTag ~}}</li>{{~/each~}}</ol>
    To:
    <ul>{{~#each definition.definitions~}}<li style="list-style-type: none;">&bull; {{~> glossary-single . brief=../brief noDictionaryTag=../noDictionaryTag ~}}</li>{{~/each~}}</ol>

@ChubYee
Copy link
Author

ChubYee commented Jun 19, 2022

WOWOWOW it's looking so closeeeee. The centering is a bit off-centered for some reason?
Is there a way to have the ";" be right after the word, like:
pretty; lovely; beautiful

And is there a way to have a space between the bullet point and the first word?
Capture

@toasted-nutbread
Copy link
Collaborator

  1. <ul style="padding-left: 0;">{{~#each definition.definitions~}}<li style="list-style-type: none;">&bull; {{> glossary-single . brief=../brief noDictionaryTag=../noDictionaryTag ~}}</li>{{~/each~}}</ol>
  2. See point 2 in yomichan styling #2179 (comment), remove the space before the  ; .

@ChubYee
Copy link
Author

ChubYee commented Jun 20, 2022

NICEEEE
aaaCapture

When there are multiple pitch readings, it changes.
image (1)

Is there a way to change the font size of the meaning/dictionary text? I'm trying to make it a bit larger so it's bigger than the sentence font size. I tried changing the px value through Anki field and card styling, but it didn't do anything. (In the Anki card styling for the jidoujisho card, the "sentence" font-size is 15px and the "meaning" font-size is 17px)

And is there a way to make the distance/gap between the line and the dictionary text/meaning field a bit more spread apart from each other, like in the jidoujisho card? When I added a <br> to the yomichan Anki template, it made the gap/distance too big.

@toasted-nutbread
Copy link
Collaborator

You can set the font size on any element by adding style="font-size: ?px;, as well as any other CSS styles. I'd recommend looking up handlebars templates and HTML, as that's what is being used to generate this content. In Anki, you can also open the card browser and click the </> button to see how existing cards have their HTML formatted, and you can use that as reference to set up your templates. You'll likely have to experiment with it to get it to look exactly how you want.

@ChubYee
Copy link
Author

ChubYee commented Jun 20, 2022

Do you know what code I could use to get rid of the numbers of the pitches and not have the pitch readings suddenly become larger?

@toasted-nutbread
Copy link
Collaborator

That's happening in here due to the pitchCount checks adding <ol> and <li> tags.

{{#*inline "pitch-accent-list"}}
{{~#if (op ">" pitchCount 0)~}}
{{~#if (op ">" pitchCount 1)~}}<ol>{{~/if~}}
{{~#each pitches~}}
{{~#each pitches~}}
{{~#if (op ">" ../../pitchCount 1)~}}<li>{{~/if~}}
{{~> pitch-accent-item-disambiguation~}}
{{~> pitch-accent-item format=../../format~}}
{{~#if (op ">" ../../pitchCount 1)~}}</li>{{~/if~}}
{{~/each~}}
{{~/each~}}
{{~#if (op ">" pitchCount 1)~}}</ol>{{~/if~}}
{{~else~}}
No pitch accent data
{{~/if~}}
{{/inline}}

@ChubYee
Copy link
Author

ChubYee commented Jun 20, 2022

Okay. I deleted both <ol> and both <li>, and then also tried deleting just the <ol> and <li> . But the results were the same

How would I get it to stack?
dasuiasfjkhadgkCapture

@toasted-nutbread
Copy link
Collaborator

Add <br> where the </li> tag used to be.

@ChubYee
Copy link
Author

ChubYee commented Jun 22, 2022

OMG, it worked! And I was also able to change the text size. There's only one last thing. What code would I use to tweak the position of the glossary definitions to raise it a bit higher? Does it matter where it's pasted? I tried to use something like this but wasn't able to move it up.

@toasted-nutbread
Copy link
Collaborator

Change the <div style="text-align: left;"> to something like <div style="text-align: left; margin-top: -###px;"> (change ### to the number of pixels, note the negative sign to move it up).

@ChubYee
Copy link
Author

ChubYee commented Jun 22, 2022

Seiko!! But for some reason, with definitions that take up only 1 line, it ends up a little higher?
combine_images
I tried adding a padding-top to counter it, which made the single-line definitions go down to where they are supposed to, but made everything else go downer than they are supposed to

@ChubYee
Copy link
Author

ChubYee commented Jun 25, 2022

Were you able to find a solution?

@toasted-nutbread
Copy link
Collaborator

What is the current value of your templates?

@ChubYee
Copy link
Author

ChubYee commented Jun 25, 2022

front template

<br><br><br>
<div id="word">{{Word}}

</div> 
<p id="sentence">{{Sentence}}

back template

<br><br><br><p id="reading">{{Reading}}</p><p id="word">{{Word}}


<p id="sentence">{{Sentence}}
<hr>
<p id="meaning">{{Meaning}}







</div>{{Audio}}

yomichan template

{{#*inline "glossary-single"}}
    {{~#unless brief~}}
        {{~#scope~}}
            {{~#set "any" false}}{{/set~}}
            {{~#each definitionTags~}}
                {{~#if (op "||" (op "!" @root.compactTags) (op "!" redundant))~}}
                    {{~#if (get "any")}}, {{else}}<i>({{/if~}}
                    {{name}}
                    {{~#set "any" true}}{{/set~}}
                {{~/if~}}
            {{~/each~}}
            {{~#unless noDictionaryTag~}}
                {{~#if (op "||" (op "!" @root.compactTags) (op "!==" dictionary (get "previousDictionary")))~}}
                    {{~#if (get "any")}}, {{else}}<i>({{/if~}}
                    {{dictionary}}
                    {{~#set "any" true}}{{/set~}}
                {{~/if~}}
            {{~/unless~}}
            {{~#if (get "any")}})</i> {{/if~}}
        {{~/scope~}}
        {{~#if only~}}({{#each only}}{{.}}{{#unless @last}}, {{/unless}}{{/each}} only) {{/if~}}
    {{~/unless~}}
    {{~#if (op "<=" glossary.length 1)~}}
        {{#each glossary}}{{#formatGlossary ../dictionary}}{{{.}}}{{/formatGlossary}}{{/each}}
    {{~else if @root.compactGlossaries~}}
        {{#each glossary}}{{#formatGlossary ../dictionary}}{{{.}}}{{/formatGlossary}}{{#unless @last}}; {{/unless}}{{/each}}
    {{~else~}}
        <ul>{{#each glossary}}<li>{{#formatGlossary ../dictionary}}{{{.}}}{{/formatGlossary}}</li>{{/each}}</ul>
    {{~/if~}}
    {{~#set "previousDictionary" dictionary~}}{{~/set~}}
{{/inline}}

{{#*inline "audio"}}
    {{~#if (hasMedia "audio")~}}
        [sound:{{#getMedia "audio"}}{{/getMedia}}]
    {{~/if~}}
{{/inline}}

{{#*inline "character"}}
    {{~definition.character~}}
{{/inline}}

{{#*inline "dictionary"}}
    {{~definition.dictionary~}}
{{/inline}}

{{#*inline "expression"}}
    {{~#if merge~}}
        {{~#if modeTermKana~}}
            {{~#each definition.reading~}}
                {{{.}}}
                {{~#unless @last}}、{{/unless~}}
            {{~else~}}
                {{~#each definition.expression~}}
                    {{{.}}}
                    {{~#unless @last}}、{{/unless~}}
                {{~/each~}}
            {{~/each~}}
        {{~else~}}
            {{~#each definition.expression~}}
                {{{.}}}
                {{~#unless @last}}、{{/unless~}}
            {{~/each~}}
        {{~/if~}}
    {{~else~}}
        {{~#if modeTermKana~}}
            {{~#if definition.reading~}}
                {{definition.reading}}
            {{~else~}}
                {{definition.expression}}
            {{~/if~}}
        {{~else~}}
            {{definition.expression}}
        {{~/if~}}
    {{~/if~}}
{{/inline}}

{{#*inline "furigana"}}
    {{~#if merge~}}
        {{~#each definition.expressions~}}
            <span class="expression-{{termFrequency}}">{{~#furigana}}{{{.}}}{{/furigana~}}</span>
            {{~#unless @last}}、{{/unless~}}
        {{~/each~}}
    {{~else~}}
        {{#furigana}}{{{definition}}}{{/furigana}}
    {{~/if~}}
{{/inline}}

{{#*inline "furigana-plain"}}
    {{~#if merge~}}
        {{~#each definition.expressions~}}
            <span class="expression-{{termFrequency}}">{{~#furiganaPlain}}{{{.}}}{{/furiganaPlain~}}</span>
            {{~#unless @last}}、{{/unless~}}
        {{~/each~}}
    {{~else~}}
        {{#furiganaPlain}}{{{definition}}}{{/furiganaPlain}}
    {{~/if~}}
{{/inline}}

{{~#*inline "glossary"~}}
    <div style="text-align: center; margin-top: -40px;">
    <div style="font-size: 17px;">
    {{~#scope~}}
        {{~#if (op "===" definition.type "term")~}}
            {{~> glossary-single definition brief=brief noDictionaryTag=noDictionaryTag ~}}
        {{~else if (op "||" (op "===" definition.type "termGrouped") (op "===" definition.type "termMerged"))~}}
            {{~#if (op ">" definition.definitions.length 1)~}}
              <ul style="padding-left: 0;">{{~#each definition.definitions~}}<li style="list-style-type: none;">&bull; {{> glossary-single . brief=../brief noDictionaryTag=../noDictionaryTag ~}}</li>{{~/each~}}</ol>
            {{~else~}}
                {{~#each definition.definitions~}}{{~> glossary-single . brief=../brief noDictionaryTag=../noDictionaryTag ~}}{{~/each~}}
            {{~/if~}}
        {{~else if (op "===" definition.type "kanji")~}}
            {{~#if (op ">" definition.glossary.length 1)~}}
                <ol>{{#each definition.glossary}}<li>{{.}}</li>{{/each}}</ol>
            {{~else~}}
                {{~#each definition.glossary~}}{{.}}{{~/each~}}
            {{~/if~}}
        {{~/if~}}
    {{~/scope~}}
    </div>
{{~/inline~}}

{{#*inline "glossary-no-dictionary"}}
    {{~> glossary noDictionaryTag=true ~}}
{{/inline}}

{{#*inline "glossary-brief"}}
    {{~> glossary brief=true ~}}
{{/inline}}

{{#*inline "kunyomi"}}
    {{~#each definition.kunyomi}}{{.}}{{#unless @last}}, {{/unless}}{{/each~}}
{{/inline}}

{{#*inline "onyomi"}}
    {{~#each definition.onyomi}}{{.}}{{#unless @last}}, {{/unless}}{{/each~}}
{{/inline}}

{{#*inline "reading"}}
    {{~#unless modeTermKana~}}
        {{~#if merge~}}
            {{~#each definition.reading~}}
                {{{.}}}
                {{~#unless @last}}、{{/unless~}}
            {{~/each~}}
        {{~else~}}
            {{~definition.reading~}}
        {{~/if~}}
    {{~/unless~}}
{{/inline}}

{{#*inline "sentence"}}
    {{~#if definition.cloze}}{{definition.cloze.sentence}}{{/if~}}
{{/inline}}

{{#*inline "cloze-prefix"}}
    {{~#if definition.cloze}}{{definition.cloze.prefix}}{{/if~}}
{{/inline}}

{{#*inline "cloze-body"}}
    {{~#if definition.cloze}}{{definition.cloze.body}}{{/if~}}
{{/inline}}

{{#*inline "cloze-suffix"}}
    {{~#if definition.cloze}}{{definition.cloze.suffix}}{{/if~}}
{{/inline}}

{{#*inline "tags"}}
    {{~#mergeTags definition group merge}}{{this}}{{/mergeTags~}}
{{/inline}}

{{#*inline "url"}}
    <a href="{{definition.url}}">{{definition.url}}</a>
{{/inline}}

{{#*inline "screenshot"}}
    {{~#if (hasMedia "screenshot")~}}
        <img src="{{#getMedia "screenshot"}}{{/getMedia}}" />
    {{~/if~}}
{{/inline}}

{{#*inline "document-title"}}
    {{~context.document.title~}}
{{/inline}}

{{! Pitch Accents }}
{{#*inline "pitch-accent-item"}}
    {{~#pronunciation format=format reading=reading downstepPosition=position nasalPositions=nasalPositions devoicePositions=devoicePositions~}}{{~/pronunciation~}}
{{/inline}}

{{#*inline "pitch-accent-item-disambiguation"}}
    {{~#scope~}}
        {{~#set "exclusive" (spread exclusiveExpressions exclusiveReadings)}}{{/set~}}
        {{~#if (op ">" (property (get "exclusive") "length") 0)~}}
            {{~#set "separator" ""~}}{{/set~}}
            <em>({{#each (get "exclusive")~}}
                {{~#get "separator"}}{{/get~}}{{{.}}}
            {{~/each}} only) </em>
        {{~/if~}}
    {{~/scope~}}
{{/inline}}

{{#*inline "pitch-accent-list"}}
    {{~#if (op ">" pitchCount 0)~}}
        {{~#if (op ">" pitchCount 1)~}}{{~/if~}}
        {{~#each pitches~}}
            {{~#each pitches~}}
                {{~#if (op ">" ../../pitchCount 1)~}}{{~/if~}}
                    {{~> pitch-accent-item-disambiguation~}}
                    {{~> pitch-accent-item format=../../format~}}
                {{~#if (op ">" ../../pitchCount 1)~}}<br>{{~/if~}}
            {{~/each~}}
        {{~/each~}}
        {{~#if (op ">" pitchCount 1)~}}{{~/if~}}
    {{~else~}}
        No pitch accent data
    {{~/if~}}
{{/inline}}

{{#*inline "pitch-accents"}}
    {{~> pitch-accent-list format='text'~}}
<style>
span[style*="border-color:currentColor"] {
  border-color: #ff0000 !important;
}
span[style*="border-color:currentColor"][style*="height:"] {
  right: -0.06em !important;
  height: 1.35em !important;
  bottom: 0 !important;
  top: -0.1em !important;
}
</style>
{{/inline}}

{{#*inline "pitch-accent-graphs"}}
    {{~> pitch-accent-list format='graph'~}}
{{/inline}}

{{#*inline "pitch-accent-positions"}}
    {{~> pitch-accent-list format='position'~}}
{{/inline}}
{{! End Pitch Accents }}

{{#*inline "clipboard-image"}}
    {{~#if (hasMedia "clipboardImage")~}}
        <img src="{{#getMedia "clipboardImage"}}{{/getMedia}}" />
    {{~/if~}}
{{/inline}}

{{#*inline "clipboard-text"}}
    {{~#if (hasMedia "clipboardText")}}{{#getMedia "clipboardText"}}{{/getMedia}}{{/if~}}
{{/inline}}

{{#*inline "conjugation"}}
    {{~#if definition.reasons~}}
        {{~#each definition.reasons~}}
            {{~#if (op ">" @index 0)}} « {{/if~}}
            {{.}}
        {{~/each~}}
    {{~/if~}}
{{/inline}}

{{#*inline "frequencies"}}
    {{~#if (op ">" definition.frequencies.length 0)~}}
        <ul style="text-align: left;">
        {{~#each definition.frequencies~}}
            <li>
            {{~#if (op "!==" ../definition.type "kanji")~}}
                {{~#if (op "||" (op ">" ../uniqueExpressions.length 1) (op ">" ../uniqueReadings.length 1))~}}(
                    {{~#furigana expression reading~}}{{~/furigana~}}
                ) {{/if~}}
            {{~/if~}}
            {{~dictionary}}: {{frequency~}}
            </li>
        {{~/each~}}
        </ul>
    {{~/if~}}
{{/inline}}

{{#*inline "stroke-count"}}
    {{~#scope~}}
        {{~#set "found" false}}{{/set~}}
        {{~#each definition.stats.misc~}}
            {{~#if (op "===" name "strokes")~}}
                {{~#set "found" true}}{{/set~}}
                Stroke count: {{value}}
            {{~/if~}}
        {{~/each~}}
        {{~#if (op "!" (get "found"))~}}
            Stroke count: Unknown
        {{~/if~}}
    {{~/scope~}}
{{/inline}}

{{#*inline "part-of-speech-pretty"}}
    {{~#if (op "===" . "v1")~}}Ichidan verb
    {{~else if (op "===" . "v5")~}}Godan verb
    {{~else if (op "===" . "vk")~}}Kuru verb
    {{~else if (op "===" . "vs")~}}Suru verb
    {{~else if (op "===" . "vz")~}}Zuru verb
    {{~else if (op "===" . "adj-i")~}}I-adjective
    {{~else if (op "===" . "n")~}}Noun
    {{~else~}}{{.}}
    {{~/if~}}
{{/inline}}

{{#*inline "part-of-speech"}}
    {{~#scope~}}
        {{~#if (op "!==" definition.type "kanji")~}}
            {{~#set "first" true}}{{/set~}}
            {{~#each definition.expressions~}}
                {{~#each wordClasses~}}
                    {{~#unless (get (concat "used_" .))~}}
                        {{~> part-of-speech-pretty . ~}}
                        {{~#unless (get "first")}}, {{/unless~}}
                        {{~#set (concat "used_" .) true~}}{{~/set~}}
                        {{~#set "first" false~}}{{~/set~}}
                    {{~/unless~}}
                {{~/each~}}
            {{~/each~}}
            {{~#if (get "first")~}}Unknown{{~/if~}}
        {{~/if~}}
    {{~/scope~}}
{{/inline}}

{{#*inline "search-query"}}
    {{~#multiLine}}{{context.fullQuery}}{{/multiLine~}}
{{/inline}}

{{#*inline "selection-text"}}
    {{~#if (hasMedia "selectionText")}}{{#getMedia "selectionText"}}{{/getMedia}}{{/if~}}
{{/inline}}

{{#*inline "sentence-furigana"}}
    {{~#if definition.cloze~}}
        {{~#if (hasMedia "textFurigana" definition.cloze.sentence)~}}
            {{#getMedia "textFurigana" definition.cloze.sentence escape=false}}{{/getMedia}}
        {{~else~}}
            {{definition.cloze.sentence}}
        {{~/if~}}
    {{~/if~}}
{{/inline}}

{{~> (lookup . "marker") ~}}

if this is what you meant?

@toasted-nutbread
Copy link
Collaborator

Start by changing

    <div style="text-align: center; margin-top: -40px;">
    <div style="font-size: 17px;">

to

    <div style="text-align: center; margin-top: -40px; font-size: 17px;">

and see if that affects anything

@ChubYee
Copy link
Author

ChubYee commented Jun 25, 2022

It made it go up
image_2022-06-25_144524499
and also made the cards that have more than one line of definition go up too
asdasfgdf

@toasted-nutbread
Copy link
Collaborator

Can you share your Styling settings in Anki for this card type?

@ChubYee
Copy link
Author

ChubYee commented Jun 25, 2022

p {
    margin: 0px
}

h2 {
    margin: 0px
}

small {
    margin: 0px
}

.card {
  font-family: arial;
  font-size: 15px;
  text-align: center;
  color: black;
  background-color: white;
  white-space: pre-line;
}

#word {
    font-size: 23px
}

#reading {
    font-size: 10px
}

#meaning {
    font-size: 17px
}

#sentence {
    font-size: 15px
}

@toasted-nutbread
Copy link
Collaborator

Remove the margin-top: -40px; rule from
<div style="text-align: center; margin-top: -40px; font-size: 17px;">

Change <ul style="padding-left: 0;"> to
<ul style="padding: 0; margin: 0">

@ChubYee
Copy link
Author

ChubYee commented Jun 25, 2022

.........................................................................
kanpeki desu
combine_images (2)
Thanks for all the help. You make me want to go grind 100 new cards. In fact, I will go do that. desu.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants