search

ankidroid / Anki-Android

AnkiDroid: Anki flashcards on Android. Your secret trick to achieve superhuman information retention.
GNU General Public License v3.0
8.52k stars 2.21k forks source link

[BUG]: Review and Browse have different style #17058

Closed Juddd closed 4 weeks ago

Juddd commented 4 weeks ago

Checked for duplicates?

Does it also happen in the desktop version?

What are the steps to reproduce this bug?

This is the same card, but I found that the style is different in the Review and Browse：

Review (Normal)

Notice that there are wide white margin on both sides, and the distance to read horizontally is valuable for a phone

Browse (Abnormal)

Notice that there are wide white edges on both sides, and the distance to read horizontally is valuable for a phone

0ac37f0c31f9b4ca668156e172d46fc

This is HTML code of the card:

<ul><li>C</li></ul><div>Dennis Ritchie<div><ul><li>C++</li></ul></div><div>Bjarne Stroustrup</div></div>

The style in review is correct. This is my css configuration, and it seems to only work in review and not browse:

a[data-tippy-content]{
border-bottom:1px dashed #990;
}
:root{
 height:100%;/*这里原来为了加拉伸背景图片*/
}
body { 
tab-size: 2; 
min-width:342px;
}

mark{
 font-weight: bold;
 color:white;
 background:red;
}
.card {
 font-family: "arial";
 font-size: 18px;
 text-align: left;
 color: black;
 background:rgb(253, 246, 227);
}
.card *{
 word-break:break-all;
 /*允许行内换行*/
 word-wrap:break-word;
 /*允许一个单词从内部断行*/
}
font[color]{
font-weight:bolder;
}

li:nth-last-of-type(1){
margin-bottom:10px;
}

ul{
margin: 5px 0px -3px 15px;
padding: 0;
}
ol{
margin: 5px 0px -3px 20px;
padding: 0;
}
#fore{
text-align: center;
word-wrap:break-word;
}
/*fore类下面的img标签*/
#fore img{
margin:0 auto;
}
.c,.myCodeClass,code{
 font-family: "Arial";
 font-size: 13px;
 border:0px solid #aaa;
 border-radius:1px;
 background-color: rgb(235, 235, 235);
 padding:3px;
 margin: 5px 0 5px 0;
 white-space:pre-wrap;
 /*如何处理空白元素*/

}
/*codehilite是md下生成的*/
.codehilite{
margin:0 0 0 0;
 font-family: "Arial";
 font-size: 13px;
 border:0px solid #aaa;
 border-radius:1px;
 background-color: rgb(235, 235, 235);
 padding: 2px;
}

pre{
 font-size: 15px;
 white-space:pre-wrap;
 /*如何处理空白元素*/
}
.highlight{
 font-size: 15px;
}
pre[style="line-height: 125%"]{
 background:rgb(235, 235, 235);
 border:1px solid #aaa;
 padding:3px;
 margin:0px;
 margin-top:1px;
 margin-bottom:2px;
}
blockquote
{
 background:lightcyan; 
 font-size: 17px;
 border-left:4px solid red;
 padding-left:5px;
 margin-left:0;
 margin-right:0;
 margin-bottom:7px;
 margin-top:4px;
 word-break:break-all;
}
//img{
display:block;
margin:0px;
}
kbd {
    box-shadow: inset 0px 1px 0px 0px #ffffff;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9) );
    background-color: #f9f9f9;
    border-radius: 5px;
    border: 1px solid #dcdcdc;
    display: inline-block;
    font-size: 0.95em;
    height: 20px;
    line-height: 20px;
    padding: 1px 1px;
    text-align: center;
    text-shadow: 1px 1px 0px #ffffff;
}

ps：This problem does not exist in version 2.17.6, and your upgrades always seem to bring a lot of bugs

Expected behaviour

I expect the styles in browse to be consistent with those in review

Debug info

AnkiDroid Version = 2.19alpha12 (f720ae030b8920c73f957d64d7044e95242f7719)

Backend Version = 0.1.40-anki24.06.3 (24.06.3 d678e39350a2d243242a69f4e22f5192b04398f2)

Android Version = 14 (SDK 34)

ProductFlavor = full

Manufacturer = HONOR

Model = FRI-AN10

Hardware = qcom

Webview User Agent = Mozilla/5.0 (Linux; Android 14; FRI-AN10 Build/HONORFRI-AN10; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/127.0.6533.103 Mobile Safari/537.36

ACRA UUID = 65daa004-9a5c-48f1-86ae-3faa312ce6cb

FSRS Enabled = false

Crash Reports Enabled = true

(Optional) Anything else you want to share?

No response

Research

user1823 commented 4 weeks ago

Duplicate of

Juddd commented 4 weeks ago

Duplicate of

After I use the css in your link:

.mobile body {
 margin-left: 6px;
 margin-right: 6px;
}

Then I get:

The margin is still: image

user1823 commented 4 weeks ago

The margin is still:

Well, I use the Black theme. So, the margin doesn't really stand out as in your case.

I will let a maintainer reply.

brishtibheja commented 4 weeks ago

It's still a developer option but a lot of such issues can be avoided in the new reviewer (access the setting by going to Settings > About and click the app logo multiple times).

The previewer is really good.

BrayanDSO commented 4 weeks ago

Readability trumps over screen space IMO. And if you see any "reading" app, you'll notice that the margin that we are using is relatively small compared to them or compared to most design guidelines.

In an ideal world, everything in the reviewer would be extensible and editable with HTML/CSS/Js so everyone can do whatever they want, but that depends on the development of Anki Desktop, and tbh I don't see that happening with how things are going.

Juddd commented 4 weeks ago

It's still a developer option but a lot of such issues can be avoided in the new reviewer (access the setting by going to Settings > About and click the app logo multiple times).

The previewer is really good.

You seem to be wrong, I don't like the browser style. I prefer to keep the original style:

Beauty is secondary to me, the phone screen is relatively narrow, I think the same line shows more content, always more important than the so-called beauty. But my problem is that the developers don't seem to want me to go back to the old style

Juddd commented 4 weeks ago

everything in the reviewer would be extensible and editable with HTML/CSS/Js so everyone can do whatever they want

Before v2.17.6 I was able to control this margin with css, but after that I can't, isn't that a step backwards? Some people like wide margins, but I really don't like them, is there any way I can adjust them?

brishtibheja commented 4 weeks ago

Go to the forums: forums.ankiweb.net

Someone might give you a solution