Skip to content
This repository has been archived by the owner on May 11, 2021. It is now read-only.

삽입한 표가 문단 내에서 정렬이 되지 않음 #20

Open
pastelmind opened this issue Jul 18, 2018 · 2 comments
Open

삽입한 표가 문단 내에서 정렬이 되지 않음 #20

pastelmind opened this issue Jul 18, 2018 · 2 comments
Assignees
@pastelmind
Labels
type: bug Something isn't working
Projects
Ruliweb-HotS
Milestone
Major usability i...

Comments

@pastelmind
Copy link
Owner

pastelmind commented Jul 18, 2018 •
edited
Loading

게시판에 영웅/기술/특성 표를 삽입하고 오른쪽이나 가운데 정렬을 지정한 뒤에 글을 저장하면 정렬한 설정이 무시되고 항상 왼쪽으로 정렬됩니다.

버그 리포트: http://bbs.ruliweb.com/family/4527/board/181429/read/9440162#ct_35475130

현상 분석

루리웹에서 글을 쓸 때 가운데 정렬을 설정하면 아래와 같은 형태가 됩니다.

<p style="text-align">가운데 정렬된 글</p>

여기서 "가운데"와 "정렬된 글" 사이에 공략툴로 표를 삽입하면 다음과 같은 형태가 됩니다.

<p style="text-align">가운데 <details class="ruliweb-hots-talent-table">...</details>정렬된 글</p>

이때 편집창 좌측 하단의 편집 모드를 입력 모드 WYSIWYG 입력 모드 → HTML 편집 HTML 편집 모드 → 입력 모드 WYSIWYG 입력 모드 로 변경하거나, 글을 저장하면 문제가 발생합니다. 루리웹이 <details> 태그를 <p> 내부에 있어서는 안 되는 것으로 인식하고 아래와 같이 <p> 태그 바깥으로 끌어내는 것입니다.

<p style="text-align">가운데</p>
<details class="ruliweb-hots-talent-table">...</details>정렬된 글

또한 사용자가 입력 모드에서 공략툴의 표가 포함된 문단을 가운데 정렬하려 할 경우, cheditor는 <p> 태그를 생성하는 것이 아니라 부모 element인 <body>에 style="text-align: center"를 적용하여 모든 내용이 가운데 정렬된 것처럼 보이게 만듭니다. 실제로 글을 저장할 경우 이 값은 적용되지 않으며, 공략툴의 표는 왼쪽으로 정렬됩니다.
@pastelmind pastelmind added the type: bug Something isn't working label Jul 18, 2018
@pastelmind pastelmind self-assigned this Jul 18, 2018
@pastelmind pastelmind added this to To do in Ruliweb-HotS via automation Jul 18, 2018
@pastelmind
Copy link
Owner Author

pastelmind commented Jul 23, 2018 •
edited
Loading

해결 방안

<details>를 다른 태그로 감싸면 루리웹이 <p> 바깥으로 끌어내지 못하게 막을 수 있지 않을까? 하여 여러 태그를 가지고 실험해 보았습니다. gist에 올린 테스트 케이스 보기

실험 결과

테스트한 여러 태그 중 유일하게 <button></button>으로 <details>를 감쌌을 때 루리웹이 강제로 끌어내지 않는 것을 확인했습니다. 다른 모든 태그는 <details>를 보호해 주지 못하거나, <textarea>, <select>와 같이 특별한 기능을 제공하기 때문에 <details>의 내용을 표시하기 부적합합니다.

적용 방안 및 한계점

<button></button>으로 <details>를 감싸는 꼼수에는 몇 가지 문제가 있습니다.

<button>의 기본 동작 및 스타일

<button>의 기본 동작과 스타일을 제거하고 일반적인 인라인 요소처럼 동작하게 만들어야 합니다.

  • <button>에 disabled 속성을 추가하여 클릭이 불가능하게 만듭니다.
  • 인라인 스타일로 margin: 0; padding: 0; border: none; cursor: auto을 적용하여 user agent 스타일 및 루리웹의 CSS를 덮어씁니다.

문단 정렬 변경하기

표를 삽입한 후에 문단(<p>)의 정렬 방식을 바꿀 경우, 문단 내부에 있던 <button><details>...</details></button> 태그가 <p>의 바깥으로 튕겨나옵니다. cheditor나 웹 브라우저의 동작을 뜯어고치는 것이 불가능에 가깝기 때문에, 이 현상에 대해서는 어찌하기 어렵습니다.

한 가지 대처 방안으로, 글을 편집할 때 <body>의 직계 자식인 <button>에 대해서는 다음과 같은 경고 문구를 띄우는 것을 고려할 수 있습니다.

이 표는 문단 태그에 포함되지 않아서 정렬할 수 없습니다. 문단을 먼저 정렬한 뒤에 표를 넣어주세요.

editor-iframe.css에서 CSS 가상 요소(pseudo-element)를 사용하고 있으므로, 별도의 툴팁을 추가하는 것은 어렵지 않습니다.

pastelmind added a commit that referenced this issue Jul 23, 2018
@pastelmind
Wrap inserted tables in <button disabled>
f9ff932 
See issue #20 for details
@pastelmind
Copy link
Owner Author

위의 해결 방안에 치명적인 문제가 발견되었습니다. <button></button>으로 감싼 <details> 태그는 파이어폭스에서 접기/펴기 기능이 동작하지 않습니다.

근본적인 원인은 <details>는 interactive content이며, 이러한 유형은 <button> 안에 올 수 없기 때문입니다. 참고로 <p> 안에 올 수 있는 요소는 phrasing content로 한정되어 있습니다. 따라서 <p> 안에 <details>가 오는 것 또한 이치에 맞지 않습니다.

여러 웹 브라우저 간의 호환성을 포기할 수는 없기에, 위의 해결 방안은 포기하려 합니다.

Ruliweb-HotS automation moved this from To do to Done Aug 2, 2018
pastelmind added a commit that referenced this issue Aug 2, 2018
@pastelmind
Revert "Wrap inserted tables in <button disabled>"
63363f6 
This reverts commits f9ff932 and
0ec56ab.
For details, see 3rd comment of issue #20:
#20 (comment)
@pastelmind pastelmind reopened this Aug 3, 2018
Ruliweb-HotS automation moved this from Done to In progress Aug 3, 2018
pastelmind added a commit that referenced this issue Aug 13, 2018
@pastelmind
Prevent Cheditor setting text-align on <body>
20dc342 
This prevents a situation where a <details> tag is shown as center-
aligned in the WYSIWYG editor, even though it is actually not the case.
While this is not a solution to issue #20, it will prevent a potentially
confusing experience for a user who attempts to center-align <details>
tags.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@pastelmind pastelmind

Labels
type: bug Something isn't working
Projects
Ruliweb-HotS
  
In progress
Milestone
Major usability improvements
Development

No branches or pull requests
1 participant
@pastelmind