Fluid Infusion

Font styling displayed differently in edit vs non-edit mode

Details

  • Type: Bug Bug
  • Status: Closed Closed
  • Priority: Major Major
  • Resolution: Fixed
  • Affects Version/s: 0.1, 0.3, 0.4beta1, 0.4, 0.5beta1, 0.5, 0.6beta1, 0.6, 0.7, 0.8, 1.0, 1.1, 1.1.1, 1.1.2, 1.2
  • Fix Version/s: 1.3
  • Component/s: Inline Edit
  • Labels:
    None
  • Environment:
    FF2, FF3, Opera 9.6, Safari 3.2 (Mac OS 10.5)
    Safari 3.2 (Mac OS 10.4)
    FF2, FF3, IE6, IE7, IE8, Opera 9.6 (Win XP)
    FF3, IE7, IE8 (Win Vista)
    IE6 (Win 2000)

Description

When editing the text in an in-line edit field, the text appears correctly in Lucida Grande font (e.g. &); however, it is displayed with a different font style. Copying and pasting the incorrect style into another program (e.g. ms word) shows the correct font.

Steps to reproduce:

1) open the inline edit demo page from the daily build site
http://build.fluidproject.org/fluid/sample-code/inline-edit/announcements/announcements.html

2) Edit one of the in-line edit fields by replacing the text with an '&'. Notice the font.

3) Press 'enter' on the keyboard to close the edit mode. Notice the font styling has changed.


This also effects the display of non-standard characters. You can find some here:
http://www.alanwood.net/unicode/miscellaneous_symbols.html

Attachments

  1. Picture 2.png
    5 kB
    14/Jul/08 7:54 PM
  2. screenshot-1.jpg
    2 kB
    10/Jul/08 1:40 PM
  3. screenshot-2.jpg
    0.8 kB
    10/Jul/08 1:41 PM
  4. screenshot-3.jpg
    1 kB
    10/Jul/08 1:43 PM
  5. screenshot-4.jpg
    0.8 kB
    10/Jul/08 1:45 PM

Issue Links

This issue relates to:
FLUID-1311 Non-standard character/symbol not displayed while in edit mode Minor Closed
FLUID-937 Text is larger than edit field Major Closed

Activity

Ascending order - Click to sort in descending order
Hide
Permalink
Justin Obara added a comment -
'screenshot-1' shows how the '&' symbol looks in edit mode
Show
Justin Obara added a comment - 'screenshot-1' shows how the '&' symbol looks in edit mode
Hide
Permalink
Justin Obara added a comment -
'screenshot-2' shows how the '&' looks outside of edit mode
Show
Justin Obara added a comment - 'screenshot-2' shows how the '&' looks outside of edit mode
Hide
Permalink
Justin Obara added a comment -
'screenshot-3' shows an example of a non-standard character/symbol in edit mode. It's supposed to be a smiley face.
Show
Justin Obara added a comment - 'screenshot-3' shows an example of a non-standard character/symbol in edit mode. It's supposed to be a smiley face.
Hide
Permalink
Justin Obara added a comment -
'screenshot-4' shows the same non-standard character/symbol as 'screenshot-3', but this time out of edit mode. Notice how it's now represented by a small square.
Show
Justin Obara added a comment - 'screenshot-4' shows the same non-standard character/symbol as 'screenshot-3', but this time out of edit mode. Notice how it's now represented by a small square.
Hide
Permalink
Anastasia Cheetham added a comment -
Daphne, could you try this out, and see what you think? Is this an issue? It's probably a side effect of the font that this sample page uses, but let me know what you think.
Show
Anastasia Cheetham added a comment - Daphne, could you try this out, and see what you think? Is this an issue? It's probably a side effect of the font that this sample page uses, but let me know what you think.
Hide
Permalink
Daphne Ogle added a comment -
This is weird. The "&" is particularly handled bad here. I can't figure out what font it is being displayed in. The real problem is that, at least to me, it doesn't even look like an ampersand in the font it's displayed in.

While checking this out I found that the edits are happening in a different font generally than display. So on the daily build site Justin points to, the text is displayed in Times but when edit mode kicks in it displays in Arial. In this particular case it isn't a big deal but will be when users are editing formatted text. We know users want a wysiwyg interaction.

I'm attaching a screen shot that show the 2 different fonts.

Can the component know what font the application is using for display of that field and use the same?
Show
Daphne Ogle added a comment - This is weird. The "&" is particularly handled bad here. I can't figure out what font it is being displayed in. The real problem is that, at least to me, it doesn't even look like an ampersand in the font it's displayed in. While checking this out I found that the edits are happening in a different font generally than display. So on the daily build site Justin points to, the text is displayed in Times but when edit mode kicks in it displays in Arial. In this particular case it isn't a big deal but will be when users are editing formatted text. We know users want a wysiwyg interaction. I'm attaching a screen shot that show the 2 different fonts. Can the component know what font the application is using for display of that field and use the same?
Hide
Permalink
Daphne Ogle added a comment -
screen shot showing different fonts used in display versus edit mode.
Show
Daphne Ogle added a comment - screen shot showing different fonts used in display versus edit mode.
Hide
Permalink
Daphne Ogle added a comment -
Another complication with the different display versus edit font is that the text is larger than the edit field so the user can't see all the text they want to edit once they are in edit mode. I'm assuming we are calculating text field size based on the text pre-edit. This doesn't seem to happen in Safari only in Firefox (both on macs, not sure about PCs)
Show
Daphne Ogle added a comment - Another complication with the different display versus edit font is that the text is larger than the edit field so the user can't see all the text they want to edit once they are in edit mode. I'm assuming we are calculating text field size based on the text pre-edit. This doesn't seem to happen in Safari only in Firefox (both on macs, not sure about PCs)
Hide
Permalink
Justin Obara added a comment -
The font styling issue does not seem to occur in the bspace example (http://build.fluidproject.org/fluid/sample-code/inline-edit/section-info/section-info.html), or it could be that the font styling is similar.
Show
Justin Obara added a comment - The font styling issue does not seem to occur in the bspace example (http://build.fluidproject.org/fluid/sample-code/inline-edit/section-info/section-info.html), or it could be that the font styling is similar.
Hide
Permalink
Justin Obara added a comment -
design-watched
Show
Justin Obara added a comment - design-watched
Hide
Permalink
Daphne Ogle added a comment -
Unassigning so this can go into the development pool of bugs.
Show
Daphne Ogle added a comment - Unassigning so this can go into the development pool of bugs.
Hide
Permalink
Jonathan Hung added a comment - - edited
This issue is covered by the Simple Inline Edit Test plan.
Infusion 1.3 release testing did not reveal any issues related to mis-coding of characters.
Show
Jonathan Hung added a comment - - edited This issue is covered by the Simple Inline Edit Test plan. Infusion 1.3 release testing did not reveal any issues related to mis-coding of characters.
Hide
Permalink
Jonathan Hung added a comment -
Fixed in Infusion 1.3.
Show
Jonathan Hung added a comment - Fixed in Infusion 1.3.

People

Vote (0)
Watch (0)

Dates

  • Created:
    Updated:
    Resolved:
Atlassian JIRA (v4.4#649-r158309) | Report a problem
Powered by a free Atlassian JIRA open source license for The FLUID Project. Try JIRA - bug tracking software for your team.