WIT – NTS UIT Blog

크롬37이상에서 영문 일부에 공백이 생김

Posted by in BugReport

서비스명: 지식백과 / 제보자 : 정사라 현상 재현환경 윈도우 크롬 37 이상 돋움/굴림으로 선언한 페이지에서 영문자를 표현할 경우, 일부 글자에서 자간이 넓어져 띄어쓰기된것 처럼 보입니다. test url : http://jsbin.com/mebabecave/1 오류 화면 정상 화면 원인 크롬 윈도우 37정식판부터 글꼴 처리방식을 위한 ‘다이렉트라이트(DirectWrite)’의 기본 옵션이 ‘사용’ 으로 됨. 다이렉트라이트(DirectWrite)가 활성화 됐을 경우 ‘굴림’이나 ‘돋움’같은 비트맵 폰트들을 표현 할때 자간을 불규칙하게 만드는 현상이 나타남.  빌드번호 37.0.2062.94 버전으로 정식 배포된 크롬 브라우저가 글꼴 자간을 불규칙하게 만드는 현상은 윈도7 환경에서 한글 글꼴 중 ‘굴림’이나 ‘돋움’같은 비트맵 폰트를 표시할 때 나타나는 것으로 파악됐다. http://www.zdnet.co.kr/news/news_view.asp?artice_id=20140915152518 해결방법 한글 폰트 선언…read more

0

Windows 고대비 모드와 이미지 대치 기법, 배경 이미지가 사라지는 현상

Posted by in BugReport, Research

고대비 모드 고대비 모드란? 일반적으로 저시력자를 위해 고려된 모드입니다. 개인 성향에 따라 누구나 쉽게 설정할 수 있습니다. 고대비 모드 설정하기 – 윈도우 XP 윈도우에서 고대비 모드를 설정하는 방법은 다양합니다. 아래는 XP부터 8.1까지 윈도우 고대비 모드를 설정하는 방법들입니다. 윈도우 XP의 고대비 모드 설정은 제어판 내게 필요한 옵션에서도 가능합니다. 디스플레이 등록정보 설정의 고대비 모드를 색 구성표에서 선택합니다.    이는 윈도우 비스타/ 7/ 8.1 에서도 역시, 바탕화면에서 우클릭하여 개인 설정에 진입하면 고대비 모드를 손쉽게 설정할 수 있습니다. 단축키로 왼쪽 Shift + 왼쪽 Alt + Print Screen 키를 입력하여 고대비 기능을 켤 수도 있습니다….read more

0

[iOS] AppleSDGothicNeo 폰트가 다르게 노출되는 현상

Posted by in BugReport, Research

현상 재현환경 iOS 7.1 AppleSDGothicNeo 폰트 패밀리에 font-weight:bold 속성을 주었을 때 굵어지는 정도가 규칙적이지 않다. 원인 css로 font-weight:bold 속성을 줄 경우 브라우저마다 각각의 폰트를 표현하는 방법이 다른데, AppleSDGothicNeo 폰트 패밀리에서는 AppleSDGothicNeo-Light와 AppleSDGothicNeo-Medium 이 다른 폰트에 비해 글자 넓이가 넓어져 오류처럼 보인다. 해결방법 AppleSDGothicNeo 폰트 패밀리의 굵기 표현 단계를 다음과 같이 사용하는것을 권장한다. 참고사항 AppleSDGothicNeo 폰트 패밀리에 bold 속성을 줄 경우 아래 내용과 같이 표현된다. AppleSDGothicNeo-Bold, AppleSDGothicNeo-Bold(font-weight:bold),AppleSDGothicNeo-Regular(font-weight:bold)는 같은 모습으로 렌더링 되므로 AppleSDGothicNeo-Regular(font-weight:bold)로 표현한다. AppleSDGothicNeo만 선언하면 AppleSDGothicNeo-Regular로 렌더링 되므로 AppleSDGothicNeo(font-weight:bold)로 사용가능하다. AppleSDGothicNeo-SemiBold 와 AppleSDGothicNeo-Thin(font-weight:bold)는 같은 모습으로 렌더링 되므로 AppleSDGothicNeo-Thin(font-weight:bold)로 표현한다.   AppleSDGothicNeo-Light와 AppleSDGothicNeo-Medium는 bold…read more

0

[iOS] 특수문자인식오류 해결

Posted by in BugReport, Research

서비스명: 지식백과 / 제보자 : 정사라 현상 재현환경 ios 버전 6.1.3, 7.1.1, 7.0.4 safari 브라우저 ios에서 기본 entity는 정상노출됩니다. 하지만, ㈜의 경우 entity코드가 없어 unicode로 넣어 대체하였으나, Helvetica font에서 해당 unicode 인식하지 못해 x표시(일명 엑박)로 노출되는 문제가 있어 공유드립니다. 오류화면 정상 화면 정상화면URL: http://m.terms.naver.com/entry.nhn?docId=1395962&cid=685&categoryId=1426 원인 Helvetica만 선언했을경우 영문은 Helvetica로 보여주고 한글은 AppleSDGothicNeo 로 보여줌 unicode는 한글이 아니므로 Helvetica로 렌더링 시도 Helvetica는 ㈜에 해당하는 unicode를 지원하지 않아 X로 노출 해결방법 기본폰트인 Helvetica뒤에 sans-serif도 추가로 넣어 해결됨. sans-serif는 영문,숫자를 포함한 모든 문자를 html의 lang값에 맞는 기본 폰트로 노출해줌. (ko일 경우 ios에서는 AppleGothic /…read more

0

CSS Attribute Selector에 Style속성을 구분자로 사용하지 마세요

Posted by in BugReport, Research

저는 가끔 Attribute Selector를 사용해서 특정 스타일을 분기처리할 때가 있습니다. 그런데 Dom이 동적으로 변경되서 작성한 Attribute Selector의 조건이 됬는데 Style 속성을 구분자로 사용할 경우 해당 스타일을 화면에 안그립니다. 예를들어 배너가 활성화되있으면 배너 아래 있는 A박스가 margin-top:0 인데 배너가 비활성화 상태가 되면 A박스는 margin-top:10px이 된야한다. 이 경우 대부분의 브라우저가 margin-top:10px을 못 그립니다. 개발자 도구의 style탭에 스타일정보가 찍히는데도요… 그런데 커스텀 속성을 구분자로 사용하면 margin-top:10px을 잘 그립니다. – 테스트 URL : http://codepen.io/korearice/pen/GgmIx 또 신기한건 이 이슈는 dom이 동적으로 변경될때만 발생합니다. 최초 로딩시부터 dom이 style=”display:none” 상태이면 Dom 상태에 맞게 렌더트리를 구성해 놓은 상태이기 때문에 화면에…read more

0

[버그] 안드로이드 세로 뷰로 페이지 접근시 본문/댓글 등의 텍스트 영역의 가로 영역이 축소됨

Posted by in BugReport

안드로이드 단말에서 옵션으로 인해 재현되는 이슈 공유 드립니다. 재현환경 안드로이드 단말(PAD류 포함) 모든 버전 재현화면 재현조건 뷰포트 정의가 없음 (PC서비스) 좌측 정렬(디폴트 좌정렬 포함) 일정 길이 이상의 문장 원인 안드로이드에서 모바일 전용 페이지가 아닌 경우 텍스트를 쉽게 읽게 하기 위하여 사용되는 ‘페이지 자동 맞춤’ 옵션이 유발 해결방법 배경색 지정(#fff등)이나 투명 배경이미지를 지정하여 해결 해결된 태그 안쪽에 또 다른 block element가 들어오면 또다시 회피 되지 않음 2번의 이유로 피딩된 기사를 수신하거나 사용자 입력 데이터를 노출하는 영역은 해결 불가능 참고사항 http://www.youtube.com/watch?v=vuUEuduOR8c&noredirect=1 한글 OS에서의 접근은 브라우저에서 우상단 설정 > 고급 > 페이지 자동…read more

0

[모바일] Google Nexus 7에서 이미지 렌더링 이슈

Posted by in BugReport

문제점 Google Nexus 7에서 일부 이미지 해상도가 떨어지며,  이미지 주변으로 1px 정도의 실선이 보이는 문제를 발견했다. 미디어 쿼리로 고해상도 이미지를 분기 처리 하였지만 제대로 동작하지 않았다. 이 문제는  Android 4.4.2를 설치한 Google Nexus 7 2012 모델에서만 발생하고, 2013 모델에서는 발생하지 않았다. 원인과 해결책 1. 미디어 쿼리> Ratio 분기 고 해상도 이미지 대응용 미디어 쿼리에서 Ratio 최소 1.5부터 분기하는데, Nexus7의 2012 모델의 경우 Ratio가 1.3어서 분기 기준을 넘어서지 않았다.  1 Nexus7의 2012모델 사용자가 많거나 고해상도 이미지를 미디어 쿼리로 분기처리 한다면 pixel-ratio를 1.3으로 설정해야 한다.

2. 이미지 없거나 로딩 늦을 경우에 대한 대체 색상…read more

0

Flash addCallback으로 인한 IE8 Javascript error

Posted by in BugReport, Research

AS3.0은 ExternalInterface라는 클래스의 addCallback 함수를 이용해 javascript에서 호출 가능한 flash 함수를 등록할 수 있습니다. addCallback을 이용해 함수를 등록하면  플래시는 동적으로 __flash__addCallback(){} 이라는 javascript 함수를 생성하는데요, 이때 함수명을 특정 단어로 등록하면 IE8과 IE6에서 javascript error가 발생합니다. 위 화면처럼 디버깅시 오류화면을 볼 수 있으며, IE8에서 예약어로 지정된 단어를 사용하여 발생하는 현상입니다. IE8 예약어 목록 play stop tags item length play를 playAudio 혹은 playVideo같이 함수명만 바꿔주는 것으로 수정 가능합니다.

0

Flash Player 11.8.800.168 한글 깨짐 현상

Posted by in BugReport, Research

2013년 9월  배포된 플래시 플레이어 11.8.800.168과  11.8.800.174  에서 한글 깨짐 현상이 있었습니다. 추석 전후에 일어난 장애라 대응 또한 쉽지 않았는데요. 자세히 알아보도록 하겠습니다. 먼저 168버전의 버그입니다. Flash에서 javascript함수를 호출하고 인자로 한글을 넘길경우, 한글이 깨지는 문제입니다. 해결방법은 여러가지가 있겠지만 우리는 url encoding 처리를 하였습니다.

그런 다음 javascript에서 인자를 url decoding 하면 해당 문제는 해결 됩니다.

Flash 수정과 같이 javascript의 수정이 같이 이루어지기 때문에 이런 구조가 여러 서비스에서 사용 중일 경우 javascript를 찾아 일일이  수정하기가 어려울 수 있습니다. 이럴 땐 Flash에서 아래와 같이 수정하여 처리도 가능합니다.  javascript정의를 Flash에서 하는 방식입니다. 다만 호출…read more

0