Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Reduce the scope of 'list-style-position: inside !important;' attribute #745

Closed
wants to merge 1 commit into from
Closed

Reduce the scope of 'list-style-position: inside !important;' attribute #745

wants to merge 1 commit into from

Conversation

zq1997
Copy link
Contributor

@zq1997 zq1997 commented Mar 27, 2019

PR Checklist

Please check if your PR fulfills the following requirements:

  • The commit message follows our guidelines.
  • Tests for the changes was maked (for bug fixes / features).
    • Muse | Mist have been tested.
    • Pisces | Gemini have been tested.
  • Docs in NexT website have been added / updated (for new features).

PR Type

What kind of change does this PR introduce?

  • Bugfix.
  • Feature.
  • Code style update (formatting, local variables).
  • Refactoring (no functional changes, no api changes).
  • Build related changes.
  • CI related changes.
  • Documentation content changes.
  • Other... Please describe:

What is the current behavior?

This is an amend PR for #669 which commit by me.
In that PR I add list-style-position: inside !important; for li element, because overflow attribute will make the leading symbol (dot/circle for unordered or number for ordered) disappear.
However, with more test I found that, this phenomenon only take case if li itself has overflow attribute, not when its child elements has overflow attribute.

Just try the following html code and you will understand what I mean https://www.w3schools.com/Html/tryit.asp?filename=tryhtml_intro

<!DOCTYPE html>
<html>
<body>
<style>
.has-jax {
	overflow-x: auto;
    overflow-y: hidden;
}
.change_position {
	list-style-position: inside !important;
}
</style>

<ul>
<li class='has-jax'>li with overflow, dot disappera</li>
<li class='has-jax'>li with overflow, dot disappera</li>
</ul>

<ul>
<li><p class='has-jax'>p inside li with overflow, every thing is ok</p></li>
<li><p class='has-jax'>p inside li with overflow, no need to fix</p></li>
</ul>


<ul>
<li class='has-jax change_position'>li with overflow, I fixed it</li>
<li class='has-jax change_position'>li with overflow, I fixed it</li>
</ul>
</body>
</html>

What is the new behavior?

So, I reduce the effect scope of the css selector, this is safer.
In fact, list-style-position: inside !important; attribute has some side effect on some browser, it will make the leading symbol and list item content displayed in two different line. With this constraint, such side effect is eliminated.

Does this PR introduce a breaking change?

  • Yes.
  • No.

@CLAassistant
Copy link

CLAassistant commented Mar 27, 2019 •
edited
Loading

CLA assistant check
All committers have signed the CLA.

@stevenjoezhang
Copy link
Contributor

This will broke:

- $\alpha$
- $\beta$
- Hello, world

屏幕快照 2019-03-27 下午1 10 08

@1v9 1v9 added the CSS label Mar 27, 2019
@zq1997
Copy link
Contributor Author

zq1997 commented Mar 27, 2019

@stevenjoezhang I made an amend commit, how about this one?

@stevenjoezhang
Copy link
Contributor

@zq-97 Yes, it does solve the problem, but is not a wonderful solution... Example:

List1:
- $\alpha$
- Hello, world

List2:
- alpha
- Hello, world

The indent of these two lists will be different, the styles are inconsistent...

My suggestion is to remove list-style-position: inside !important; totally, and add a warning to the documentation of NexT (about the bug: https://stackoverflow.com/questions/21769248/list-with-nested-overflow-x-hidden-hides-list-counter-point-why-is-this-a-b), and advise users to avoid using math formulas in the list. Alternative solution is using

\begin{align*}
\alpha
\text{hello,world}
\end{align*}

How do you like it?

@zq1997
Copy link
Contributor Author

zq1997 commented Mar 29, 2019

@stevenjoezhang I agree with you point.

This problem is really annoying because it is a browser bug instead of design error.

In fact, global list-style-position: inside !important; makes to much side effect in normal cases even mathjax: false. I agree that this attribute should be removed.

Maybe such problem will be fix by future browser, or if we can use :has css selector in the future https://drafts.csswg.org/selectors-4/#relational.

@zq1997 zq1997 closed this Mar 29, 2019
@stevenjoezhang stevenjoezhang mentioned this pull request Mar 29, 2019
Merged
15 tasks
@weekly-digest weekly-digest bot mentioned this pull request Mar 31, 2019
Closed
@ivan-nginx ivan-nginx removed the CSS label Apr 2, 2019
@1v9 1v9 mentioned this pull request May 29, 2019
Closed
11 tasks
@anthqiu anthqiu mentioned this pull request Jun 10, 2019
Closed
11 tasks
@stevenjoezhang
Copy link
Contributor

Superseded by #1004

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@stevenjoezhang stevenjoezhang Awaiting requested review from stevenjoezhang

@ivan-nginx ivan-nginx Awaiting requested review from ivan-nginx

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@zq1997 @CLAassistant @stevenjoezhang @ivan-nginx @1v9