yomichan styling - Githubissues

ChubYee commented 2 years ago

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)

toasted-nutbread commented 2 years ago

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}}

The | can be changed in {{#*inline "glossary-single"}}

# Line 26
{{#each glossary}}{{#formatGlossary ../dictionary}}{{{.}}}{{/formatGlossary}}{{#unless @last}} | {{/unless}}{{/each}}
                                                                                   Right here ^

Change the <ol>/</ol> tags to <ul>/</ul> in {{~#*inline "glossary"~}} and change your Anki field template from {glossary} to {glossary-brief}.
Change <div style="text-align: left;"> to <div style="text-align: center;"> in {{~#*inline "glossary"~}}.

Thermospore commented 2 years ago

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

ChubYee commented 2 years ago

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

Thermospore commented 2 years ago

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

Thermospore commented 2 years ago

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

ChubYee commented 2 years ago

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 commented 2 years ago

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

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

Thermospore commented 2 years ago

こんな感じ

ChubYee commented 2 years ago

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

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 commented 2 years ago

こんな感じ

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 commented 2 years ago

@ChubYee share an export of your settings file here

ChubYee commented 2 years ago

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 commented 2 years ago

Not necessary, what you provided is sufficient.

Set the option Compact glossaries to on.

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 commented 2 years ago

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 commented 2 years ago

<ul style="padding-left: 0;">{{~#each definition.definitions~}}<li style="list-style-type: none;">&bull; {{> glossary-single . brief=../brief noDictionaryTag=../noDictionaryTag ~}}</li>{{~/each~}}</ol>

See point 2 in https://github.com/FooSoft/yomichan/issues/2179#issuecomment-1159609248, remove the space before the ; .

ChubYee commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

https://github.com/FooSoft/yomichan/blob/4e7762edacb6cfdb49207bbf43102a04706c78a1/ext/data/templates/default-anki-field-templates.handlebars#L202-L217

ChubYee commented 2 years ago

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 commented 2 years ago

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

ChubYee commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

Were you able to find a solution?

toasted-nutbread commented 2 years ago

What is the current value of your templates?

ChubYee commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

ChubYee commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

FooSoft / yomichan

yomichan styling #2179

front template

back template