X
Tap here to go to the mobile version of the site.

Fóram Tacaíochta

Gaps apper after groups of characters in a rendered html, not in the code html, but whatever firefox uses to render what we see when open a page.

Postáilte

Loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong

If you take that long word put in a .html, and render, for me shows small gaps after groups of 9, 14, 18, 20... characters. The number of characters may change in different tags, like tables or a div, but always show small gaps. Tested in chromiun, but just works fine, without this gaps.

In online text editor does not show, but when rendered is shows.

Another detail, you need a css to force the word to break. And when this lines are created by the brake is when the gaps are visible. The css code used in that flow:


tag { word-break: break-word; //1 For chromiun word-wrap: break-word; //2 For chromiun overflow-wrap: anywhere; //3 For Firefox }

Loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong If you take that long word put in a .html, and render, for me shows small gaps after groups of 9, 14, 18, 20... characters. The number of characters may change in different tags, like tables or a div, but always show small gaps. Tested in chromiun, but just works fine, without this gaps. In online text editor does not show, but when rendered is shows. Another detail, you need a css to force the word to break. And when this lines are created by the brake is when the gaps are visible. The css code used in that flow: tag { word-break: break-word; //1 For chromiun word-wrap: break-word; //2 For chromiun overflow-wrap: anywhere; //3 For Firefox }
Attached screenshots

Athraithe ag freethebit ar

Luaigh

Tuilleadh mionsonraí faoin chóras

Breiseáin Shuiteáilte

with or without plugins does not affect, the gaps are always there.

Feidhmchlár

  • User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:67.0) Gecko/20100101 Firefox/67.0

Tuilleadh Eolais

cor-el
  • Top 10 Contributor
  • Moderator
17415 réiteach 157316 freagra

See also:

This could be a problem with the font that is used.

You can right-click and select "Inspect Element" to open the builtin Inspector with this element selected.

You can check in the Rules tab in the right panel in the Inspector what font-family is used for selected text. You can check in the Font tab in the right panel in the Inspector what font is actually used because Firefox might be using a different font than specified by the website.

See also: *https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap This could be a problem with the font that is used. You can right-click and select "Inspect Element" to open the builtin Inspector with this element selected. *https://developer.mozilla.org/en-US/Tools/Page_Inspector You can check in the <b>Rules</b> tab in the right panel in the Inspector what font-family is used for selected text. You can check in the <b>Font</b> tab in the right panel in the Inspector what font is actually used because Firefox might be using a different font than specified by the website. *https://developer.mozilla.org/en-US/Tools/Page_Inspector/How_to/View_fonts
An bhfuil an freagra seo cabhrach? 0
Luaigh

Úinéir na ceiste

cor-el said

See also: This could be a problem with the font that is used. You can right-click and select "Inspect Element" to open the builtin Inspector with this element selected. You can check in the Rules tab in the right panel in the Inspector what font-family is used for selected text. You can check in the Font tab in the right panel in the Inspector what font is actually used because Firefox might be using a different font than specified by the website.

It happens with any font, I use 3 different fonts (open sans, oswald, roboto mono). Ok, i tested without those, with system fonts, the problem still persist. I think there is a bug in firefox related to 'overflow-wrap'.

''cor-el [[#answer-1226885|said]]'' <blockquote> See also: *https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap This could be a problem with the font that is used. You can right-click and select "Inspect Element" to open the builtin Inspector with this element selected. *https://developer.mozilla.org/en-US/Tools/Page_Inspector You can check in the <b>Rules</b> tab in the right panel in the Inspector what font-family is used for selected text. You can check in the <b>Font</b> tab in the right panel in the Inspector what font is actually used because Firefox might be using a different font than specified by the website. *https://developer.mozilla.org/en-US/Tools/Page_Inspector/How_to/View_fonts </blockquote> It happens with any font, I use 3 different fonts (open sans, oswald, roboto mono). Ok, i tested without those, with system fonts, the problem still persist. I think there is a bug in firefox related to 'overflow-wrap'.

Athraithe ag freethebit ar

An bhfuil an freagra seo cabhrach?
Luaigh
cor-el
  • Top 10 Contributor
  • Moderator
17415 réiteach 157316 freagra

Can you attach screenshots for comparison?


If content is wrapped then you can always expect some extra white-space. Only with a real monospace font this shouldn't happen unless the available width isn't a multiple of the character width. With a proportional font this could be possible if the next character doesn't fit.

Can you attach screenshots for comparison? *https://support.mozilla.org/en-US/kb/how-do-i-create-screenshot-my-problem *use a compressed image type like PNG or JPG to save the screenshot If content is wrapped then you can always expect some extra white-space. Only with a real monospace font this shouldn't happen unless the available width isn't a multiple of the character width. With a proportional font this could be possible if the next character doesn't fit.
An bhfuil an freagra seo cabhrach?
Luaigh

Úinéir na ceiste

cor-el said

Can you attach screenshots for comparison? If content is wrapped then you can always expect some extra white-space. Only with a real monospace font this shouldn't happen unless the available width isn't a multiple of the character width. With a proportional font this could be possible if the next character doesn't fit.

Going deep, If the element that has 'overflow-wrap' also have 'letter-spacing=0.003em;' it will will show random gaps, but without the 'letter-spacing' only monospace fonts show gap.

''cor-el [[#answer-1226890|said]]'' <blockquote> Can you attach screenshots for comparison? *https://support.mozilla.org/en-US/kb/how-do-i-create-screenshot-my-problem *use a compressed image type like PNG or JPG to save the screenshot If content is wrapped then you can always expect some extra white-space. Only with a real monospace font this shouldn't happen unless the available width isn't a multiple of the character width. With a proportional font this could be possible if the next character doesn't fit. </blockquote> Going deep, If the element that has 'overflow-wrap' also have 'letter-spacing=0.003em;' it will will show random gaps, but without the 'letter-spacing' only monospace fonts show gap.
An bhfuil an freagra seo cabhrach?
Luaigh

Úinéir na ceiste

Some screenshots. Full code: https://gitlab.com/freethebit/web-documentation-skin
An bhfuil an freagra seo cabhrach?
Luaigh
cor-el
  • Top 10 Contributor
  • Moderator
17415 réiteach 157316 freagra

Why such a very small value (letter-spacing:0.003em;) ? This would normally be about zero but after some characters this can result in a 1px shift (position is rounded).

Note that such a faint gray text on a black background like you use isn't very good readable (low contrast).

Why such a very small value (letter-spacing:0.003em;) ? This would normally be about zero but after some characters this can result in a 1px shift (position is rounded). Note that such a faint gray text on a black background like you use isn't very good readable (low contrast).
An bhfuil an freagra seo cabhrach? 0
Luaigh

Úinéir na ceiste

cor-el said

Why such a very small value (letter-spacing:0.003em;) ? This would normally be about zero but after some characters this can result in a 1px shift (position is rounded). Note that such a faint gray text on a black background like you use isn't very good readable (low contrast).

About the small number, really? It make difference, in other browsers works fine, in Firefox it create small gaps that are not supposed to be there.

Low contrast is good for dark places, disagree with your opinion. Just try to read something with lower contrast in the darkness for more than 30minutes and you are going to feel the your eyes less tired than with high contrast.

The sidebar contrast is activated on :hover. it has a lower contrast because of when you reading long stuff you don't wan't your eyes to get distracted with a lot of stuff.

''cor-el [[#answer-1226906|said]]'' <blockquote> Why such a very small value (letter-spacing:0.003em;) ? This would normally be about zero but after some characters this can result in a 1px shift (position is rounded). Note that such a faint gray text on a black background like you use isn't very good readable (low contrast). </blockquote> About the small number, really? It make difference, in other browsers works fine, in Firefox it create small gaps that are not supposed to be there. Low contrast is good for dark places, disagree with your opinion. Just try to read something with lower contrast in the darkness for more than 30minutes and you are going to feel the your eyes less tired than with high contrast. The sidebar contrast is activated on :hover. it has a lower contrast because of when you reading long stuff you don't wan't your eyes to get distracted with a lot of stuff.

Athraithe ag freethebit ar

An bhfuil an freagra seo cabhrach?
Luaigh
Cuir ceist

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.