IOS Safari에서 pre 태그 스타일 오류 수정

Paikwiki
121.131.43.87 (토론)님의 2020년 6월 11일 (목) 15:54 판 (→‎해결책: 오타 수정)
(차이) ← 이전 판 | 최신판 (차이) | 다음 판 → (차이)
이동: 둘러보기, 검색

HTML 엘리먼트 <pre>는 형식이 이미 적용된(preformatted) 텍스트를 형식에 맞춰 표현하기 위한 태그이다. 예를 들어, 행과 연을 표현하는 것이 중요한 시(詩, poem)와 같은 텍스트를 표현할 때 사용하는 엘리먼트다. 물론, 개발자 입장에서는 코드의 들여쓰기를 제대로 표현하는데 사용하는 태그이기도 하다. 이 태그를 이용해 이런 것도 할 수 있다.

      ┌──────────┐                      ┌───────────┐
      │ Window   │                      │ Rectangle │
      ├──────────┤ rectangle            ├───────────┤
      │ Area() • ├─────────────────────▶︎│ Area() •  │
      └────────┼─┘                      ├────────┼──┤
               ┊                        │ width  ┊  │
               ┊                        │ height ┊  │
               ┊                        └────────┼──┘
               ┊                                 ┊
┌──────────────┴─────────────╮   ┌───────────────┴───────╮
│ return rectangle -> Area() │   │ return width * height │
└────────────────────────────┘   └───────────────────────┘

아스키 부호를 이용해 다이어그램을 그리는 것이다. <pre>는 일반적으로 줄바꿈이 되지 않도록 white-space 프로퍼티의 값이 pre로 정의되어 있다. <pre>의 공백 처리 방식이 pre인 것이다.

문제점[ ]

그런데 iOS 사파리에서 이 다이어그램를 보면 의도치 않게 줄바꿈이 발생한다. 지금 이 위키에는 줄바꿈을 방지할 수 있도록 스타일을 수정해서 재현이 안될테니 강제로 스타일을 적용해 재현하자면 아래와 같다(물론 아래 다이어그램은 아이폰처럼 작은 화면의 iOS 사파리에서만 깨진다).

      ┌──────────┐                      ┌───────────┐
      │ Window   │                      │ Rectangle │
      ├──────────┤ rectangle            ├───────────┤
      │ Area() • ├─────────────────────▶︎│ Area() •  │
      └────────┼─┘                      ├────────┼──┤
               ┊                        │ width  ┊  │
               ┊                        │ height ┊  │
               ┊                        └────────┼──┘
               ┊                                 ┊
┌──────────────┴─────────────╮   ┌───────────────┴───────╮
│ return rectangle -> Area() │   │ return width * height │
└────────────────────────────┘   └───────────────────────┘

해결책[ ]

이 문제를 해결하기 위해 검색을 해본 결과 <pre> 태그에 아래처럼 프로퍼티를 하나 추가해주면 해결할 수 있었다.

pre {
  word-wrap: normal;
}

word-wrap 속성에 대해서는 아래 링크에서 확인할 수 있다.

- MDN Web Docs - overflow-wrap

word-wrap이 아니고 overflow-wrap 일까? 그 이유는 위 문서의 본문에서 찾을 수 있다. 원래 word-wrap이라는 이름으로 마이크로소프트에서 사용하기 시작했고, 현재는 overflow-wrap으로 이름이 변경된 것이다. 실제로 크롬 개발자 도구에서 확인해보면 word-wrap 속성에 가운데줄(line-through)이 표시되는 것을 볼 수 있다.

그럼 <pre>에도 word-wrap 대신 overflow-wrap을 지정하면 되지 않을까? 놀랍게도 그렇게 해서는 문제를 해결할 수 없다. 반드시 word-wrap 프로퍼티를 지정해줘야 줄바꿈 오류를 해결할 수 있다.

word-wrap을 사용하는지 여전히 의문이긴 하지만, 이렇게 해서 아이폰의 사파리 브라우저가 나의 다이어그램을 깨지지 않게 잘 출력하도록 수정할 수 있었다.

참고링크[ ]

마지막 편집: 2020년 6월 11일 (목) 15:54