حوّل النقاط (pt) إلى بكسل (px)

آخر مراجعة للمحتوى:

12 pt تساوي 16 px، وعلى الورق تشغل نحو 4.23 مم. في البوصة الواحدة 72 نقطة و96 بكسل CSS، فيكفي أن تضرب النقاط في 4/3. نص مقاسه 11 نقطة في Word يظهر على صفحة الويب بمقاس 14.67 بكسل، وعنوان مقاسه 18 نقطة يساوي 24 بكسل. اكتب النقاط في الحقل الأول ليظهر البكسل بجانبه.

pt
px
إلى

ما النقطة (pt) وما البكسل (px)؟

النقطة هي وحدة الطباعة التي تُقاس بها مقاسات الحروف. تحسب برامج اليوم نقطة النشر المكتبي (DTP)، ومقدارها 1/72 من البوصة، أي نحو 0.3528 مم[1]، وتعرّفها CSS بالمقدار نفسه[2]. أما الصف المعدني في أوروبا القارية فاستعمل نقطة ديدو، ومقدارها نحو 0.376 مم[1].

البكسل هو أصغر عنصر منفرد في مصفوفة الصورة النقطية أو في شاشة العرض[3]. وفي CSS البكسل وحدة طول أيضاً: 1/96 من البوصة[2]. ولأن البوصة تتسع لـ72 نقطة و96 بكسل، فإن الطول نفسه يعطي بالبكسل رقماً أكبر بمقدار 4/3 مما يعطيه بالنقاط.

حروف معدنية مرصوفة في أسطر ومربوطة بخيط
حروف معدنية مرصوفة في أسطر ومربوطة بخيط. تُصَبّ الحروف معكوسة كي تظهر صحيحة على الورق. في الصف المعدني كان المقاس بالنقاط يقيس ارتفاع الجسم المعدني الذي يحمل الحرف[1]. جسم مقاسه 12 نقطة في نظام ديدو يبلغ نحو 4.51 مم، بينما 12 نقطة في برامج اليوم تبلغ 4.23 مم. الصورة: Hannes Wolf، Unsplash.

كم بكسل تساوي 12 نقطة؟

12 نقطة تساوي 16 بكسل. لتعرف البكسل اضرب النقاط في 96 واقسم على 72، أي اضربها في 4/3. و18 نقطة تساوي 24 بكسل، و72 نقطة، وهي بوصة كاملة، تساوي 96 بكسل. أما على الورق فتشغل 12 نقطة نحو 4.23 مم.

هذه النسبة تأتي من معيار CSS الذي يجعل البوصة 96 بكسل والنقطة 1/72 من البوصة[2]. لذلك يظهر نص مكتوب بـfont-size: 12pt ونص مكتوب بـfont-size: 16px بالمقاس نفسه في كل متصفح. و16 بكسل هو المقاس الافتراضي الشائع للخط في المتصفحات[4]. فإذا نقلت مقاس خط من مستند Word إلى صفحة ويب، حوّل النقاط إلى بكسل أولاً.

وحين تكتب النتيجة في ملف CSS انتبه إلى الفاصل العشري: لا تقبل CSS إلا النقطة «.»[2]، فتكتب 14.67px ولا تكتب الفاصلة العربية «٫». لهذا ينسخ زر «نسخ النتيجة» الرقم بنقطة عشرية وبلا وحدة، فتلصقه في الملف كما هو.

وإذا كان عندك المقاس بوحدة أخرى فلا تحسبه بنفسك: الصق «16px» أو «3 مم» أو «١٢ نقطة» في الحقل، فيحوّله المحوّل إلى وحدة الحقل ويكتب تحته كم صارت القيمة. والأشكال المقبولة كلها في جدول أسفل الصفحة.

كيف تحوّل النقاط إلى بكسل؟

المعادلة هي px = pt × 96 ÷ 72، أي الضرب في 4/3. فـ9 نقاط تساوي 12 بكسل، و24 نقطة تساوي 32 بكسل، و36 نقطة تساوي 48 بكسل. المقاسات التي تقبل القسمة على 3 تعطي بكسلاً صحيحاً، وغيرها يعطي كسراً: 10 نقاط تساوي 13.33 بكسل، و11 نقطة تساوي 14.67 بكسل.

المعادلة نفسها تصلح لسُمك الخطوط: 0.75 نقطة تساوي بكسلاً واحداً بالضبط، و1.5 نقطة تساوي بكسلين. وللحساب في الاتجاه المعاكس استعمل محوّل px إلى pt حيث يُضرب البكسل في 0.75. أما البايكا، وهي 12 نقطة، فيحوّلها محوّل البايكا إلى px، ووحدة rem التي تتبع مقاس خط المتصفح يحوّلها محوّل rem إلى px.

الرقم 96 جاء من Windows. حسبت Microsoft أن الشاشة تبعد عن العين نحو الثلث أكثر من ورقة في اليد، فقررت أن تُبلِغ عن دقة الشاشات القريبة من 72 PPI بوصفها 96 PPI[5]. ومعيار CSS يعرّف البكسل المرجعي بأنه بكسل شاشة دقتها 96 dpi يُنظر إليها من مسافة ذراع ممدودة[2].

نموذج خط ألماني يعرض الخط نفسه بمقاسات من 4 إلى 20 Punkte
في هذا النموذج الألماني يظهر الخط نفسه بمقاسات من 4 إلى 20 Punkte. في ألمانيا استقرت نقطة ديدو، ومقدارها نحو 0.376 مم[1]. فإذا كانت الـ12 Punkte في النموذج نقاط ديدو، فالمقاس نحو 4.51 مم، أي أكبر قليلاً من 12 نقطة في هذا المحوّل (4.23 مم). الصورة: ملكية عامة.

كم بكسل يساوي كل مقاس خط؟

يعرض الجدول 30 مقاساً من 6 إلى 96 نقطة، بالبكسل عند 96 DPI وبالمليمتر على الورق. المميَّز منها 12 نقطة، و18 نقطة وهي المقاس الذي تَعُدّ منه إرشادات WCAG النص «كبير الحجم» (أو من 14 نقطة إذا كان عريضاً)[6]، و72 نقطة وهي بوصة كاملة.
مقاس الخطبكسل (96 DPI)مليمتر
6 pt8 px2.117 مم
7 pt9.33 px2.469 مم
8 pt10.67 px2.822 مم
9 pt12 px3.175 مم
10 pt13.33 px3.528 مم
10.5 pt14 px3.704 مم
11 pt14.67 px3.881 مم
12 pt16 px4.233 مم
13 pt17.33 px4.586 مم
14 pt18.67 px4.939 مم
15 pt20 px5.292 مم
16 pt21.33 px5.644 مم
18 pt24 px6.350 مم
20 pt26.67 px7.056 مم
21 pt28 px7.408 مم
22 pt29.33 px7.761 مم
24 pt32 px8.467 مم
26 pt34.67 px9.172 مم
28 pt37.33 px9.878 مم
30 pt40 px10.583 مم
32 pt42.67 px11.289 مم
34 pt45.33 px11.994 مم
36 pt48 px12.700 مم
40 pt53.33 px14.111 مم
44 pt58.67 px15.522 مم
48 pt64 px16.933 مم
54 pt72 px19.050 مم
60 pt80 px21.167 مم
72 pt96 px25.400 مم
96 pt128 px33.867 مم
عمود البكسل محسوب بالطريقة نفسها التي يحسب بها المحوّل، ومعروض بمنزلتين عشريتين. والمليمترات محسوبة بأن النقطة الواحدة = 25.4/72 مم.

كم بكسل يساوي سُمك الخط؟

في برامج التنضيد يُعطى سُمك الخطوط والإطارات بالنقاط أيضاً. ومداه أضيق كثيراً من مقاسات الخط، لذلك جمعناه في جدول منفصل. خط سُمكه 0.75 نقطة يساوي بكسلاً واحداً بالضبط، أي ما يساوي border: 1px في ملف CSS.
سُمك الخطبكسل (96 DPI)مليمتر
0.25 pt0.33 px0.088 مم
0.5 pt0.67 px0.176 مم
0.75 pt1 px0.265 مم
1 pt1.33 px0.353 مم
1.5 pt2 px0.529 مم
2 pt2.67 px0.706 مم
3 pt4 px1.058 مم
4 pt5.33 px1.411 مم
5 pt6.67 px1.764 مم
6 pt8 px2.117 مم
8 pt10.67 px2.822 مم
10 pt13.33 px3.528 مم
12 pt16 px4.233 مم
على الشاشة لا تبلغ الخطوط التي سُمكها 0.5 نقطة فأقل بكسلاً كاملاً. عمود البكسل معروض بمنزلتين عشريتين.

هل نقطة ديدو هي نقطة Word نفسها؟

لا. نقطة ديدو التي استُعملت في الصف المعدني في أوروبا القارية تبلغ نحو 0.376 مم، بينما نقطة DTP في Word وفي معظم البرامج تبلغ 0.3528 مم[1]. وعند 12 نقطة يصل الفرق إلى 0.28 مم، أي نحو بكسل واحد على الشاشة. أما TeX وLaTeX فيكتبان «pt» للمقدار 1/72.27 من البوصة، ويكتبان «bp» للمقدار 1/72[1].
النقطةنقطة واحدة12 نقطة12 نقطة بالبكسلأين تلقاها
نقطة DTP (PostScript)0.3528 مم4.233 مم16 pxWord وInDesign وPDF وCSS؛ وهي نقطة هذا المحوّل
نقطة ديدو0.3760 مم4.512 مم17.05 pxالصف المعدني في أوروبا القارية
نقطة TeX0.3515 مم4.218 مم15.94 px«pt» في TeX وLaTeX
عمود البكسل يعرض كل طول بالبكسل عند 96 DPI. ويحسب هذا المحوّل بنقطة السطر الأول.

أي أشكال الكتابة يقبلها حقل النقاط في هذا المحوّل؟

يقبل حقل النقاط كل الأشكال في هذا الجدول ويحسبها، فلا تحتاج إلى تصحيح القيمة قبل لصقها. يمكنك كتابة القيمة المنسوخة من Word أو من ملف CSS مع وحدتها، وبالأرقام العربية الهندية، وبالفاصلة العشرية «٫». أما القيمة المكتوبة بوحدة أخرى، بالبكسل مثلاً، فيحوّلها الحقل أولاً إلى نقاط ويكتب تحته سطراً مثل «القيمة الملصقة 16px تساوي في هذا الحقل 12 pt.». والعمود الأوسط هو النتيجة التي حسبها المحوّل نفسه.
ما تكتبه أو تلصقهنتيجة المحوّلكيف يقرأ الحقل هذا الشكل
1216 pxإذا كتبت الرقم وحده قرأه الحقل بالنقاط.
10.514 pxالنقطة العشرية تفصل الكسر، كما في حقل النتيجة؛ يحسب الحقل 10.5 نقطة.
١٢16 pxالأرقام العربية الهندية مقبولة أيضاً: يقرأ الحقل 12 نقطة.
١٠٫٥ نقطة14 pxمع الفاصلة العشرية العربية «٫» واسم الوحدة، يحسب الحقل 10.5 نقطة.
12 نقطة16 pxيمكنك كتابة اسم الوحدة مع الرقم؛ يحسب الحقل 12 نقطة.
12pt16 pxالاختصار المنسوخ من Word أو من ملف CSS هو وحدة الحقل نفسها، فتبقى القيمة كما هي.
font-size: 16px;16 pxالسطر المنسوخ من ملف CSS مكتوب بالبكسل: تُحوَّل القيمة أولاً إلى نقاط فيدخل الحقل 12. يتجاهل الحقل اسم الخاصية والفاصلة المنقوطة.
١٦ بكسل16 pxقيمة بالبكسل بالأرقام العربية الهندية: تُحوَّل إلى نقاط فيدخل الحقل 12.
3 مم11.34 pxالمليمترات تُحوَّل أولاً إلى نقاط: يدخل الحقل 8.503937.
1 بوصة96 pxالبوصة مقبولة أيضاً: بوصة واحدة تساوي 72 نقطة.
3/41 pxالكسر مقبول كذلك: 0.75 نقطة تساوي بكسلاً واحداً بالضبط.
قبل كتابة هذا الجدول جرّبنا كل شكل في الحقل الحقيقي. وأشكال الكتابة التي يقبلها حقل البكسل في جدول صفحة محوّل px إلى pt.

كيف تبدّل الوحدة بين النقاط والبكسل في البرامج؟

  1. Adobe InDesign

    في Windows افتح Edit › Preferences › Units & Increments، وفي macOS InDesign › Preferences › Units & Increments، ثم اختر Pixels في Ruler Units للخانتين Horizontal وVertical[7] (الأسماء من الواجهة الإنجليزية، إذ لا واجهة عربية للبرنامج). وأياً كانت الوحدة المختارة، يمكنك في أي حقل كتابة القيمة مع وحدتها، مثل «6pt» أو «6ap» أو «5px»، فيحوّلها InDesign إلى وحدة المستند[7].
  2. Adobe Photoshop

    في Windows اختر Edit › Preferences › Units & Rulers، وفي macOS Photoshop › Preferences › Units & Rulers؛ وتفتح النافذة نفسها بالنقر المزدوج على المسطرة[8]. وإذا اخترت في Point/Pica Size الخيار «PostScript (72 points per inch)» حسب Photoshop بالنقطة نفسها التي يحسب بها هذا المحوّل، أما الخيار «Traditional» فيحسب 72.27 نقطة في البوصة[8].
  3. Microsoft Word

    يعرض Word مقاس الخط بالنقاط في مربع «حجم الخط»، ويقبل مقاسات بين 1 و1638 بمضاعفات 0.5، مثل 10.5[9]. وللحصول على مقاس نص مقداره 16 بكسل في صفحة ويب اكتب 12، ولـ14 بكسل اكتب 10.5؛ وبقية القيم يحوّلها محوّل px إلى pt.

تحويل وحدات أخرى إلى بكسل

المصادر

  1. Point (typography) — ويكيبيديا (بالإنجليزية)
  2. CSS Values and Units Module Level 4 — W3C (بالإنجليزية)
  3. بكسل — ويكيبيديا
  4. <length> - CSS — MDN Web Docs (بالإنجليزية)
  5. Where does 96 DPI come from in Windows? — Microsoft Learn (بالإنجليزية)
  6. Web Content Accessibility Guidelines (WCAG) 2.2 — W3C (بالإنجليزية)
  7. Rulers and measurement units — Adobe InDesign Help (بالإنجليزية)
  8. Rulers — Adobe Photoshop Help (بالإنجليزية)
  9. تغيير حجم الخط — دعم Microsoft

حسبنا كل القيم في الجداول من تعريفات الوحدات وتحققنا منها بالحساب قبل النشر. تستند البيانات التاريخية وأسماء الوحدات المحلية إلى المصادر المذكورة أعلاه.

آخر مراجعة للمحتوى: · كتبه وراجعه فريق Arteon

أسئلة شائعة عن تحويل النقاط إلى بكسل

كم بكسل تساوي 14 نقطة؟

نحو 18.67 بكسل، لأن 14 × 4/3 = 18.666…، فتكتب في ملف CSS القيمة 18.67px.

كم مليمتر في النقطة الواحدة؟

نقطة Word وCSS هي 1/72 من البوصة، أي نحو 0.3528 مم. ونقطة ديدو نحو 0.376 مم[1]. فـ12 نقطة في Word تساوي 4.23 مم، و12 نقطة ديدو تساوي 4.51 مم.

هل 12 px و12 pt المقاس نفسه؟

لا. 12 نقطة تساوي 16 بكسل، و12 بكسل تساوي 9 نقاط. تُستعمل النقاط في Word وInDesign، والبكسل في ملفات CSS، فالرقم نفسه يعني مقاساً مختلفاً.

كم بكسل تساوي 10 نقاط؟

13.33 بكسل. ولأن 10 لا تقبل القسمة على 3 بلا باقٍ، تخرج النتيجة كسرية؛ وCSS تقبل القيم الكسرية أيضاً.

كم بكسل تساوي 72 نقطة؟

96 بكسل بالضبط، أي بوصة واحدة أو 25.4 مم. ومعيار CSS يجعل البوصة 96 بكسل والنقطة 1/72 من البوصة[2].

هل يقبل الحقل الأرقام العربية الهندية؟

نعم. يمكنك كتابة «١٢» أو «١٠٫٥ نقطة» بالفاصلة العشرية العربية، ويقرأ الحقل القيمة نفسها ويحسبها. أما النتيجة فتُعرض بالأرقام اللاتينية وبنقطة عشرية، كما تكتبها ملفات CSS.

هل نقطة LaTeX هي نقطة هذا المحوّل؟

لا. في TeX وLaTeX تعني «pt» المقدار 1/72.27 من البوصة، أما النقطة 1/72 فتُكتب هناك «bp»[1]. والفرق نحو 0.4%، أي 0.016 مم عند 12 نقطة. ويحسب هذا المحوّل بنقطة DTP التي تقابل «bp».

كم بكسل يساوي خط سُمكه 0.5 نقطة؟

نحو 0.67 بكسل. وخط سُمكه 0.75 نقطة يساوي بكسلاً واحداً بالضبط، وسُمكه 1.5 نقطة يساوي بكسلين.

لقطة شاشة لأداة مجانية من Arteon: حوّل النقاط (pt) إلى بكسل (px)

ساعدنا في تحسين هذا المحوّل

هل وجدت قيمة يعطي فيها برنامجك نتيجة مختلفة، أو عندك فكرة؟ اكتب لنا.