1

I work on a team of developers. Some like to use Dreamweaver but I really do prefer Notepad++. The problem comes whenever we need to edit one anothers files and the tabs don't match up / align (indentation). I'm curious to why this happens and wondering if there was a way in either Dreamweaver settings or Notepad++ settings to convert these tabs into something different so that they match. Is this possible / how?

Examples

The top image is simple CSS in Notepad++ and the bottom is code inside Dreamweaver.

Top: Notepad++ - Bottom: Dreamweaver

The image on the left is Notepad++ Tab Settings which is set to 4. The image on the right is Dreamweaver Code Formatting whose tab is also set to 4.

Left: Notepad++ - Right: Dreamweaver

The image on the left is Dreamweaver and the image on the right is Notepad++ which look to be using the same font Courier New 10px, though they do not look it.

Left: Dreamweaver - Right: Notepad++

Discrepancies

In the example above, in Dreamweaver it seems butting the bracket directly up to the h6 then tab does a double-space instead of a full 4 spaces where Notepad++ does a "7 space" tab which is very strange.

Improve this question
7
  • What display font are you using in Dreameaver and in Notepad++? In your second image (notepad++?) it doesn't look like a fixed width font ...
    – DavidPostill ♦
    Dec 2, 2014 at 22:19
  • a) Use the same font in both, and b) try turning off the "Indent with 2 spaces" option in Dreamweaver. Also, can you please make the TAB/whitespace characters visible in the editor(s) and re-do the screenshots (so we can see the actual whitespace characters being inserted)?
    – Ƭᴇcʜιᴇ007
    Dec 2, 2014 at 22:27
  • @Ƭᴇcʜιᴇ007 I'm not sure how to make the TAB/Whitespace visible in either editor besides highlighting - is there an easier way to do this that would be more helpful?
    – Howdy_McGee
    Dec 2, 2014 at 22:35
  • Notepad++: View->Show Symbol->Show White Space and TAB. Dreamweaver: View->Code View Options->Hidden Characters. :)
    – Ƭᴇcʜιᴇ007
    Dec 2, 2014 at 22:40
  • @Ƭᴇcʜιᴇ007 That's cool, thanks! I've updated the first image to the image with the tab / space highlighting.
    – Howdy_McGee
    Dec 2, 2014 at 22:54

2 Answers 2

Reset to default
3
+100

I believe that the problem is with the default styling of Notepad++ for CSS files.

Go to the menu entry of Settings / Style Configurator, then click on CSS and TAG, getting this :

image1

You will notice that the font used is @Batang (which I personally never heard of or used). This font does not look like it is a monospace font.

Change the font to the default and click Save & Close :

image2

Here is the display, where the first image is before and the second after this change :

image3
image4

The second image, from after the change, looks now much more like a monospace font.

You could change the fonts some more, to better agree with Dreamweaver. However, as I do not use it, I do not know what fonts it uses for displaying CSS.

Improve this answer
1
  • Yeah that was the problem. My globals were Courier New but for whatever reason CSS was different. Now I know I need to check the fonts on a language level to match up with Dreamweaver. Thanks a ton!
    – Howdy_McGee
    Dec 29, 2014 at 14:35
1

If you take a close look at the image, you'll notice that Notepad++ is not rendering the monospaced font correctly. It appears to be an issue with the space character. See how the h4 tags don't line up. Compare that to the Dreamweaver screenshot where all the characters are lined up in neat columns.

This StackOverflow question seems to be addressing the same problem, so there may be something in the CSS template file that's causing problems.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.